React Native ScrollView - How to scroll items one by one?

Question

How do you disable inertia scrolling using React Native ScrollView, so that whatever force you apply, it will be next element that the list is going to be scrolled to (and snapped to)? I have reviewed the list of props and any of them does directly what I would like to achieve.

Answer 1

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>

Answer 2

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>