Update the state breaks the slides.

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.

[Jalson1982]

If set prop loadMinimal it works in my case.

[kyle-ssg]

As it stands the lib seems completely unusable due to this. Building from @hanford 's advice, the following seems to fix the issue on the latest version. https://github.com/kyle-ssg/react-native-swiper/commit/eeddedb4205d28c79853f8d39b2fa5750d254069#diff-1fdf421c05c1140f6d71444ea2b27638

Looks like some internal state values aren’t being included when rendering, maybe it could just use this.internals.offset. Added a PR for this.