/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

3 votes83 views1 answer
Module not found: can't resolve 'react' in 'c:\users\pavlos\desktop\reactjs\hwr\reactproject2\src'
Javascript React
0 vote103 views1 answer
React router cannot read location of undefined
Javascript React
1 vote108 views1 answer
Failed to transform react-native-reanimated-65.aar
Javascript React
0 vote99 views1 answer
Google pay payment gateway for react js project
Javascript React
0 vote105 views1 answer
How to update the react version in next js app
Javascript React
0 vote106 views1 answer
React 1 to 10 rating
Javascript React
0 vote105 views1 answer
Horizontal cards react bootstrap
Javascript React
92 votes101 views6 answers
React router dom
Javascript React
0 vote104 views1 answer
Salvar no localStorage react
Javascript React
0 vote99 views1 answer
Added font to react native
Javascript React