1

I have a Swiper implemented in my react native project (react-native-swiper), which I plan to show data along with pagination guides. While the swiper is working, I'm having an issue creating a consistent key - right now if one of the objects in the swiper list updates it may offset the index. While I've been able to prevent such glitches by adding a unique key on the objects, the Swiper pagination however is not in sync. The former key gets its data from mapping the list, but the Swiper object is on the outer scope so it's not able to use that identifier. I've attached the code for reference. Please let me know if I can set a key that ensures stable changes and correct pagination. Thank you.

                   <Swiper
                    key={data.length} //This is the key that enables correct pagination currently
                    paginationStyle={{bottom: -20}}
                    height={330}
                    dot={<View style={styles.Dot} />}
                    activeDot={<View style={styles.ActiveDot} />}
                   >
                    {data.map((dataX, index) => {
                      return (
                        <View key={dataX.uniqueToken}> //This (or the index) is the key I'd like to use on the Swiper element
                        ... stuff to show images, etc.
                        </View>
                      )
                    })}
                   </Swiper>
Abenezer Bayeh
  • 105
  • 10

1 Answers1

1

You can try use index as a key value, I always using index and no problem

Garry Priambudi
  • 31
  • 4
  • I can use it but still experience an issue since the swiper is not using valid key - what do you recommend for the key shown on the second line (Swiper)? Can't use index directly since the element is outside the mapping – Abenezer Bayeh Feb 02 '23 at 05:44
  • The `key` props of {banner.map((item, index) => ( actionBannerOpen(item.id, () => bannerOnPress(item)) }>... ))} – Garry Priambudi Feb 03 '23 at 08:37
  • I was able to eliminate the glitch by setting loop to false; you're correct with Swiper key needing to be set to length. Thank you! – Abenezer Bayeh Feb 04 '23 at 01:41