/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 vote120 views1 answer
`ForwardRef(ListboxComponent)`, expected a ReactNode. at ListboxComponent
Javascript React
0 vote113 views4 answers
How to pass data between routes in react
Javascript React
0 vote184 views1 answer
./node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.js
Javascript React
2 votes146 views3 answers
React scroll on top while transition
Javascript React
0 vote110 views1 answer
React i18n with parameeter
Javascript React
1 vote121 views1 answer
React native "modalize" above bottom navigation
Javascript React
19 votes186 views6 answers
Convert svg to react component
Javascript React
0 vote180 views1 answer
React big calendar messages
Javascript React
5 votes105 views2 answers
Lazy loading react
Javascript React
133 votes397 views5 answers
Npx create-react-app
Javascript React