Detect scroll end in React Native ScrollView, snap to page

Question

React Native ScrollView has a prop pagingEnabled . However, it assumes that the width of each page (or child component) in the ScrollView is equal to the width of the ScrollView.

How can we mend this to make it work correctly for pages that are smaller than the ScrollView?

Is it possible to detect when the user stops scrolling? Then we can easily write our own code to snap to the right page.

Edit: There are a few other ways to mend this by using props that are only available on iOS, so this is particularly a problem on Android.

Answer 1

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.

Answer 2

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.