KeyboardAvoidingView is not working when using flex - React Native - react-native

Question

I have a Registration form with one form header and 3 input fileds.
When I am using KeyboardAvoidingView the deisgn is getting distorted.
My code is below:-
Index.js code:-
const Registration = (props)=>{
return (
<SafeAreaView style={styles.container}>
<Form submitForm={submitForm} />
</SafeAreaView>
)
}
Form.js
const Form = (props)=>{
return (
<View style={{flex:1}}>
<View style={[styles.headerTextContainer]}>
<Text style={styles.headerText}>
Enter details to get started
</Text>
</View>
<KeyboardAvoidingView behavior="height" style={styles.formContainer}>
<View style={{flex:.20,marginBottom:25}}>
<View style={{flex:1.5,}}>
<Text style={styles.labelText}>First Name</Text>
</View>
<View style={{flex:3}}>
<TextInput
value={userinfo.firstName}
onChangeText={(text)=>setFormValue('firstName',text)}
style={styles.input}
/>
</View>
<View style={{flex:1}}>
<Text style={styles.error}>{formError.first_name_error}</Text>
</View>
</View>
</KeyboardAvoidingView>
</View>
)
}
Corresponding css:-
const styles = StyleSheet.create({
headerTextContainer:{
flex:.15,
flexDirection:'column-reverse'
},
headerText:{
color:'#000',
fontSize:23,
textAlign:'center'
},
formContainer:{
flex:.75,
padding:40
},
input:{
height: 50,
borderColor: '#DFE4EB',
borderWidth: 1,
borderRadius:10
},
labelText:{
color:'#BDBDBD',
// marginLeft:12,
marginBottom:10
},
buttonContainer:{
flex:.20,
alignContent:'center',
justifyContent:'center',
paddingLeft: 50,
paddingRight: 50,
}
})
I am very new to react native. I am unable to find the problem in this code.I have tried changing the behaviour, but it does nothing.It will be helpful if any one can guide me about what I am doing wrong
Here are the Images of the screen:-