/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 vote374 views1 answer
React navigation 4
Javascript React
1 vote410 views1 answer
Is a good idea to add class in react hooks with document.body.addclasslist
Javascript React
0 vote392 views1 answer
Smooth scroll react
Javascript React
-1 vote378 views1 answer
Set className with ref react
Javascript React
1 vote404 views1 answer
How to share file from react native
Javascript React
0 vote407 views1 answer
Reduce to calculate sum react
Javascript React
1 vote382 views1 answer
React native flatlist pull to refresh
Javascript React
108 votes423 views1 answer
How to start react app in windows
Javascript React
0 vote354 views1 answer
How to change style class by using onclick function with multiple buttons in react js
Javascript React
0 vote381 views1 answer
How to disable button if errors object isnt empty in react hook form
Javascript React