Multiple small items not scrolling with momentum on iOS [Needs Fixing on latest version 3.8.4]

[summerkiflain]

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

Yes, A Bug report.

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

• 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.
  There is this one ticket that could be closely related: Choppy behaviour on iOS when slide's width is small #51, but in the lower posts op has described it different then my scenario, he is trying to use it with some map component. P.S it is closed due to no further feedback.
• 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?

Not sure.

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

Only happening on iOS, working fine on Android, tested on simulator and physical devices.

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

Yes happening in production env also.

Environment

I have been using expo environment to develop, its on the latest expo version sdk 35, and i have tested with the latest snap carousel version. react and react native versions are latest that are supported by the expo sdk.

Environment:
React: 16.8.3
React native: https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz
react-native-snap-carousel: 3.8.3

Target Platform:
iOS (12.4.2)

Expected Behavior

Scrolling multiple item should be smooth like the android system.

Actual Behavior

Scrolling multiple small items horizontally with momentum is only scrolling 1 item, sometimes it looks like that its going to scroll multiple items but then it either doesn't snap to the center of the carousel or just returns back to the last item which was next to the previously centered item.

Reproducible Demo

https://snack.expo.io/@summersyed/snap-carousel-momentum-scroll-bug

Steps to Reproduce

1. just try to scroll carousel in the above link to either left or right side, using swing gesture. which should scroll multiple item with one swipe.
2. see that it only scrolls 1 item at a time.
3. try this couple of times to check it carefully.

although bug is apparent on the iOS simulator provided with expo, you can check it out more clearly on an actual iOS physical device, I have tested it on iPhone 6 and iPhone X, both are not able to scroll multiple items on dev and prod version of the app.

[bd-arc]

Hi @summerkiflain,

You should take a look at #189, as well as this note from the doc.

Note that a prop enableMomentum is exposed.

[summerkiflain]

@bd-arc I have read the #189, there is no solution to the problem which I mentioned and shown in the expo example, note from the doc doesn't mention plugin not working correctly on iOS, its mostly about android and flatlist's underlying problems. I am already using enableMomentum prop, and I have seen see Momentum section in the docs too, which gives hints on using threshold throttle and other options, but none of them are fixing the issue in expo example, please take a look into expo link I provided above and let me know if there is any work around to fix the problem until react native fix their own bugs in the meantime. I have put a lot of time in posting this issue. please help me.

[bd-arc]

@summerkiflain Well, I don't understand what's going on with your own example.

Here's a quick one I made: https://snack.expo.io/BJKN_2coB As you can see, everything is working as intended.

Two other things to note:

1. You should never do loopClonesPerSide={data.length}. This means you're basically multiplying the number of rendered slides by 3!
2. Your key prop in _renderCover() wasn't on the top level component, and therefore useless.

[summerkiflain]

@bd-arc Thanks for the helpful expo snack, I can confirm that snap-carousel is working fine for above issue pre v3.8.0, I have reverted my dependency to v3.7.5 and its working fine, but there is a bug where snapToItem in not working correctly on android devices when used with enableMomentum true. which is fixed on v3.8.3, I need that too P.S i would like to stay on the latest version, anyway you can check what went wrong on v3.8.0 that caused such behavior on iOS devices? thanks again.

[JoaoPedroRodrigues]

This is an awesome package, really is! But it seems like momentum isn't even working on iPhone, just put the first example on the example folder to work, added enableMomentum={true} and nothing changes.

[summerkiflain]

@JoaoPedroRodrigues for now just revert your react-native-snap-carousel dependency to version
3.7.5 for momentum to work on iOS, its not working fine for me on latest release 3.8.4 also.

[JoaoPedroRodrigues]

I tried reverting, even in version 3.7.5 it doesn't seem to work.

[summerkiflain]

@JoaoPedroRodrigues checkout the https://snack.expo.io/BJKN_2coB (posted by bd-arc) expo snack in iOS device, its working totally fine and for me its also working with v3.7.5, may be there is something else wrong with your configuration, you can try to create your own expo snack and post a new issue if its still not working for you.

[JoaoPedroRodrigues]

@summerkiflain I tried that snack out, my case is not with small sized items tho, not sure if that's what is making it behave differently. I haven't created an expo snack yet because I'm basically running the first example on the example folder. Thank you for your help tho!

[summerkiflain]

@bd-arc Any update on this, this is not resolved on the latest version 3.8.4, I have been using 3.7.5 for quite sometime now, please reopen this ticket. Thanks.

[summerkiflain]

@bd-arc I have narrowed down the issue to this commit: 406c8f0
fix(Carousel): make sure that autoplay is properly restarted after a touchStart event

[bd-arc]

Thanks @summerkiflain, that's useful!

I assume the culprit is this. Two different features seem to contradict themselves here: autoplay & momentum.

I won't be able to look into it further for the time being, but if you want to investigate that'll be appreciated ;-)

[summerkiflain]

Hi @bd-arc, I really don't use autoplay feature at-all, I'll think about fixing the code for users who don't use autoplay and create a new PR. will see what can be done for users using autoplay feature later.

[rogerkerse]

Hi @bd-arc, I really don't use autoplay feature at-all, I'll think about fixing the code for users who don't use autoplay and create a new PR. will see what can be done for users using autoplay feature later.

Have you managed to get it working? I ran into same issue, that with 3.8.4 enableMomentum is not working and I cannot go onto older version since then having some other initial item doesn't work properly 😕

[summerkiflain]

Have you managed to get it working? I ran into same issue, that with 3.8.4 enableMomentum is not working and I cannot go onto older version since then having some other initial item doesn't work properly 😕

Couldn't get around to fix it for PR, I just change the line 1324 to onTouchEnd: this._onTouchEnd in Carousel.js to fix momentum issue, I don't use autoscroll so I don't care if its not working.