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}
/>
)

score 0 · Accepted Answer · edited Aug 30 '21 at 08:08

0

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>
   );
}

edited Aug 30 '21 at 08:08

Jayesh

1,511
1
16
37

answered Aug 25 '21 at 17:21

Xhirazi

735
4
15

I am trying this but the ...>? – Jayesh Aug 28 '21 at 06:57
The above error is resolved by wrapping carousel code under React.Fragment.... Please accept the edit and I can mark this as answer. – Jayesh Aug 28 '21 at 07:05
There is only one problem in this method though. Whenever the Flatlist is reloading on end reached, to get more content then All the carousels and paginations are getting reset to first photo/index. – Jayesh Aug 28 '21 at 09:35
Because when you update state (list) the screen will repaint. – Xhirazi Aug 30 '21 at 08:14
Resolved the above by segregating the other card parts into their own components. Now i need to embed YouTube video in the card as well, which I am finding difficult to do.... – Jayesh Sep 02 '21 at 17:09

Multiple Carousel Pagination sync issue inside Infinite FlatList

1 Answers1