React Native KeyboardAvoidigView does not work with SafeAreaView - react-native

Question

KeyboardAvoidingView does not seem to be working properly with SafeAreaView and not sure where is the issue come from.
Can anyone help me find the issue?
<SafeAreaView style={styles.safeArea}>
<View style={styles.viewStyle}>
<Text
style={styles.goBackText}
onPress={() => {this.props.navigation.goBack()}}><Ionicons name="md-arrow-round-back" size={28} /></Text>
{/* TODO: KeyboardAvoidingView does not work properly */}
<KeyboardAvoidingView behavior="padding" enabled>
<View style={styles.formView}>
<TextInput
style={styles.textInput}
placeholder="Email"
onChangeText={(email) => this.props.screenProps[1](email) }
/>
<TextInput
style={styles.textInput}
placeholder="Password"
secureTextEntry={true}
onChangeText={(password) => this.props.screenProps[2](password) }
/>
<TouchableOpacity style={styles.btnStyle} onPress={this.userLoginClicked}>
<Text style={styles.btnText}>Login</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</View>
</SafeAreaView>
const styles = StyleSheet.create({
safeArea: {
flex:1,
backgroundColor: '#eee'
},
viewStyle: {
flex:1,
justifyContent: 'center',
backgroundColor: '#eee'
},
goBackText: {
position: 'absolute',
top: 10,
left: 16
},
formView: {
padding: 16,
},
textInput: {
padding: 14,
backgroundColor: '#fff',
marginBottom: 10
},
btnStyle: {
padding: 14,
marginBottom: 10,
backgroundColor: '#fc0f82',
},
btnText: {
textAlign: 'center',
fontSize: 18,
color: '#f8f8f8'
},
errorText: {
color: '#ff0000',
marginBottom: 10
}
})