/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 vote280 views1 answer
How to put react compnent to bottom
Javascript React
0 vote306 views1 answer
How to accept only. proper email from an input field react with functional component
Javascript React
0 vote253 views1 answer
React features
Javascript React
1 vote272 views1 answer
React toggle class
Javascript React
7 votes284 views3 answers
Install node-sass version for react
Javascript React
0 vote275 views1 answer
React useEffect() the side-effect runs after every rendering
Javascript React
1 vote283 views3 answers
[PrivateRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
Javascript React
1 vote306 views1 answer
Private route in react js
Javascript React
2 votes241 views1 answer
Function component react form
Javascript React
0 vote252 views1 answer
Get nested value on object react using dot
Javascript React