react-native-card-stack-swiper

react-native-card-stack-swiper copied to clipboard

It seems there is something wrong in here: ref={ swiper => { this.swiper = swiper }}

What is wrong exactly?

I am getting the same error when I try to incorporate this project into my existing code or even just run the demo itself. I don't know enough about JavaScript to know what's wrong, just that I always get the "TypeError: undefined is not an object ('_this.swiper=swiper')" error each time, likely at that line cited in the comment above,

<CardStack style={styles.content} ref={swiper => { this.swiper = swiper }}>
      <Card style={[styles.card, styles.card1]}><Text style={styles.label}>A</Text></Card>
      <Card style={[styles.card, styles.card2]}><Text style={styles.label}>B</Text></Card>
      <Card style={[styles.card, styles.card1]}><Text style={styles.label}>C</Text></Card>
</CardStack> 

What exactly is going with that ref? And why don't I see "ref" anywhere in the CardStack source code?

Ya I'm seeing the same thing.

I am seeing the very same error, Have any one of you figured it out ?

I ended up not using this library but it seems like it’s just trying to keep track of variable references. if you make an empty object and then assign the swiper variable to that it seems to work. I'm not really sure how or why this is helpful though so it may be fine just to remove.

const t = {};
// and then

<CardStack style={styles.content} ref={swiper => { t.swiper = swiper }}>

EDIT: I see it's used in instances like this below where you want to use methods on the swiper. Seems like this may also be a fix: https://github.com/lhandel/react-native-card-stack-swiper/issues/73

<CardStack style={styles.content} ref={swiper => { this.swiper = swiper }}>
    <Card style={[styles.card, styles.card1]}><Text style={styles.label}>A</Text></Card>
    <Card style={[styles.card, styles.card2]}><Text style={styles.label}>B</Text></Card>
  </CardStack>

  <TouchableOpacity onPress={ () => { this.swiper.swipeLeft() }}>
    <Text>Left</Text>
  </TouchableOpacity>

Do you use that in a functional component or a class component?

For a functional component the proper way to use it may be more:

const [swiper, setSwiper] = useState<CardStack | null>(null)

  return (
    <CardStack
      style={styles.container}
      ref={(newSwiper): void => {
        setSwiper(newSwiper)
      }}>
      <Card style={[styles.card, styles.card1]}>
        <Text style={styles.label}>A</Text>
      </Card>
      <Card style={[styles.card, styles.card2]}>
        <Text style={styles.label}>B</Text>
      </Card>
      <Card style={[styles.card, styles.card1]}>
        <Text style={styles.label}>C</Text>
      </Card>
    </CardStack>
  )
}

For a functional component the proper way to use it may be more:

const [swiper, setSwiper] = useState<CardStack | null>(null)

  return (
    <CardStack
      style={styles.container}
      ref={(newSwiper): void => {
        setSwiper(newSwiper)
      }}>
      <Card style={[styles.card, styles.card1]}>
        <Text style={styles.label}>A</Text>
      </Card>
      <Card style={[styles.card, styles.card2]}>
        <Text style={styles.label}>B</Text>
      </Card>
      <Card style={[styles.card, styles.card1]}>
        <Text style={styles.label}>C</Text>
      </Card>
    </CardStack>
  )
}

You should add this to the docs then.

For a functional component the proper way to use it may be more:

const [swiper, setSwiper] = useState<CardStack | null>(null)

  return (
    <CardStack
      style={styles.container}
      ref={(newSwiper): void => {
        setSwiper(newSwiper)
      }}>
      <Card style={[styles.card, styles.card1]}>
        <Text style={styles.label}>A</Text>
      </Card>
      <Card style={[styles.card, styles.card2]}>
        <Text style={styles.label}>B</Text>
      </Card>
      <Card style={[styles.card, styles.card1]}>
        <Text style={styles.label}>C</Text>
      </Card>
    </CardStack>
  )
}

You should add this to the docs then.

@thibaut-d c Even though state gets updated with the ref of CardStack, if you try invoking any of the swipeRight or swipeLeft actions, I'm not seeing it do anything.

I ended up not using this library but it seems like it’s just trying to keep track of variable references. if you make an empty object and then assign the swiper variable to that it seems to work. I'm not really sure how or why this is helpful though so it may be fine just to remove.

const t = {};
// and then

<CardStack style={styles.content} ref={swiper => { t.swiper = swiper }}>

EDIT: I see it's used in instances like this below where you want to use methods on the swiper. Seems like this may also be a fix: #73

<CardStack style={styles.content} ref={swiper => { this.swiper = swiper }}>
    <Card style={[styles.card, styles.card1]}><Text style={styles.label}>A</Text></Card>
    <Card style={[styles.card, styles.card2]}><Text style={styles.label}>B</Text></Card>
  </CardStack>

  <TouchableOpacity onPress={ () => { this.swiper.swipeLeft() }}>
    <Text>Left</Text>
  </TouchableOpacity>

Bro, you've have just saved my life. 👍