Swipe gesture stuck - snap carousel loop

[sorarco]

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

question but possible bug.

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

Environment

React: 16.11.0
React native: 0.62.2
react-native-snap-carousel: ^3.9.1

Target Platform: Android (>6.0) iOS (>12)

Expected Behavior

Performing a swipe gestures slow and fast with the carousel component with the loop property enabled without stuck any itens.

Actual Behavior

Performing a swipe gestures slow and fast with the carousel component with the loop property enabled occurs stuck with the last "item 3".

Reproducible Demo

View the demo

import * as React from 'react';
import {
  Text, 
  View,
  SafeAreaView } from 'react-native';

import Carousel from 'react-native-snap-carousel';

export default class App extends React.Component {

    constructor(props){
        super(props);
        this.state = {
          activeIndex:0,
          carouselItems: [
          {
              title:"Item 1",
              text: "Text 1",
          },
          {
              title:"Item 2",
              text: "Text 2",
          },
          {
              title:"Item 3",
              text: "Text 3",
          }
        ]
      }
    }

    _renderItem({item,index}){
        return (
          <View style={{
              backgroundColor:'floralwhite',
              borderRadius: 5,
              height: 250,
              padding: 50,
              marginLeft: 25,
              marginRight: 25, }}>
            <Text style={{fontSize: 30}}>{item.title}</Text>
            <Text>{item.text}</Text>
          </View>

        )
    }

    render() {
        return (
          <SafeAreaView style={{flex: 1, backgroundColor:'rebeccapurple', paddingTop: 50, }}>
            <View style={{ flex: 1, flexDirection:'row', justifyContent: 'center', }}>
                <Carousel
                  layout={"default"}
                  ref={ref => this.carousel = ref}
                  data={this.state.carouselItems}
                  sliderWidth={300}
                  itemWidth={300}
                  [loop={true}]([url](url))
                  inactiveSlideOpacity={1}
                inactiveSlideScale={1}
                  renderItem={this._renderItem}
                  onSnapToItem = { index => this.setState({activeIndex:index}) } />
            </View>
          </SafeAreaView>
        );
    }
}

[ajacquierbret]

Hi @sorarco ! I can't clearly understand what's the problem here, but when it comes to swipe issues, most of these issues have been solved by react-native-snap-carousel v4-beta. I suggest you to try it out and to open an issue if something doesn't work after the lib upgrade !

[vaisakhpc]

Does anybody have a solution for this? I'm also getting it stuck in the third item.

[sorarco]

The behavior is occurring in version "3.9.1" and "v4-beta". I achieved a result only using the lockScrollWhileSnapping = {true}

[nhan-tran-cxa]

Same. lockScrollWhileSnapping = {true} does not fix it

[B4ckes]

has someone fixed that? I updated to the beta 6 version and it still not working. I tried the lockScrollWhileSnapping={true} too.

[ghost]

@bd-arc Have you any update on this, or may be any guess of what is causing this issue? Same here on beta 6.

[braianj]

I have the same problem, lockScrollWhileSnapping only works on some devices, any news?

[bd-arc]

@emilioheinz I have no clue at this point TBH.

Could someone share a screencast of the issue?

[ghost]

@bd-arc It seems to be something related to the loopClonesPerSide, I took a look at the code and the default value is 3. May be in some cases it can't load again the next items in the carousel. But that is just a guess.

[B4ckes]

@bd-arc here's a video of the bug, as requested:

carousel_bug.mp4

as you can see, we can't go through the third image on the second loop.

[braianj]

Also on the first post is a demo link with a gif https://drive.google.com/file/d/14N5r4931fEsKLwXSzOl5uQ4EM_VXJ1Ff/view

[bd-arc]

Thanks guys! I had totally overlooked @sorarco's video in the issue description...

It clearly has to do with loop handling, which is pretty far from perfect. I'd love to implement a better version but don't have much clue on where to go from there.

Anyway, what surprises me is that things are not handled the exact same way in version 3.x and version 4.x, yet you seem to experience the same issue with both versions!

Here is the bit of code that's responsible for repositioning the scroll and give the impression that we're looping.

Maybe one of you will understand what's wrong with it under some specific circumstances?

[braianj]

Anyone found a solution for this?

[ghost]

As a temporary fix, we disabled loop.

[puzpuz]

react-native-snap-carousel": "^4.0.0-beta.5

For me I don't turn the loop on, but it got stuck on the third item. The cause for me is because I set removeClippedSubviews={true} After I remove it (default to false) it's normal

[TuJobs]

In version 4.0.0-beta.6, I have a loop stuck problem on ios, I tried to find the cause in the library and I see now when the stuck list scrollOffSet is not updated causing the problem Trying, checking between nextActiveItem and activeItem is negligible. I skipped the check (nextActiveItem! == this._activeItem) in _onMomentumScrollEnd and everything worked fine. I'm a novice so I can't find out the cause of the bug deeply, someone can and fix it. (react-native 0.63.3)

[Dequas]

@bd-arc I'm using version 4.0.0-beta.6 and i'm also stuck when I snap to fast on last item (to fast or just swipe a multiple time before looping). I cannot use lockScrollWhileSnapping because it has been removed since version 4 and I really need loop in my project. This problem only appears on IOS (because on Android you cannot swipe on last item ?). https://user-images.githubusercontent.com/24406360/104168033-a7ae9580-53fd-11eb-9ef1-d605fa93f3a1.mp4

[ighosh98]

Did anyone figure out a fix for this issue? I really need this feature for my project. I am facing the problem in both iOS and Android devices.

[ZainaliSyed]

Still same issue , swipe gesture had a problem in android , very difficult to swipe left or right in android only

[joseaki]

as @emilioheinz suggested if you set this prop loopClonesPerSide={data.length} with the data length the problem disappear ¯_(ツ)_/¯

[brambang]

we have same issue for our 1 device test, all suggestion not works for us

[jahanzaibbaloch99]

@joseaki loopClonesPerSide={data.length} making it stuck on last slide i cant go to the first item if i slide into last item

[dohooo]

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2