React Native Carousel UseState

Question

I am currently implementing a carousel library ( react-native-reanimated-carousel ). The code for the following is represented as such:

<Carousel
      width={cardWidth}
      height={cardHeight}
      data={cards}
      onScrollEnd={() => {console.log('ended')}}
      renderItem={({item}) => 
      (
        <View>
          <Image 
          source={{uri: item["ImgURL"],}}
          style={styles.card}
          />
        </View>
      )}
    />

Upon the carousel changing, the item value in the renderItem property changes. Is there a way to get the value of item from outside this element? I want other elements outside to change depending on the value (and properties) of item .

Answer 1

You could try to call a callback function in the renderItem function.

() => {
  const [activeItem, setActiveItem] = useState(cards[0].item);

  return (<Carousel
    width={cardWidth}
    height={cardHeight}
    data={cards}
    onScrollEnd={() => {console.log('ended')}}
    renderItem={({item}) => {

      setActiveItem(item);

      return (
        <View>
          <Image 
          source={{uri: item["ImgURL"],}}
          style={styles.card}
          />
        </View>
      );
    }}
    />)
  );
};

Or you could use onScrollEnd. It provides the previous index and the current index according to the documentation

() => {
  const [activeItem, setActiveItem] = useState(cards[0].item);

  return (<Carousel
    width={cardWidth}
    height={cardHeight}
    data={cards}
    onScrollEnd={(previous, current) => {
      setActiveItem(cards[current].item);
      console.log('ended')
    }}
    renderItem={({item}) => (
        <View>
          <Image 
          source={{uri: item["ImgURL"],}}
          style={styles.card}
          />
        </View>
    )}
    />)
  );
};

Or you could use the Ref prop getCurrentIndex