Fetching data when swipe deck is empty

[AmirBraham]

Hello. I tried following the example in the repo . I used useState to store data and changed onSwipedRight and onSwipedLeft callbacks to update the state. The view gets re-rendered but it's empty Here's my code

export default function App() {
  const [data,setData] = React.useState( [
    'https://images.unsplash.com/photo-1681896616404-6568bf13b022?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1335&q=80',
    'https://images.unsplash.com/photo-1681871197336-0250ed2fe23d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80',
  ])

  const loadData = (index) => {
    if(index == 0) {
      console.log("loading data")
      setData([
      'https://images.unsplash.com/photo-1681238091934-10fbb34b497a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1282&q=80',
      ])
    }
  }
  return (
    <View style={{ flexDirection: "column", display: "flex", flex: 1, backgroundColor: "#14110f" }} >
      <GestureHandlerRootView style={styles.wrapper} >
        {data.map((item, index) => {
          console.log(item)
          return (
            <View
              style={styles.cardContainer}
              pointerEvents="box-none"
              key={index}
            >
              <TinderCard
                cardWidth={338}
                cardHeight={600}
                cardStyle={styles.card}
                onSwipedRight={() => {
                  loadData(index)
                }}
                onSwipedLeft={() => {
                  loadData(index)
                }}
              >
                <ImageBackground source={{ uri: item }} style={styles.image} >
                  <View style={{ position: 'absolute',height:"100%",width:"100%",  justifyContent:'flex-end', alignItems: 'center',paddingBottom:20, backgroundColor: 'rgba(0,0,0, 0.40)' }}>
                    <Text>Title goes here</Text>
                  </View>
                </ImageBackground>
              </TinderCard>
            </View>
          );
        })}
      </GestureHandlerRootView>

    </View>

  );
}

I have ommited the imports and styling as that's unrelated to the issue.

[AmirBraham]

So the correct way to do it is not to use the index variable that's provided by the map function but to use unique keys for each data image like this :

const [data,setData] = React.useState( [
    {src:'https://images.unsplash.com/photo-1681896616404-6568bf13b022?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1335&q=80',key:1}
    ,
    {
      src:'https://images.unsplash.com/photo-1681871197336-0250ed2fe23d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80',
      key:2
    },
  ])

[Skipperlla]

I'm going to write swiper inside the library to eliminate this kind of problem, I'm going to remove the TinderCard component completely and make it available only as swiper @AmirBraham