Loop feature not working properly when we reach end and scroll to first it scroll back completely not to next

[Devid2727]

When i enable loop feature in react-native-snap-carousel , the behaviour of loop feature is very weird. when i reach to last item and continue scrolling for first item, it not scrolling to for next item, it scroll back and come to first item, even i have used different method to scroll the item by like 'snapToPrev' ,
'snapToItem' and 'snapToNext' but i am not able to solve this issue. is there any special property i have to use for scroll item smoothly with loop feature? Below i have added my code snippet.

<Carousel
         data={props.list}
          renderItem={({ item, index }) => renderItem(item, index)}
          windowSize={1}
          itemWidth={120}
          sliderWidth={aspectRatio > 1.6 ? width : 400}
          showsPageIndicator={false}
          inactiveSlideScale={0.6}
          contentContainerCustomStyle={{
            height: 160, flex: 0, marginTop: 10,
        }}
          onSnapToItem={scrollChangeForStudentList}
          enableMomentum
          enableSnap
          loop={true}
          lockScrollWhileSnapping
          loopClonesPerSide={1}
          useScrollView
          firstItem={1}
          bounces={false}
        />

I am using following version to develop application

"react-native-snap-carousel": "^3.7.0",
"react-native": "0.55.3",
"react": "16.3.1",

Let me know if you need any other information.

[bd-arc]

Hi @Devid2727,

I know that the loop feature can sometimes get messy, particularly in debug mode and/or on Android. This has to do with a few ScrollView limitations.

Is setting loopClonesPerSide to at least 3 fixes this somehow?

Also, it would really help if you could put together a simple Snack example that reproduces the issue.

[Devid2727]

I have tried with loopClonesPerSide={3} and removed useScrollView but still i am facing same issue.

[Devid2727]

Are you guys planning to support proper loop feature in future ?

[bd-arc]

Could you provide a Snack example that reproduces the issue?

We've used the "loop" feature in many apps currently in production and, so far, we have not experienced the problem you describe.

Note that this feature is really complex and is impaired by some pesky FlatList issues. Have you taken a look at #203?

[bd-arc]

Closing as no further feedback was provided.

[niantuo]

i changed the code
Carousel.js Line 1081
snapToNext(animated = true, fireCallback = true) {
// const itemsLength = this._getCustomDataLength();
const itemsLength = this.props.data.length;
let newIndex = this._activeItem + 1;
if (newIndex > itemsLength - 1) {
if (!this._enableLoop()) {
return;
}
newIndex = 0;
}
console.log('snapToNext=>newIndex 2: ', newIndex);

    this._snapToItem(newIndex, animated, fireCallback);
}

then ,can realize infinite loop