CODEWITHSUNDEEP
react-native
Water Flower
Water Flower

Reputation: 404

Auto scrolling when focus on TextInput in scrollview in react native

I have used many TextInput within ScrollView. I want when focus on a TextInput then scroll to this TextInput automatically. My code is following:

<View style = {{width: '100%', height: '85%'}}>
    <ScrollView showsVerticalScrollIndicator = {false} style = {{marginLeft: 10, marginRight: 10}} 
        keyboardShouldPersistTaps={true}
    >
        <KeyboardAvoidingView behavior={'padding'}>
            <View style = {styles.input_box}>
                <TextInput underlineColorAndroid = 'transparent' style = {styles.input_style}/>
            </View>
            <View style = {styles.input_box}>
                <TextInput underlineColorAndroid = 'transparent' style = {styles.input_style}/>
            </View>

            ... ... ...

            <View style = {styles.input_box}>
                <TextInput underlineColorAndroid = 'transparent' style = {styles.input_style}/>
            </View>
        </KeyboardAvoidingView>
    </ScrollView>

</View>

When I tap a TextInput, don't auto scroll to this TextInput component. so when tap lower TextInput then keyboard cover this TextInput component. So user have to scroll up to see this TextInput component.

Please anyone who know the way to fix this issue help me. Thanks so much.

Upvotes: 3

Views: 7545

Answers (1)

fedarenchyk
fedarenchyk

Reputation: 37

You can use KeyboardAvoidingView: It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its height, position, or bottom padding based on the keyboard height.

Just wrap your ScrollView with

https://reactnative.dev/docs/keyboardavoidingview

Upvotes: 1

Related Questions