/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 vote368 views1 answer
How to style navigation drawer react navigation v5
Javascript React
7 votes355 views1 answer
React native hide scroll indicator
Javascript React
1 vote371 views1 answer
How to install react fullpage using npm
Javascript React
0 vote359 views1 answer
React passport session
Javascript React
0 vote365 views1 answer
React js averta fonts not working in safari staging deployement
Javascript React
0 vote370 views3 answers
Image border shadow react native
Javascript React
11 votes364 views4 answers
Eslint disable react
Javascript React
1 vote393 views1 answer
React waypoint loadmore not working
Javascript React
9 votes369 views2 answers
How to redirect react router from the app components
Javascript React
33 votes379 views5 answers
Img tag in react
Javascript React