ScrollView with pagination

scroll-view-with-pagination.js

import React, { Component } from 'react';
import { View, StyleSheet, ScrollView, Dimensions } from 'react-native';

const { width } = Dimensions.get('window');

export default class App extends Component {
  
  componentDidMount() {
		setTimeout(() => {this.scrollView.scrollTo({x: -30}) }, 100) // scroll view initial position fix
	}
	
  render() {
    return (
      <Animated.ScrollView 
        ref={(scrollView) => { this.scrollView = scrollView; }}
        style={styles.container}
        pagingEnabled={Platform.OS === 'android'}
        horizontal= {true}
        decelerationRate={'fast'}
        snapToInterval={width - 60} // 30x2
        snapToAlignment={'center'}
        contentInset={{
          top: 0,
          left: 30,
          bottom: 0,
          right: 30,
        }}>
        // onMomentumScrollEnd={this.onMomentumScrollEnd}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { x: this.animScrollOffset } } }],
          {
            useNativeDriver: true,
            isInteraction: false,
          }
        )}
          <View style={styles.view} />
          <View style={styles.view2} />
          <View style={styles.view} />
          <View style={styles.view2} />
          <View style={styles.view} />
      </Animated.ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {},
  view: {
    marginTop: 100,
    backgroundColor: 'blue',
    width: width - 80, // 30x2 + 10x2
    margin: 10,
    height: 200,
    borderRadius: 10,
  },
  view2: {
    marginTop: 100,
    backgroundColor: 'red',
    width: width - 80, // 30x2 + 10x2
    margin: 10,
    height: 200,
    borderRadius: 10,
  },
});