React-native-snap-carousel: Loop doesn't work on some android devices

[kathychauhk01]

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

Bug

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

(Check the step you've followed - replace the space character between the square brackets ([]) by an x.)

• [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?

Unsure.

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

Android only.

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

Yes. On both environment.

Environment

Environment:
React: 16.2.0
React native: 0.53.3
react-native-snap-carousel: 3.3.4

Target Platform:
Android (8.0)
iOS (11.4)

Expected Behavior

Like the result on iOS. When set loop={true}, the carousel can have infinite loop effect:

Actual Behavior

On android, the carousel can't loop infinitely but just repeat few loop and stop:

(Write what happened. Add screencasts/screenshots!)

Reproducible Demo

https://snack.expo.io/H11RLUlnm

(Paste the link to a Snack example in which the issue can be reproduced. Please follow the guidelines for providing a Minimal, Complete, and Verifiable example.)

Steps to Reproduce

Just try to keep scroll on android platform.

[syq7970]

same issue here.

[syq7970]

I found a workaround.
set loopClonesPerSide > 3

[poison8]

我找到了解决方法。
设置loopClonesPerSide> 3
where is setting loopClonesPerSide?

[HanAsteroid]

set loopClonesPerSide > 3

it does not work

[zabojad]

I'm having the same issue.

My environment:

"react": "16.5.0",
"react-native": "0.57.1",
"react-native-snap-carousel": "^3.7.5",

Any news on this issue ?

[zabojad]

In my case, I'm having a simple carousel displaying 3 items at a time and with data list of 8 items, each item being just a simple image.

I've tested to increase the loopClonesPerSlide to 5. It did not solve the problem but it made me realize that the items got cloned only when trying to swipe to the "first missing clone".

So the issue is rather the lack of parameter to define when we want the cloning to happen. In my case, with 3 items displayed at a time, I would like cloning to happen as soon as I'm getting as close as 2 items from the first or last item of the list.

Would that be possible to add that behavior?

It could look like a RemainingItemCountBeforeCloning parameter that would take values such as 0 (current behavior), 1 (clone when reaching the last/first item of the list), 2 (clone when reaching the one-before-last/second item of the list), etc...

What do you think?

[zabojad]

Hi there! Any news on that?

[zabojad]

Hey @bd-arc! Are you the maintainer of this lib? What do you think about my suggestion above?

[SergeyYuhimovich]

Hi! Just faced the same issue yesterday. Loop didn't work on Android simulator as well as on Google Pixel 2, while works great on iPhone. I've also noticed that if I swipe left quickly with short gestures, sometimes slides get cloned as they should (I guess). But I failed to reproduce this behavior on swiping right. Hope this info will be helpful to find what caused this issue.

[bd-arc]

@zabojad While this idea is sound, it would prove incredibly difficult to code and might not even solve the issue.

@zabojad @SergeyYuhimovich The root issue is that randomly in the FlatList and ScrollView components the events are not called in the right order (e.g. scrollEnd before the scroll events have finished running), which messes with the internal logic. This occurs on Android only as far as I can tell.

I've been willing to ditch the ScrollView/FlatList combo in favor of another scroll component for months since it is just plain buggy and because the React Native team isn't fixing critical bugs like this one. But I have yet to find one that isn't based on the ScrollView component and that does the job properly...

[bd-arc]

PR #443 was submitted to me a few days ago. Does it solve this issue for you?

[SergeyYuhimovich]

@bd-arc this PR didn't solve this issue in my case. Trying to trace what caused it. As far as I see now, on Android _getActiveItem for some reason returning indexes of clones, not the original slides, when the lap is over.

[summerkiflain]

Facing same issue on any array of 10, changed data array length to odd number in my case 15, and it started working fine.

[sarishti]

Any update on above issue? Facing same on s8 with 5 element in array.

[bryceliu]

Try callbackOffsetMargin={0}. The internal method _snapToItem probably does not work if last _snapToItem animation is not finished.

[fruedaCode]

Same issue with callbackOffsetMargin={0}.
If the number of items is odd number it works.

Any update on this?

[rafaelvinicius]

Same problem.
No one got a solution to this problem?

[fuchien]

Same problem...
Have someone got a solution?

[Egizas]

Same here, It only renders new items, if I go on to 2nd clone out of 3 clones :/

[InvictusNightmares]

I use the version 3.8.4 and face the same issue. @bd-arc

[qiaoyixuan]

Same problem

[jahicDario]

Loop is not working in Android in for examples 3 and 4, as well. It gets stuck if you scroll only in one direction.

[semiherdogan]

same here, any solution on this?

[Juan-Castelli]

Same issue, changing clones does not solve the problem.