/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

0 vote114 views1 answer
React break out of useeffect
Javascript React
0 vote80 views1 answer
How to use algolia react native
Javascript React
6 votes179 views2 answers
React native spinner
Javascript React
0 vote104 views1 answer
React pass parameters to other page
Javascript React
11 votes124 views2 answers
React router refreshes page
Javascript React
0 vote144 views1 answer
OnClick={ (window.open react js
Javascript React
3 votes108 views2 answers
How to get custom attribute value in react
Javascript React
0 vote123 views1 answer
ERROR TypeError: undefined is not an object (evaluating '_reactNative.Styles.m aincont')
Javascript React
0 vote120 views1 answer
Detecting change in animated value react native
Javascript React
18 votes117 views6 answers
How to import svg in react
Javascript React