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

[ethanyuwang]

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>

```

[alisonkohl]

@ethanyuwang did you get anywhere on this? i'm experiencing the same issue.

[ethanyuwang]

@alisonkohl No luck yet :(

[alisonkohl]

bummer. thanks - will let you know if we figure anything out :)

[ethanyuwang]

Thanks! I will update here if I can figure anything out!

[alisonkohl]

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

[amestsantim]

@alisonkohl I wasn't able to make any progress with the code from the PRs, can you let me know how you got it working?

[ghost]

I am having same problem of pagination not working on dynamic data please help!!

[alisonkohl]

@amestsantim we were able to just pull the fork mentioned in that comment and it was working on a fresh run of the app - can't promise that you're facing the same issue we were though :/

[ethanyuwang]

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

[ethanyuwang]

Actually no. It's working strangely. Sometimes it works, sometimes it doesn't. It even disappears when of the element from the array is deleted. I'm suspecting it is because I'm using react navigation at the same time. Using both libraries has already caused a problem besides this.

[socar-chef]

when components array is changed length 1 to many.
When Indicators are changed to visible.
It goes not work.

[socar-chef]

So I solved with not to use swiper but just one imageivew, when number of image is 1.

[ftao123]

The same problem, another solution?

[bailih]

I have similar issue, and I am using Android:

This is inside one of the pages in the swiper.

 {
              (this.props.cu.CostOrWatt) ?
                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-end', }}>
                  <Text >${this.props.cost}
                  </Text>
                </View>
                :
                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-end', }}>
                  <Text>{this.props.watt}
                  </Text>
                </View>

            }

When I toggle this.props.cu.CostOrWatt, it shows either one of the views. However, the pagnization stop working. Also the dots won't change as well as onIndexChanged() is not triggered. In the mean time, I still be able to swipe pages. This is weird, how come onIndexChanged() is not triggered by swiping pages.

I come up with a work-around solution:

toggleCW() {
    this.setState({
      visibleSwiper: false
    });

    this.props.toggleCU(this.props.cu.CostOrWatt)
    // postpone the rendering till the data is ready
    setTimeout(() => {
      this.setState({
        visibleSwiper: true,
        index: swiperindex,
      });
    }, 100);

  }

  render() {
    let swiper = null;
    // console.log(this.props.progress);

    if (this.state.visibleSwiper) {
      swiper =

        <Swiper
.........

when I call this function. it postpone the rendering till the data is ready

[joe-lz]

I did just like this and it works fine

[joe-lz]

@ethanyuwang

[ashokkumar88]

@jeodiong This solution is working perfect

[canon4ever]

@jeodiong Thank u，it works.

[anflo]

@jeodiong You saved my days! Thx

[aaronSig]

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>