/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

21 votes188 views6 answers
React native apk build
Javascript React
0 vote182 views1 answer
Eslint version check in react
Javascript React
0 vote163 views1 answer
Javascript slider get value react
Javascript React
0 vote169 views4 answers
React node sequilize
Javascript React
0 vote184 views1 answer
React native test redux
Javascript React
0 vote174 views1 answer
Import React from 'react'; import {Router, Scene} from 'react-native-router-flux';
Javascript React
0 vote179 views1 answer
React-native-bouncy-checkbox
Javascript React
1 vote182 views1 answer
React native app crashes without error
Javascript React
36 votes183 views2 answers
Ref hook in react
Javascript React
0 vote188 views1 answer
Matched leaf route at location "/" does not have an element. react
Javascript React