react-native-swiper: onIndexChanged not called, wrong screen rendered

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

If onIndexChanged is not working than try to use

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

Gentlemen, still experience the same issue on iOS(android is ok) React 0.48, swiper 1.5.12.

Tried all workarounds…

The last slide is shown instead of first one if loop is enabled. Disabling the loop solving the issue, but…

In onIndexChanged={(index) => this.setState({index})} only fires once after the first swipe. The state only changes once when it should be changing each swipe.

I solved this (implemented a workaround) by adding a ref to the Swiper and calling scrollBy to set the index back to its intended value.

<Swiper
  showsButtons={false}
  showsPagination={false}
  autoPlay={false}
  ref={(s: React.Element<Swiper>) => this.swiper = s}
>
// ...
</Swiper>

And in componentDidMount:

componentDidMount() {
  this.swiper.scrollBy(0);
}

I am experiencing the same issue.

• The first bread crumb is still active while the last slide is always rendered first.
• I’m unable to swipe to the last slide, only the next slide
• When I swipe to the next slide then I’m brought to the first slide, as if the slider reset.
• From there on everything works as expected.

WORKAROUND / ISSUE FIX FOUND:

NO SUCCESS - included a Height/Width property as indicated above. NO SUCCESS - used onMomentumScrollEnd and no change from onIndexChanged

SUCCESS - added a “key” prop with a unique uuidV4 GUID value and problem WENT AWAY!

Hope this helps

seems this part in updateIndex function gives us this problem:

const diff = offset[dir] - this.internals.offset[dir]

 const step = dir === 'x' ? state.width : state.height

 let loopJump = false

 // Do nothing if offset no change.

 if (!diff) return

since this.internals.offset is set to {} in init function not {x:0, y:0}, diff is always NaN and updateIndex always return early.

Seem’s like a dimension issue. Are you giving the height and width to Swiper Component ? Below is the code working for me.

          <Swiper
            key={`Some Unique Key`}
            loop={false}
            bounces={false}
            width={deviceWidth}
            height={availableHeightForSwiper}
            dotColor="grey"
            activeDotColor="orange"
            paginationStyle={customPaginationStyle}
            automaticallyAdjustContentInsets={true}
            index={this.state.selectedIndex}
            onIndexChanged={(index) => {
              this.setState({
                selectedIndex: index,
              });
            }}
          >
            {childrens}
          </Swiper>

I have the same issue, when debugging it seems like the internalState.offset is empty when calling updateIndex after a swipe.This causes that diff to be NaN and that causes the internal index not being updated, which subsequently causes onIndexChanged not being called.

I don’t really know what the internalState.offset should be, so can’t really fix the issue here, but I hope this can help the maintainers to fix the issue

Also experiencing this. I’m seeing onIndexChanged get called after I swipe around a bit.