/Javascript/React/Scroll to a input on button click react native

Scroll to a input on button click react native

I cant gurantee this is the best approach.

Add this.scroll.scrollTo({ x: calculatedStartPositionOfTheScreen}) to your button Press handler https://facebook.github.io/react-native/docs/scrollview#scrollto

e.g

<View>
    ...
    <View style={styles.ButtonContainer}>
        <Button title="Screen 1" onPress={() => { this.scroll.scrollTo({ x: 0 }) }} />
    </View>
    <View style={styles.ButtonContainer}>
        <Button title="Screen 2" onPress={() => { this.scroll.scrollTo({ x: screenWidth }) }} />
    </View>
    <View style={styles.ButtonContainer}>
        <Button title="Screen 3" onPress={() => { this.scroll.scrollTo({ x: screenWidth * 2 }) }} />
    </View>
    ...
    <ScrollView
        horizontal={true}
        pagingEnabled={true}
        showsHorizontalScrollIndicator={false}
        ref={(node) => this.scroll = node}
    >
    ...
    </ScrollView>
</View >

Similar codes

0 vote125 views1 answer
Retore react app
Javascript React
4 votes137 views2 answers
Change the route on button click react
Javascript React
0 vote129 views1 answer
Text and icon on same line react native
Javascript React
0 vote134 views1 answer
How to add carsoul to react project
Javascript React
48 votes149 views6 answers
Comment in react
Javascript React
0 vote132 views1 answer
React string to integer
Javascript React
0 vote93 views1 answer
React testing library getBy image
Javascript React
0 vote128 views1 answer
.env not working on react
Javascript React
0 vote137 views1 answer
React Hook useEffect has a missing dependency: Either include it or remove the dependency array. If changes too often, find the parent component that defines it and wrap that definition in useCallback. (react-hooks/exhaustive-deps) eslint
Javascript React
1 vote138 views3 answers
Bash: react-scripts: command not found
Javascript React