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.

Screen Shot 2019-09-05 at 16 39 46

Screen Shot 2019-09-05 at 16 39 55

Source: leecade/react-native-swiper