How to prevent scrolling multiple elements in React-Native ScrollView? - react-native

Question

I'm attempting to create a horizontal ScrollView that snaps to an interval. I only want it to scroll one item/element at a time, no matter how much force is applied to their swipe gesture.
I've tried using the available props on ScrollView, and it does what I want nearly perfectly, other than the fact that when more force or longer swipe is applied, multiple elements get scrolled through.
I made a snack on expo here: https://snack.expo.io/BkKzYHpbE
import React, { Component } from 'react';
import { View, StyleSheet, ScrollView, Dimensions } from 'react-native';
const { width } = Dimensions.get('window');
export default class App extends Component {
render() {
return (
<ScrollView
style={styles.container}
horizontal= {true}
decelerationRate={0}
snapToInterval={width - 60}
snapToAlignment={"center"}
contentInset={{
top: 0,
left: 30,
bottom: 0,
right: 30,
}}>
<View style={styles.view} />
<View style={styles.view2} />
<View style={styles.view} />
<View style={styles.view2} />
<View style={styles.view} />
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {},
view: {
marginTop: 100,
backgroundColor: 'blue',
width: width - 80,
margin: 10,
height: 200,
borderRadius: 10,
},
view2: {
marginTop: 100,
backgroundColor: 'red',
width: width - 80,
margin: 10,
height: 200,
borderRadius: 10,
},
});
You can see a gentle, short swipe will scroll one element as expected. But a longer, more forceful swipe causes elements to be skipped, which is not what I'd expect.

Answer 1

Use 'pagingEnabled' prop of scrollView. That will solve your problem.
Also remove snapToAlignment and snapToInterval props