/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

4 votes184 views1 answer
How to empty form after submit react
Javascript React
0 vote181 views1 answer
React google places auto complete example
Javascript React
1 vote225 views1 answer
Remove underline from hyperlink react
Javascript React
0 vote196 views1 answer
Horizontal tabs in react js
Javascript React
110 votes190 views2 answers
Create react js app
Javascript React
0 vote194 views1 answer
React bootstrap button
Javascript React
0 vote189 views1 answer
Why doesn't'$' work in react
Javascript React
-1 vote192 views1 answer
React check if browser is in dark mode
Javascript React
2 votes202 views1 answer
Best react native ui library
Javascript React
157 votes275 views6 answers
Create new react app
Javascript React