Open devStar9211 opened 6 years ago
me too,
I solved this problem by removing componentWillReceiveProps function. But I am not sure why this happens, anybody has got idea about this?
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.
Same issue here.
Same issue. Need some help.
me too!
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.
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
this bug is still there,does anyone know why?
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
Same issue here
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.
@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.
Hi! i've met the same issue. i fixed it by changing slidesPerView from auto to a number.
slidesPerView={'auto'}
to slidesPerView={1.46}
Which OS ?
iOS
Version
Which versions are you using:
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.