React Native ScrollView - How to scroll items one by one?
Use disableIntervalMomentum={ true }
in your ScrollView
. This will only allow the user to scroll one page at a time horizontally.
https://reactnative.dev/docs/scrollview#disableintervalmomentum
<ScrollView
horizontal
disableIntervalMomentum={ true }
snapToInterval={ width }
>
<Child 1 />
<Child 2 />
</ScrollView>
Assuming that you want to snap
to an item horizontally or vertically, its position needs to be fixed relative to the screen (where it should snap)
Since the props are available for IOS only therefore
You can use
decelerationRate
- Set the de accelaration rate to0
, once the user lifts the fingersnapToAlignment
- Set the alignmnet to a particular element to centersnapToInterval
- Set the interval to snap to based on yourcontentInset
props.<ScrollView horizontal decelerationRate={0} snapToInterval={width - (YOUR_INSET_LEFT + YOUR_INSET_RIGHT)} snapToAlignment={"center"} contentInset={{top: 0, left: YOUR_INSET_LEFT, bottom: 0, right: YOUR_INSET_RIGHT, }}> <Comp/> <Comp/> <Comp/> <Comp/> </ScrollView>