2

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.

Water Flower
  • 377
  • 7
  • 23
  • Seems like you're having this issue: https://stackoverflow.com/questions/4207880/android-how-do-i-prevent-the-soft-keyboard-from-pushing-my-view-up – Eugene Dec 03 '18 at 16:51
  • Any update on this issue?? – SVG Oct 28 '20 at 04:21

1 Answers1

1

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

sanjar
  • 1,081
  • 2
  • 9
  • 15
  • 2
    Thanks for your answer. But I have still same issue although dismiss the behavior parameter. As said in my question, the upper component(styles.pagetitle_part) is still pushed up. And screen is filled out by lower component(styles.main_part). I hope your advance. – Water Flower Dec 03 '18 at 15:27