/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 vote232 views1 answer
React does not recognize the `activeClassName` prop on a DOM element
Javascript React
23 votes225 views2 answers
Create-react-app npm yarn
Javascript React
1 vote247 views1 answer
React native nav bars
Javascript React
10 votes238 views2 answers
React-native text overflow ellipsis
Javascript React
5 votes217 views5 answers
Onclick react
Javascript React
113 votes218 views4 answers
New create react app
Javascript React
1 vote187 views1 answer
Table reactstrap
Javascript React
0 vote227 views1 answer
How to refresh android studio react native
Javascript React
2 votes217 views1 answer
View background image in react native
Javascript React
1 vote233 views1 answer
Error: open failed: EACCES (Permission denied) react native
Javascript React