onIndexChanged not called, wrong screen rendered

Version

Which versions are you using:

• react-native-swiper v1.5.8
• react-native v0.47.1

Expected behavior

1. onIndexChanged should be called when I swipe
2. first View should be rendered as the first screen

Actual behavior

1. not called
2. third View (with “And simple” message) is rendered as first

Code example

export default class AppIntro extends PureComponent {

  onSwipe = (index) => {
    console.log('index changed', index);
  }

  render() {
    return (
      <Swiper style={styles.wrapper} onIndexChanged={this.onSwipe}>
        <View style={styles.slide1}>
          <Text style={styles.text}>Hello Swiper</Text>
        </View>
        <View style={styles.slide2}>
          <Text style={styles.text}>Beautiful</Text>
        </View>
        <View style={styles.slide3}>
          <Text style={styles.text}>And simple</Text>
        </View>
      </Swiper>
    );
  }
}

[lancesnider]

I know this is a really old thread, but I was having the same issue and none of the above solutions seemed to work… because it was just me being dumb. 🤦

tldr; you don’t appear to be able to change the number of slides on the fly my and on first render, I had zero.

My problem:

• My slides were being created based on data from an API call.
• The Slider existed before the API got its response

Basically I was creating a Swiper with zero slides, then a second later updating it with multiple slides. All I had to do was wait until I had the data to render the Swiper:

slides.length > 0 && (
          <Swiper

[milindagrawal]

If onIndexChanged is not working than try to use

            onMomentumScrollEnd={(event, state) => {
              this.setState({
                selectedIndex: state.index,
              });
            }}