onSnapToItem & onBeforeSnapToItem do not fire reliably on left / right edges on Android

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

Bug report

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.)

• I have read the guidelines regarding bug report.
• I have reviewed the documentation in its entirety, including the dedicated documentations 📚.
• I have searched for existing issues and made sure that the problem hasn’t already been reported.
• I am using the latest plugin version.
• 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?

Android only, I believe

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

Yes.

Environment

Env:

• React: 16.6.0-alpha.8af6728

• react-native: 0.57.4

• react-native-snap-carousel: 3.7.5

Target platform:

• Android 7.1

Expected Behavior

Expected onSnapToItem to be fired reliably for every index.

Actual Behavior

onSnapToItem does not fire if scrolling all the way to the left or right edges.

gfycat video (look at the bottom for the Active index display)

Reproducible Demo

https://snack.expo.io/SJ6vPURhm

Steps to Reproduce

From the example, scroll to a middle slide on Android.

Scroll all the way to the left or right and release.

The state index is not updated.

[flaviaferreira]

Hi @jkdf2 I had the same problem. I set the enableMomentum property to true and it worked for me.

[yulolimum]

I ran into this issue as well. Spent a few minutes logging various things inside the package and here’s what i found (in case someone finds it useful). The reason this is not an issue on iOS (or when enableMomentum prop is enabled on Android ) is because there is over-scroll (scrollview/flatlist scrolls beyond the content). This triggers a re-render of the View and the first/last items snap.

When enableMomentum is disabled on Android (default), there’s no over-scroll. So when all the logic in the Carousel resolves and determines the next snap-to item, the View does not re-render because there is nothing to trigger the re-render. If there was over-scroll (like on iOS), scrolling just one pixel past the edges would re-render and snap the items. You can reproduce this yourself by manually setting the ScrollView offset to 1 when you reach 0. This triggers and update and items snap and callbacks are fired.

I added a very quick and hacky fix to my project by manually calling snapTo depending on the ScrollViews scroll offset.

I am also attaching a patch-file for the latest library version in case this helps someone.

In both the screenshot and the patch file, the “fix” is for vertical carousels only and may cause performance issues; however, it’s been working out so far.