handle currentIndex inside renderItem

[ghost]

Question

I need to access to currentIndex inside renderItem to know if the current displayed item isFocus.

For the moment, I handle the index change with onSnapToItem with :

  const [carouselIndex, setIndex] = React.useState(initialIndex);
  const refCarousel = React.useRef(null);

  const handleIndexChange = (index: number) => {
    setIndex(index);
  };

 <Carousel
        data={productList}
        ref={refCarousel}
        style={fillContainer}
        sliderWidth={width}
        itemWidth={width}
        firstItem={initialIndex}
        onBeforeSnapToItem={handleIndexChange}
        keyboardShouldPersistTaps="always"
        renderItem={({ item, index }) => {
          return (
            <InventoryProductSheet
              key={item.id}
              productId={item.id}
              index={index}
              isFocused={index === carouselIndex}

            />
          );
        }}
      />

But there is some bug with hooks and react-native-snap-carousel (https://github.com/archriss/react-native-snap-carousel/issues/559)

i have tried refCarousel.current.currentIndex but its doesn't trigger rerender :/

There is a better way to handle currentIndex inside renderItem ?

[mohmdalfaha]

@ludwig-adoria Have you solved this issue yet ?? I am facing the same

Update

I've just used onSnapToIndex={(index) => setIndex(index)}

[dohooo]

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2

[umair-khanzada]

I also need to access the currentIndex I get renderItem but it's not changing on the very first change to forward/scrolldown after that it starts working but always shows activeIndex - 1, which works perfectly with back/scollup.

https://github.com/meliorence/react-native-snap-carousel/assets/8782817/85ea9490-2e35-451d-99e7-9c359e8ff8f8