Update the state breaks the slides.
Author: ochikovCreated Sep 5, 2019Updated Sep 16, 2024
Labels🐛bug
Which OS ?
MAC OS
Version
Which versions are you using: ^1.6.0-nightly.3
- react-native-swiper v?
- react-native v0.59.5
Hello Guys, I am using Swiper like this:
renderThumb() {
return (
<Swiper style={styles.wrapper} showsButtons={false} horizontal={false} showsPagination={false} loop={false} onIndexChanged={this.onSlideIndexUpdate} onMomentumScrollEnd={() => { console.log('on touch end') }}>
{this.state.cachedThumbnails.map((thumb) => {
console.log('HERE THUMB', thumb)
return (
<View key={thumb.key} style={styles.thumbnailContainer}>
<Loader loading={this.state.showThumbnail} withBackground={false} showLoadingText={false} />
<Image
source={{ uri: thumb.thumbLink }}
style={styles.backgroundVideo}
resizeMode='cover'
/>
</View>
);
})}
</Swiper>
);
};Every time when the state is changed, the component is re-rendered, but the slide is pushed up and the next slide is seeing from the bottom, as showed here in the image:
Please note, this happens only on the images with index>0. If I swipe to the first slide, the slide is ok.


Source: leecade/react-native-swiper