how to scroll horizontal by button click like next and previous. in react native

Question

I am trying to scroll screen by screen like screen 1, then screen 2, then screen 3, then screen 4 and so on and also scroll to previous like from screen 4 to screen 3. but in below code I am able to scroll in only between two screen. screen 1 and screen 2. I want to scroll more screen like screen 3,4,5,6,7,8. please help.

   <View style={styles.MainContainer}>
        <View style={styles.ButtonViewContainer}>
          <View style={styles.ButtonContainer}>
            <Button
              title="Previous Screen"
              onPress={() => {
                this.scroll.scrollTo({ x: 1 });
              }}
            />
          </View>
          <View style={styles.ButtonContainer}>
            <Button
              title="Next Screen"
              onPress={() => {
                this.scroll.scrollTo({ x: screenWidth });
              }}
            />
          </View>
        </View>
        <ScrollView
          horizontal={true}
          pagingEnabled={true}
          showsHorizontalScrollIndicator={false}
          ref={(node) => (this.scroll = node)}
        >
          <View style={styles.ScrollContainer}>
            <Text style={styles.ScrollTextContainer}>Screen 1</Text>
          </View>
          <View style={styles.ScrollContainer}>
            <Text style={styles.ScrollTextContainer}>Screen 2</Text>
          </View>
          <View style={styles.ScrollContainer}>
            <Text style={styles.ScrollTextContainer}>Screen 3</Text>
          </View>
          <View style={styles.ScrollContainer}>
            <Text style={styles.ScrollTextContainer}>Screen 4</Text>
          </View>
        </ScrollView>
      </View>

Answer 1

Have a try to use the npm package

https://www.npmjs.com/package/react-native-app-intro-slider

which gives you more control over next and previous for multiple screens

or if you want to continue with your existing scroll view management then you have to manage the current index of the scroll position, and then you can manage for next and previous with it.

For Example:

const App = () => {

    const currIndex = useRef(0)

    return (
        <View style={styles.MainContainer}>
            <View style={styles.ButtonViewContainer}>
                <View style={styles.ButtonContainer}>
                    <Button
                    title="Previous Screen"
                    onPress={() => {
                        currIndex.current -= 1
                        this.scroll.scrollTo({ x: screenWidth * currIndex.current });
                    }}
                    />
                </View>
                <View style={styles.ButtonContainer}>
                    <Button
                    title="Next Screen"
                    onPress={() => {
                        currIndex.current += 1
                        this.scroll.scrollTo({ x: screenWidth * currIndex.current });
                    }}
                    />
                </View>
            </View>
            <ScrollView
                horizontal={true}
                pagingEnabled={true}
                showsHorizontalScrollIndicator={false}
                ref={(node) => (this.scroll = node)}>
                <View style={styles.ScrollContainer}>
                    <Text style={styles.ScrollTextContainer}>Screen 1</Text>
                </View>
                <View style={styles.ScrollContainer}>
                    <Text style={styles.ScrollTextContainer}>Screen 2</Text>
                </View>
                <View style={styles.ScrollContainer}>
                    <Text style={styles.ScrollTextContainer}>Screen 3</Text>
                </View>
                <View style={styles.ScrollContainer}>
                    <Text style={styles.ScrollTextContainer}>Screen 4</Text>
                </View>
            </ScrollView>
        </View>
    )
}