Add option to limit number of scrolled items to 1

[marcmo]

Is this a bug report or a feature request?

Feature Request

Have you read the guidelines regarding bug report?

Yes

Have you read the documentation in its entirety?

Yes

Description

would be great to enable a mode where users only fling one element at a time: no matter how quick the gesture is, only the next element should be centered. Maybe this is already possible but I haven't found it anywhere in the documentation or the examples.

[bd-arc]

Hi @marcmo,

Prop lockScrollWhileSnapping should help with that. Also, make sure to test in a production environment.

To provide a bit more context about why this is not an easy thing to accomplish, you need to know that despite being one of the most wanted feature, the React Native team have not implement yet a proper equivalent of the iOS snapToAlignment/snapToInterval combo on Android. Therefore, we are left with a bunch of hacks, workarounds and debug mode issues... I've done my best to tackle it, but some core things are either missing or buggy and I have no control at all over it.

Still, ideas and PR are always welcome ;-)

[marcmo]

thanks for the fast reply @bd-arc ...yes I know about the snapToInterval issue in Android...a pity! that's actually the reason I tried your library ;) I understand that this is not an issue that might not be easy to accomplish so I will close it for now. I did try your lockScrollWhileSnapping property but had no success (still able to scroll more than 1 item when flinging).

[CodeLuca]

Could we keep this open in case someone else has an alternative solution, I really need this for a project I'm working on :P

[bd-arc]

@CodeLuca Sure, but don't get your hopes too high for now ;-)

Unless the Facebook team implement a proper snapToInterval on Android and make the ScrollView component behave properly on this OS, we're kind of stuck...

FYI, I've been thinking about implementing a custom PanResponder on top of the FlatList to see if I can anyhow get the best of both worlds, but this is more work than I can handle at the moment...

[cuitianze]

@marcmo @CodeLuca Hi, do you have any solutions ?

[vladlenskiy]

@bd-arc Any new solutions or ideas? I have this problem on Android :(

[dohooo]

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2

[comvenger-brandon]

For everyone still looking for a solution.

Use those properties from ScrollView, worked wonders for me.

disableIntervalMomentum pagingEnabled