Horizontal scrolling view both with touch gesture and button press....

Create horizontal page swiper using ScrollView(react-native)

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

import styles from './styles';

/*
const styles = StyleSheet.create({
  flexBox:{ flex: 1,},
  adjustCenter:  {justifyContent: 'center', alignItems: 'center',},
  adjustTop: {justifyContent: 'flex-start', alignItems: 'center',}
});
*/

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

class HorizontalScrolling extends Component {
    render(){
        return(
            <View style={[styles.flexBox, styles.adjustTop]}>
                <ScrollView
                ref={(scrollView) => {_scrollView = scrollView}}
                horizontal={true}
                onContentSizeChange={(conHeight, conWidth) => {
                    console.log(`Height: ${conHeight}, Width: ${conWidth}`);
                }}
                onScroll={() => console.log(`Scrolling...`)}
                pagingEnabled={true}
                showsHorizontalScrollIndicator={false}>
                    <View style={{height: height, width: width, backgroundColor: '#E6EE9C'}}>
                        <View style={[styles.flexBox, styles.adjustCenter]}>
                            <Text style={{fontSize: 60}}>Hello 1...</Text>
                            <Button title="Next" onPress={() => _scrollView.scrollTo({x: width})}/>
                        </View>
                    </View>
                    <View style={{height: height, width: width, backgroundColor: '#FFF59D'}}>
                        <View style={[styles.flexBox, styles.adjustCenter]}>
                            <Text style={{fontSize: 60}}>Hello 2...</Text>
                            <Button title="Next" onPress={() => _scrollView.scrollTo({x: width * 2})}/>
                        </View>
                    </View>
                    <View style={{height: height, width: width, backgroundColor: '#FFE082'}}>
                        <View style={[styles.flexBox, styles.adjustCenter]}>
                            <Text style={{fontSize: 60}}>Hello 3...</Text>
                            <Button title="Next" onPress={() => _scrollView.scrollTo({x: width * 3})}/>
                        </View>
                    </View>
                    <View style={{height: height, width: width, backgroundColor: '#FFCC80'}}>
                        <View style={[styles.flexBox, styles.adjustCenter]}>
                            <Text style={{fontSize: 60}}>Hello 4...</Text>
                            <Button title="Go Back" onPress={() => _scrollView.scrollTo({x: 0})}/>
                        </View>
                    </View>
                </ScrollView>
            </View>
        );
    }
}

export default HorizontalScrolling;