onIndexChanged errors

Which OS

IOS

Version

Which versions are you using:

• react-native-swiper 1.15.13
• react-native v0.39

Expected behaviour

The onIndexChanged should return correct values

Actual behaviour

I'm currently moving from one swiper to another and by doing this, functionality is broken

 onIndexChanged={(index) => {
   console.log('index >>> ', index);
   this.setState({
      currentPage: index
   })
}}

'index >>> ', 1
'index >>> ', 2
'index >>> ', 0
'index >>> ', 3 // HERE JUMPS

jumps from 0 to 3, seems to try to continue from the value that was just before restarting the swiper

---

I have found other error scenarios

Examples:

in this case i have a fixed bottom view

let bottomView = <View style={{ flex: 0.08, backgroundColor: theme.colors.transparent }} />;

---

In this case the bottom view only appear when last active dot comes in.

bottomView = null

---

I get the impression that every time the NEXT button appears and updates the ui, the swiper breaks

Example code:

buildOnboardingSteps(currentSection) {
  let { lastPage, title, baseText, swiperImages } = this.applyViewRenderValidations(currentSection);
  let bottomView = null; // Second Gif
  // let bottomView = <View style={{ flex: 0.08, backgroundColor: theme.colors.transparent }} />; // First gif

  if (this.state.currentPage === lastPage) {
    bottomView = (
      <TouchableOpacity style={[styles.bottomView]} onPress={() => { this.passToNextSection() }}>
        <Text style={[styles.baseText, styles.nextText]}>{'NEXT'}</Text>
      </TouchableOpacity>
    )
  }
  return (
    <Animatable.Image style={styles.container} source={undefined} animation={'slideInRight'} duration={500}>
      <View style={[styles.topView, styles.topViewAddItem]}>
        <Text style={styles.baseTitle}>{title}</Text>
        <Text style={styles.baseText}>{baseText}</Text>
        <Swiper
          style={styles.wrapper}
          activeDotColor={theme.colors.swiperDotColor}
          showsPagination={true}
          scrollsToTop={true}
          loop={false}
          onIndexChanged={(index) => {
            console.log('index >>> ', index);
            this.setState({
              currentPage: index
            })
          }}
        >
          {swiperImages}
        </Swiper>
      </View>
      {bottomView}
    </Animatable.Image>
  )
}

Start with the supplied reproduction in issue #649, focusing on the Swiper component's onIndexChanged callback, loop={false}, and the conditional bottomView updates. Reproduce the jump while moving between swipers and updating the UI; done means onIndexChanged reports the actual page consistently without jumping after a swiper restart or NEXT-button update.