CODEWITHSUNDEEP
androidreact-nativetpkeyboardavoiding
Water Flower
Water Flower

Reputation: 404

Whole contents are pushed up when using KeyboardAvoidingView in react native

I have a issue when using KeyboardAvoidingView in react native. Follow is my code:

<View style={styles.container}>
    <View style = {styles.pagetitle_part}>
        <Text style = {{fontSize: 25, color: '#ffffff'}}> Register User </Text>
        <TouchableOpacity style = {{position: 'absolute', top: 30, left: 20}} onPress = {() => this.props.navigation.navigate('SignIn')}>
            <Image style = {{width: 15, height: 15}} resizeMode = 'contain' source = {require('../assets/images/left_arrow.png')}/>
        </TouchableOpacity>
    </View>
    <View style = {styles.main_part}>
        <ScrollView style = {{width: deviceWidth}} showsVerticalScrollIndicator = {false}>
            <KeyboardAvoidingView behavior = 'padding'>
                <View style = {styles.component_input}>
                    <View style = {styles.title_view}>
                        <Text style = {styles.title_text}> Fist Name </Text>
                    </View>
                    <View style = {styles.input_view}>
                        <TextInput underlineColorAndroid = 'transparent' style = {styles.input_text} onChangeText = {this.handleFirstName}>{this.state.first_name}</TextInput>
                    </View>
                </View>
                <View style = {styles.component_input}>
                    <View style = {styles.title_view}>
                        <Text style = {styles.title_text}> Last Name </Text>
                    </View>
                    <View style = {styles.input_view}>
                        <TextInput underlineColorAndroid = 'transparent' style = {styles.input_text} onChangeText = {this.handleLastName}>{this.state.last_name}</TextInput>
                    </View>
                </View>
                ... ... ...
            </KeyboardAvoidingView>
        </ScrollView>
    </View>
</View>

On Android, when I tap TextInput then upper component is pushed up and so below component is fill out the screen. But on iOS it's Ok.

Follow is screenshot before tapping the TextInput on android:

screenshot before tapping the TextInput

Follow is screenshot after tapping then TextInput:

screenshot after tapping the TextInput

As before I said, on iOS, everything is ok. How can I fix this issue on android? Why on iOs is different from on android? I'm very happy to hear your advance. Thanks.

Upvotes: 2

Views: 2048

Answers (1)

sanjar
sanjar

Reputation: 1101

For iOS you should set the "behavior" parameter of the KeyboardAvoidingView to "padding", but not for android. I show a working example in this answer :

https://stackoverflow.com/a/52255480/5359812

Upvotes: 1

Related Questions