/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 vote218 views2 answers
Counter with react hooks
Javascript React
18 votes211 views6 answers
React native android build
Javascript React
0 vote224 views1 answer
Eject expo app to android and react native
Javascript React
0 vote230 views1 answer
Route with parameter react not working not found
Javascript React
0 vote201 views2 answers
Error: Error: Unable to resolve module react-native-gesture-handler
Javascript React
1 vote219 views1 answer
On_raw_reaction_add example
Javascript React
0 vote216 views1 answer
Too many open files react native
Javascript React
0 vote220 views1 answer
Input type disappear side scroll react
Javascript React
0 vote237 views1 answer
Export socket io connection in react
Javascript React
2 votes217 views3 answers
React cdn link
Javascript React