/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

25 votes289 views3 answers
Setting a background Image With React Inline Styles
Javascript React
3 votes318 views3 answers
How to remove global react-native-cli package
Javascript React
157 votes442 views6 answers
Create new react app
Javascript React
0 vote320 views1 answer
Remove react native cli mac
Javascript React
0 vote330 views1 answer
Cloudinary react
Javascript React
5 votes268 views2 answers
React hook form
Javascript React
5 votes339 views3 answers
CocoaPods could not find compatible versions for pod "ReactCommon/jscallinvoker"
Javascript React
9 votes287 views3 answers
React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Javascript React
1 vote346 views1 answer
React native paper text input
Javascript React
108 votes350 views2 answers
React start new app
Javascript React