React-native-snap-carousel: Android doesn't fire snap event for the last item when scrolled all the way

Created on 9 Apr 2020  路  12Comments  路  Source: meliorence/react-native-snap-carousel

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

This is a bug report, I have seen this but I am doubtful that it's the same thing.

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

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

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?

It's only on Android.

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

Yes, tried it with an assembled apk.

Environment

React: 16.8.6
React native: 0.60.5
react-native-snap-carousel: 3.9.0
Android: Seems to be all Android versions

Expected Behavior

When I swipe to the very last item I expect the snap events to fire even if I didn't stop my finger immediately when the swipe was in place and that I wouldn't have to nudge the carousel again to make it work.

Actual Behavior

reproduce

Reproducible Demo

Here is the demo

Steps to Reproduce


I think the steps are fairly simple

  1. Create a carousel smaller than the width of the screen with three views in it.
  2. Move to the middle view.
  3. Move to the third view starting to hold it from the very right of the screen and not the third view itself and swipe it to the very left.

Most helpful comment

I believe the same happens on Android when scrolling past the first item. The callback isn't fired then either.

All 12 comments

Having the same issue with RN 0.60.4

Having the same issue (RN 0.61.4). Any workaround available before a fix is deployed?

I couldn't find any workarounds so far, would actually appreciate it very much, if someone did.

@dbilgin Haven't found one yet, unfortunately.

I believe the same happens on Android when scrolling past the first item. The callback isn't fired then either.

My solution:

  1. Add empty data ([data, data, {}]]
  2. if (lastIndex === 2 ) { this.onEnd() }

Have the same issue with both first and last items
This worked for me:
enableMomentum={Platform.OS === 'android'}

@luka-iyarn that doesn't fix it for me unfortunately.

@bd-arc thank you for your work on the library! It is by far the best carousel library for RN out there.

Is this particular bug on Android something that you want to address in version 4, or is this something that can be fixed in the current 3.x approach?

Hey guys! Did any of you tried the 4.x beta version? (the latest one being 4.0.0-beta.5)

Since the carousel has been heavily updated, it might now work out-of-the box. Scroll events on Android have always been unreliable, but I'm hoping that the improved logic will fix your issue.

Let me know!

@bd-arc thank you for your response! I just tried it on my project again with 4.0.0-beta.5, somehow it got worse :( Now it doesn't snap to the second one even.

I ended up creating a custom logic on 'onScroll'

      onScroll={(event) => {
        const currentOffset = event.nativeEvent.contentOffset.x;
        if (onPress && answers && Array.isArray(answers)) {
          if (currentOffset === 0) {
            onPress(answers[0]);
          }
          if (currentOffset >= ITEM_WIDTH * (answers.length - 1) - 5) {
            onPress(answers[answers.length - 1]);
          }
        }
      }}
Was this page helpful?
0 / 5 - 0 ratings