In My react-native code the keyboardavoiding view is not working

Question

I am in troubling. In my code the keyboardavoiding view is not working. I am use the keyboard avoiding view but when i am filling confirm password then the textInput will be back of the keyboard and not showing. please suggest me better answer for my code.my code is:-

<SafeAreaView style={{ flex: 1 }}>
    <View>
        <View>
            <Image source={require('../img/LykaLogo.png')} style={{ width: 100, height: 100 }} />

        </View>
    </View>
    <View >
    <KeyboardAvoidingView behavior='padding'>
        <View>
            <Text style={{fontSize:15,}}>CREATE USER ACCOUNT</Text>
        </View>
        <View >
        <View >
        <TextInput
                placeholder='FULL NAME'
                inputStyle={{fontSize:15}}               
            />
        </View>
        <View >
        <TextInput
                placeholder='USERNAME'
                inputStyle={{fontSize:15}}               
            />
        </View>
        <View >
        <TextInput
                placeholder='EMAIL'
                inputStyle={{fontSize:15}}               
            />
        </View>
        <View >
        <TextInput
                placeholder='PHONE'
                inputStyle={{fontSize:15}}               
            />
        </View>
        <View >
        <TextInput
                placeholder='PASSWORD'
                inputStyle={{fontSize:15}}               
            />
        </View>
        <View>
        <TextInput
                placeholder='CONFIRM  PASSWORD'
                inputStyle={{fontSize:15}}               
            />
        </View>
        </View>
        </KeyboardAvoidingView>
    </View>
</SafeAreaView>

HedeH · Accepted Answer · 2019-01-22T14:22:01.253

I recommend you don't use the KeyboardAvoidingView for Android at all, The default keyboard behaviour in Android is good enough.

Here is an example of how to do it:

import { Platform } from 'react-native';

...

renderContent() {
  return (
    <View>
      ...
    </View>
  )
}

render() {
  return (
    <View>
      {Platform.OS === 'android' ? this.renderContent() :
        <KeyboardAvoidingView behavior='padding' enabled>
          {this.renderContent()}
        </KeyboardAvoidingView>}
    </View>
  );
}

A shorter solution that may also work for you is to not set the behavior property for Android. Set it only for iOS:

import { Platform } from 'react-native';

...

render() {
  return (
    <View>
      <KeyboardAvoidingView behavior={Platform.OS === 'android' ? '' : 'padding'} enabled>
        ...
      </KeyboardAvoidingView>
    </View>
  );
}

This is from the official docs regarding the behavior property of the KeyboardAvoidingView:

Android and iOS both interact with this prop differently. Android may behave better when given no behavior prop at all, whereas iOS is the opposite.

Source

In My react-native code the keyboardavoiding view is not working

1 Answers1