title: ScrollView programmatically scroll on button press in react native
body: <p>So I manually created an onboarding screen in React Native using ScrollView and also I added a button labeled next to enable the hidden screen to move in on the screen, Now my challenge is how I can programmatically make my ScrollView Scroll when the button is pressed. Below is my sample functional component I tried my hand at, but I have no idea how I'll go about implementing the button press scroll</p>
  <pre><code>export default function Onbaording({ navigation }) {
    const [sliderState, setSliderState] = React.useState({ currentPage: 0 });
    const { width, height } = Dimensions.get(&quot;window&quot;);
  
    const setSliderPage = (event) =&gt; {
      const { currentPage } = sliderState;
      const { x } = event.nativeEvent.contentOffset;
      const indexOfNextScreen = Math.floor(x / width);
      if (indexOfNextScreen !== currentPage) {
        setSliderState({
          ...sliderState,
          currentPage: indexOfNextScreen,
        });
      }
    };
  
    const { currentPage: pageIndex } = sliderState;
  
    return (
      &lt;View style={Styles.container}&gt;
        &lt;SafeAreaView style={{ flex: 4 }}&gt;
          &lt;ScrollView
            horizontal={true}
            scrollEventThrottle={16}
            pagingEnabled={true}
            showsHorizontalScrollIndicator={false}
            snapToStart={true}
            onScroll={(event: any) =&gt; {
              setSliderPage(event);
            }}
          &gt;
            &lt;View style={{ width, height, paddingHorizontal: 16 }}&gt;
              &lt;View style={Styles.Svg}&gt;
                &lt;WelcomeSvg1 /&gt;
              &lt;/View&gt;
  
              &lt;Text style={Styles.text}&gt;Onboarding&lt;/Text&gt;
              &lt;Text&gt;
                Done with React Native.
              &lt;/Text&gt;
            &lt;/View&gt;
  
            &lt;View style={{ width, paddingHorizontal: 16 }}&gt;
              &lt;View style={Styles.Svg}&gt;
                &lt;WelcomeSvg2 /&gt;
              &lt;/View&gt;
  
              &lt;Text style={Styles.text}&gt;Onboarding&lt;/Text&gt;
              &lt;Text&gt;
                Done with React Native.
              &lt;/Text&gt;
            &lt;/View&gt;
          &lt;/ScrollView&gt;
  
  
            &lt;View style={Styles.paginationWrapper}&gt;
              {Array.from(Array(2).keys()).map((key, index) =&gt; (
                &lt;View
                  style={[
                    Styles.paginationDots,
                    {
                      backgroundColor:
                        pageIndex === index ? &quot;#51668F&quot; : &quot;#EAEAEA&quot;,
                    },
                  ]}
                  key={index}
                /&gt;
              ))}
            &lt;/View&gt;
        &lt;/SafeAreaView&gt;
  
        &lt;View&gt;
            &lt;View
              style={{ flexDirection: &quot;row&quot;, justifyContent: &quot;space-between&quot; }}
            &gt;
              &lt;TouchableOpacity
                onPress={() =&gt; {
                  navigation.navigate(&quot;Signin&quot;);
                }}
              &gt;
                &lt;Text&gt;Skip&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
  
              &lt;TouchableOpacity&gt;
                &lt;Text&gt;Next&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
            &lt;/View&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    );
  }
  </code></pre>