/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 vote149 views2 answers
How to get window size in react js
Javascript React
0 vote135 views1 answer
Link externo para usar em React
Javascript React
0 vote133 views1 answer
React-data-table-component api action button
Javascript React
0 vote174 views1 answer
Reactjs ES6 class event listeners in jsx
Javascript React
0 vote156 views1 answer
Settimeout react native focus text input
Javascript React
1 vote137 views2 answers
Reset form input react
Javascript React
0 vote185 views1 answer
Get call log in react native android
Javascript React
1 vote132 views1 answer
React place div at center of page
Javascript React
0 vote170 views1 answer
React native init specific version
Javascript React
0 vote141 views1 answer
Add active class to button onclick react
Javascript React