/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

2 votes252 views1 answer
How to clean react native project
Javascript React
0 vote237 views1 answer
Export 'default' (imported as 'Redirect') was not found in 'react-router-dom'
Javascript React
106 votes246 views2 answers
React npm build
Javascript React
0 vote229 views6 answers
React slick
Javascript React
0 vote243 views1 answer
React native sectionlist filter
Javascript React
1 vote238 views1 answer
React router dom 6 go back
Javascript React
1 vote242 views1 answer
React-router-dom v6 redirect
Javascript React
2 votes265 views1 answer
React native text right align
Javascript React
0 vote246 views1 answer
Module not found: Can't resolve 'jquery' in react
Javascript React
0 vote245 views1 answer
Get started with datagrid in react js
Javascript React