Swiper freezes on second slide.

[dpogoda]

Is this a bug report, a feature request, or a question?

Bug report

Have you followed the required steps before opening a bug report?

• [x] I have read the guidelines regarding bug report.
• [x] I have reviewed the documentation in its entirety, including the dedicated documentations :books:.
• [x] I have searched for existing issues and made sure that the problem hasn't already been reported.
• [x] I am using the latest plugin version.
• [x] I am following the issue template closely in order to produce a useful bug report.

Have you made sure that it wasn't a React Native bug?

Yes

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

Both iOS and Android

Is the bug reproductible in a production environment (not a debug one)?

Yes.

Environment

software	version
react	16.5.0
react-native	0.56.1
react-native-snap-carousel	3.7.3
Target	Android (6.0)
Target	iOS (9.0)

Expected Behavior

The swiper should be swipeable. If downgrading and fixing to react-native-snap-carousel 3.7.2 it works as expected.

Actual Behavior

After updating the yarn.lock file, the swiper broke in our app. We could swipe to the second slide, but then it froze. We could neither slide forward nor backward. Interactions (e.g. links) on the current slide still work.

Reproducible Demo

Unfortunately I couldn't reproduce this bug in a minimal app. Everything worked fine. I'll continue to work on a reproduction and update this issue.

Does anybody else have similar problems or a setup where the carousel breaks with the latest react-native-snap-carousel version? I'd appreciate if someone could confirm the issue or help me resolve it.

[bd-arc]

Hi @dpogoda,

The bug might be linked to PR #390. Does it work properly if you remove the added line?

[dpogoda]

@bd-arc Thanks for the fast reply. Yes in fact deleting that line fixes the issue :)

[bd-arc]

Well, I should have tested the PR myself... Ok, I'll try and fix it as soon as I can.

Thanks for the feedback ;-)

[dpogoda]

@bd-arc Thank you for this amazing react native component :-)

[bd-arc]

@dpogoda Should be fixed in version 3.7.4 ;-)

[benobab]

Hi! The issue is still present in the 3.7.4 unfortunately :/

[bd-arc]

@benobab Damn! Could you share the configuration of your carousel?

[benobab]

Thanks for the reply!

Tell me if the code below is enough

                          <Carousel layout={'stack'} 
                                    data={ENTRIES}
                                    renderItem={this._renderItem}
                                    sliderWidth={sliderWidth}
                                    itemWidth={itemWidth}
                                    hasParallaxImages={false}
                                    firstItem={this.state.sliderActiveSlide}
                                    inactiveSlideScale={0.95}
                                    inactiveSlideOpacity={0.7}
                                    containerCustomStyle={styles.slider}
                                    contentContainerCustomStyle={styles.sliderContentContainer}
                                    loop={true}
                                    autoplay={false}
                                    // autoplayDelay={500}
                                    // autoplayInterval={3000}
                                    onSnapToItem={(index) => this.setState({ sliderActiveSlide: index }) }
                                />

[benobab]

The problem doesn't appear in the default mode.

[bd-arc]

@benobab This is interesting. Have you been able to isolate the prop responsible for the bug appearance then?

[ZyphiraZircon]

I am also encountering a similar issue, however it's only appearing on Android. The slider is unable to be moved when swiping. Autoplay seems to work, and the elements are clickable, just swiping seems to be busted.

My configuration:

<Carousel
    ref={(c) => { this._carousel = c; }}
    data={this.props.items}
    renderItem={this.singleItem}
    sliderWidth={Dimensions.get('window').width}
    itemWidth={Dimensions.get('window').width * 0.4}
    inactiveSlideScale={0.7}
    loop={true}
    enableSnap={true}
/>

[bd-arc]

@benobab @Zyphxion Can you tell me if this works properly when you use version 3.7.2?

[harrisonlo]

Not to complicate things further, but I encounter a similar issue which only happens on iOS, the third swipe would freeze...

Let me try to play around and update you guys here

[bd-arc]

@harrison0723 Same question: does it work properly if you use version 3.7.2?

[harrisonlo]

@bd-arc Nope, same issue with 3.7.2 for me

[bd-arc]

@harrison0723 Damn! If you could put up a Snack example that reproduces the issue, it would be great ;-)

[bd-arc]

This has been fixed in version 3.7.5 thanks to @ifsnow. Kudos to him!

[harrisonlo]

For anyone who still seems to have a similar issue, removeClippedSubviews={false} might solve your problem.

[harisbaig100]

loopClonesPerSide={data.length} this prop is by default '3', setting it to length of the data will solve the stuck issue.

[brambang]

in terms of performance which is better? removeClippedSubviews={false} or loopClonesPerSide={data.length}

removeClippedSubviews set to false would impact performance in flatlist loopClonesPerSide to data.length would make 3 times images load

UPDATE: both of that not works

[mustafaaii]

I was getting this issue in React JS and React Native. However, I found a strange solution to this. If you put Swiper in a component and activate it at the first startup, the problem is solved, the example is below.

const Carousel = ({ data }: any) => {

        return (
            <>
                <Swiper autoplay={true} loop={true} showsButtons={false} showsPagination={false} style={{ height: 330 }} removeClippedSubviews={false}>
                    {
                        (Media(data.filter((f: any) => { return (f.type === type && f.page === page && f.position === position) })) || []).map((d: any, x: number) => {
                            return (
                                <View key={`banner-${d.id}-list-${x}`}>
                                    <TouchableOpacity onPress={() => { Linking.openURL(d.url); }}>
                                        <Image source={{ uri: `https://ik.imagekit.io/tey21emoa/banner/${d.blob}` }} style={{ resizeMode: "stretch", height: 330, width: "100%", borderRadius: 8, borderWidth: 1, borderColor: "#dee2e6" }} />
                                    </TouchableOpacity>
                                </View>
                            )
                        })
                    }
                </Swiper>
            </>
        )
    }