React-native-snap-carousel: 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?

[Zyphxion]

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.