/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

1 vote207 views1 answer
React native header
Javascript React
2 votes220 views2 answers
Run react native app in production mode
Javascript React
0 vote268 views1 answer
Gradle error react native
Javascript React
0 vote193 views1 answer
React $ r component instance console
Javascript React
0 vote212 views1 answer
React this.state.selectedDays.toLocaleDateString is not a function
Javascript React
0 vote211 views2 answers
Jest simulate toggle switch react native
Javascript React
11 votes200 views2 answers
React router refreshes page
Javascript React
93 votes306 views6 answers
Install react router dom
Javascript React
1 vote244 views1 answer
Close exit app react native
Javascript React
3 votes352 views3 answers
Center element react native
Javascript React