Detect scroll end in React Native ScrollView, snap to page

There are two different props you can set to React Native ScrollView which takes a callback to notify that scroll has ended. (They are now both documented.)


onScrollEndDrag function

Called as soon as the user lets go of the ScrollView (lifts the finger from the screen).

Working sample: https://rnplay.org/apps/Ufv6Cg (No longer available)


onMomentumScrollEnd function

Called when the ScrollView stops sliding (it will normally continue to slide a little bit after the user has lifted the finger from the screen).

Working sample: https://rnplay.org/apps/BPgG_g (No longer available)


Note: I could not find the methods in the API documentation for any React Native component, but they work as shown in the examples. I saw them used here in react-native-snap-carousel.


Another option would be to use the snapToOffsets property which does exactly what you want.

This can be used for paginating through variously sized children that have lengths smaller than the scroll view.