title: react native Horizontal Scroll on Button click
body: <p>I am a beginner at React Native. As you can see from the <a href="https://i.stack.imgur.com/HFnuQ.png" rel="noreferrer">image </a> that I have a Scroll View and two buttons. I have successfully implemented the scroll View which works fine but I also want to them to auto scroll on the press of a button. I have tried searching a lot but not getting anything which is working. So any help is appreciated. Please find my code below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { AppRegistry, StyleSheet, Text, View, Dimensions, ScrollView, Button } from 'react-native';
  
  var screenWidth = Dimensions.get('window').width;
  
  export default class App extends React.Component {
    render() {
      return (
        &lt;View style={styles.MainContainer}&gt;
          &lt;View style={styles.ButtonViewContainer}&gt;
            &lt;View style={styles.ButtonContainer}&gt;
              &lt;Button title="Screen 1" /&gt;
            &lt;/View&gt;
            &lt;View style={styles.ButtonContainer}&gt;
              &lt;Button title="Screen 2" /&gt;
            &lt;/View&gt;
          &lt;/View&gt;
          &lt;ScrollView
            horizontal={true}
            pagingEnabled={true}
            showsHorizontalScrollIndicator={false}
          &gt;
            &lt;View style={styles.ScrollContainer}&gt;
              &lt;Text style={styles.ScrollTextContainer}&gt;
                Screen 1
                &lt;/Text&gt;
            &lt;/View&gt;
            &lt;View style={styles.ScrollContainer}&gt;
              &lt;Text style={styles.ScrollTextContainer}&gt;
                Screen 2
                &lt;/Text&gt;
            &lt;/View&gt;
          &lt;/ScrollView&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    MainContainer: {
      backgroundColor: '#abe3a8',
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
  
    },
    ScrollContainer: {
      backgroundColor: '#cdf1ec',
      flexGrow: 1,
      marginTop: 0,
      width: screenWidth,
      justifyContent: 'center',
      alignItems: 'center'
    },
    ScrollTextContainer: {
      fontSize: 20,
      padding: 15,
      color: '#000',
      textAlign: 'center'
    },
    ButtonViewContainer: {
      flexDirection: 'row',
      paddingTop: 35,
    },
    ButtonContainer: {
      padding: 30,
    },
  });</code></pre>
  </div>
  </div>
  </p>