Multiple Carousel Pagination sync issue inside Infinite FlatList

Question

Reactive Native Expo Mobile App: I am using React Native Snap Carousel using this tutorial to pop out the images from my database.

I have an infinite flat list with individual entries as React Native Snap Carousels, thus having multiple carousels with multiple Paginations.

On having multiple carousels, the Pagination index now is moving commonly as the same index and carousel ref is being used by all Paginations.

Please let me know how to map the carousel ref and pagination indexes such that the multiple carousels in my FlatList works fine.

Code I am using, for Reference:

const isCarousel = React.useRef(null);
const [index, setIndex] = React.useState(0);

const renderItem = ({item}) => {
return(
                // Some Card Stuff...
                <Carousel
                layout="tinder"
                layoutCardOffset={9}
                ref={isCarousel}
                data={photoArray}
                renderItem={CarouselCardItem}
                sliderWidth={SLIDER_WIDTH}
                itemWidth={ITEM_WIDTH}
                inactiveSlideShift={0}
                onSnapToItem={(index) => setIndex(index)}
                useScrollView={true}
              />
              <Pagination
                      dotsLength={photoArray.length}
                      activeDotIndex={index}
                      carouselRef={isCarousel}
                      dotStyle={{
                        width: 10,
                        height: 10,
                        borderRadius: 5,
                        marginHorizontal: 0,
                        backgroundColor: 'rgba(0, 0, 0, 0.92)'
                      }}
                      inactiveDotStyle={{
                        backgroundColor: 'rgba(4, 5, 3, 0.92)'
                      }}
                      inactiveDotOpacity={0.4}
                      inactiveDotScale={0.6}
                      tappableDots={true}
                    />
// Some more Stuff....
)

And the main FlatList:

return (
        <FlatList 
        data={data_data} 
        renderItem={renderItem}
        keyExtractor = {item => `${item.identifier}`}
        ListFooterComponent = {Loader}
        onEndReached = {loadStuff}
        onRefresh = {() => refreshData()}
        refreshing = {isRefreshing}
/>
)

Answer 1

Make Custom Carousel component by using your code like

const MyCarousel =({item}) => {
   const isCarousel = React.useRef(null);
   const [index, setIndex] = React.useState(0);
   
   return (
     <React.Fragment>
     <Carousel
        layout="tinder"
        layoutCardOffset={9}
        ref={isCarousel}
        data={photoArray}
        renderItem={CarouselCardItem}
        sliderWidth={SLIDER_WIDTH}
        itemWidth={ITEM_WIDTH}
        inactiveSlideShift={0}
        onSnapToItem={(index) => setIndex(index)}
        useScrollView={true}/>
        <Pagination
          dotsLength={photoArray.length}
          activeDotIndex={index}
          carouselRef={isCarousel}
          dotStyle={{
           width: 10,
           height: 10,
           borderRadius: 5,
           marginHorizontal: 0,
           backgroundColor: 'rgba(0, 0, 0, 0.92)'
          }}
          inactiveDotStyle={{ backgroundColor: 'rgba(4, 5, 3, 0.92)' }}
          inactiveDotOpacity={0.4}
          inactiveDotScale={0.6}
          tappableDots={true}/>
    </React.Fragment>
   )
}

Then Use it like below

const renderItem = ({item}) => {
   return(
    <View>
     <MyCarousel item={item}/> 
     // Some more Stuff....
    </View>
   );
}