Starts with last page, not First Page when set loop to true

[devStar9211]

Which OS ?

iOS

Version

Which versions are you using:

• react-native-swiper v1.5.13
• react-native v0.49.3

Expected behaviour

Starts with First Page.

Actual behaviour

When I set loop to true, it starts with first page, but after updating content of first page, it shows last page. When I set loop to false, no problem. I already looked at same issue when setting loop to true, but mine is not working either.

The first page has got RefreshControl with ScrollView. When RefreshControl is called, the Swiper gets back to last page.

[windydang26]

me too,

[devStar9211]

I solved this problem by removing componentWillReceiveProps function. But I am not sure why this happens, anybody has got idea about this?

[VolkRiot]

I ran into this issue while writing my own Custom pagination thingy. It has to do with a bug if the loop prop is set to true.

it renders the last screen briefly before switching over to the first. Really crappy. Here is a fix specific to how my custom component is configured. Maybe it will help others.

  renderPagination = (index, total, context) => {
    return (
      <CustomPagination
        index={index}
        total={total}
        context={context}
        handleSkip={this.handleSkip}
        handleNext={() =>
          // Stupid fix because the native loop implement is shitty/buggy
          index === total - 1
            ? context.scrollBy(-1 * (total - 1))
            : context.scrollBy(1)
        }
      />
    );
  };

Here is how I am using the component

  render() {
    return (
      <Swiper
        style={styles.wrapper}
        showsButtons={false}
        showsPagination={true}
        renderPagination={this.renderPagination}
        loop={false}>
        <SlideOne />
        <SlideTwo />
        <SlideThree />
      </Swiper>
    );
  }

As you can see I had to set the loop={false} to prevent that rendering issue but then used custom access to the context of the component to still get the loop effect. Hope this library is updated soon... Otherwise, I will rebuild without it in the future.

[adouceur]

Same issue here.

[Elenionl]

Same issue. Need some help.

[ai4code]

me too！

[devStar9211]

You should find this in .../node_modules/react-native-swiper/src/index.js

componentWillReceiveProps (nextProps) {
    if (!nextProps.autoplay && this.autoplayTimer) clearTimeout(this.autoplayTimer)
    this.setState(this.initState(nextProps, this.props.index !== nextProps.index))
}

plz remove this and try again, it will be run correctly.

[AbhishekCode]

this line is causing this behaviour this.setState(this.initState(nextProps, this.props.index !== nextProps.index))

Not sure what is purpose of calling initState in componentWillReceiveProps

[guziyu001]

this bug is still there,does anyone know why?

[shenwangjie]

You should find this in .../node_modules/react-native-swiper/src/index.js

componentWillReceiveProps (nextProps) {
    if (!nextProps.autoplay && this.autoplayTimer) clearTimeout(this.autoplayTimer)
    this.setState(this.initState(nextProps, this.props.index !== nextProps.index))
}

plz remove this and try again, it will be run correctly.

it is not use

[Yvette14]

Same issue here

[Djordjes995]

Considering this library has almost 9k stars, it boggles my mind that such a basic loop={true} feature isn't implemented correctly. Shame for such a library.

[princefishthrower]

@Djordjes995 - tried this one coming from react-native-snap-carousel - which also doesn't work very well. Seems there is no industry standard open source library for such a basic component. I'm about to do it with just custom javascript and native React Native components at this point.

[Rexfortiz]

Hi! i've met the same issue. i fixed it by changing slidesPerView from auto to a number. slidesPerView={'auto'} to slidesPerView={1.46}