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 to 0, once the user lifts the finger
  • snapToAlignment - Set the alignmnet to a particular element to center
  • snapToInterval - Set the interval to snap to based on your contentInset 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>