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>
  )
}

[wkoutre]

Using state, onIndexChange/setState, and index prop, AND giving the Swiper an explicit width prop that’s not falsy fixed this for me, as well.

handleSwipeIndexChange = index => {
    this.setState({ index });
  };

<Swiper
    autoplay={false}
    loop={false}
    removeClippedSubviews={false}
    dotColor={Colors.lightGray}
    activeDotColor={Colors.darkGray}
    onIndexChanged={this.handleSwipeIndexChange}
    height={250}
    width={WIDTH}
    index={this.state.index}
>
    {swipeableStuff}
</Swiper>

[jose920405]

hi @chixpc123 .

I found a solution, but in a very unorthodox way.

Clearly, as is the code of my example, it should be enough for it to work, but I had to resort to 3 things:

1. Use the basic prop index, so every time I was updating the index with the onIndexChange that value put it as the index prop of the swiper.

2. Give it a width. As a direct prop in the swiper instead a width inside style. You can see it in Custom basic style & content.

3. In my code the view container of the swiper had a paddingLeft I had to remove it and give the margins to the left to each child in the swiper