react-native-swiper: Pagnization does not work with dynamic components

Which OS ?

iOS

Version

Which versions are you using:

react-native-swiper v1.5.6
react-native v0.49

Expected behavior

Pagnization dots indicate current swipe-item’s index

Actual behavior

only the first dot is highlighted

I have tried to use a few hard-coded mock CardResume and the paganization works fine with correct indication, but once I switch to using map the paganization indicators stopped working

  ```
   <Swiper
      style={{}}
      height={height*0.7}>

      {this.state.resumeList.map((resumePreview, index) => {
        this.fakedata.resumeName = resumePreview.headline
        return (
          <CardResume 
            key={index}
            style={{margin: "5%"}}
            data={this.fakedata}
            onPress={() => this.props.navigation.navigate('Details', { resumeID: resumePreview.profile_id })}
          />
        )
      })}
    </Swiper>

About this issue

Original URL
State: open
Created 7 years ago
Reactions: 3
Comments: 20

Most upvoted comments

I did just like this and it works fine

joe-lz on Jan 31, 2018

It looks like the problem is the swiper component isn’t resetting when the slides change.

Setting the key on the swiper to change (e.g. key={images.length}) when the underlying array changes also fixes this:

 <Swiper key={images.length}>
          {images.map(image => (
                 <Image source={image} />
          ))}
</Swiper>

aaronSig on Sep 8, 2019

@alisonkohl That fork fixed my issue! Thanks a lot!

ethanyuwang on Nov 14, 2017

@ethanyuwang we made some progress using the fork mentioned here https://github.com/leecade/react-native-swiper/issues/635#issuecomment-340717950

alisonkohl on Nov 11, 2017