KeyboarddAvoidingView not working with keyboard on bottom - react-native

Question

I have a component that renders the following:
return (
<KeyboardAvoidingView behavior="position">
<View style={styles.container}>
<View style={styles.messagesContainer}>
</View>
<SafeAreaView>
<View style={styles.inputView}>
<TextInput style={styles.input} />
<Button title="submit" />
</View>
</SafeAreaView>
</View>
</KeyboardAvoidingView>
)
With stylesheet:
const styles = StyleSheet.create({
container:{
height: "100%"
},
messagesContainer: {
backgroundColor: "red",
flex: 1
},
inputView: {
flexDirection: "row",
alignItems: "center",
padding: 5,
height: 24
},
input: {
height: 20,
backgroundColor: "white",
flex: 1
}
});
This view is rendered as a screen in a react-navigation StackNavigation.
I'd like the view to move up to make space for the keyboard, but it doesn't seem to move up far enough.
I know it's moving it up, because if I add some padding to the bottom of my container:
I've also wondered whether the SafeArea component is messing up the calculations of how far up the view should be moved, but it doesn't seem so.
I could tweak that bottom padding until the text input shows up right above the keyboard, but that seems like a flaky solution that'd require different values for different devices, orientations, keyboard layouts, etc.
Is there a more robust solution?

Answer 1

Need some modification in styling try this
return (
<KeyboardAvoidingView behavior="position" style={styles.containerWraper}>
<View style={styles.container}>
<View style={styles.messagesContainer}>
</View>
<SafeAreaView>
<View style={styles.inputView}>
<TextInput style={styles.input} />
<Button title="submit" />
</View>
</SafeAreaView>
</View>
</KeyboardAvoidingView>
)
Styles
const styles = StyleSheet.create({
container:{
flex: 1,
justifyContent: 'center'
},
containerWraper:{
flex: 1,
justifyContent: 'center'
},
messagesContainer: {
backgroundColor: "red",
flex: 1
},
inputView: {
flexDirection: "row",
alignItems: "center",
padding: 5,
height: 24
},
input: {
height: 20,
backgroundColor: "white",
flex: 1
}
});

Answer 2

Try NativeBase instead, that has better approach