/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 vote220 views2 answers
Generate apk debug react native
Javascript React
7 votes593 views2 answers
How to import js via script in react
Javascript React
0 vote147 views1 answer
Svg as a component react
Javascript React
12 votes149 views2 answers
React native flatlist container style
Javascript React
1 vote177 views4 answers
Notification react native
Javascript React
4 votes164 views1 answer
React useeffect not on first render
Javascript React
1 vote149 views1 answer
React native app crashes without error
Javascript React
0 vote155 views1 answer
React Hook useEffect has missing dependencies: 'cart' and 'user._id'. Either include them or remove the dependency array react-hooks/exhaustive-deps
Javascript React
2 votes141 views1 answer
How to add react scroll scrollable link
Javascript React
0 vote160 views1 answer
Reactjs exemple class component
Javascript React