React Native How to avoid keyboard blocking form - react-native

Question

I am trying to avoid the keyboard over the form, according to React Native documentation, I should be using KeyboardAwareScrollView component. the instructions are fairly simple, but I cant make it work. Am I missing anything?
return (
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
style={{ flex: 1 }}
>
<View style={styles.card}>
<View style={styles.container}>
<Options setIpt={setIpt} />
<View style={styles.input}>
<ShowIpt /> // form input here
</View>
<Button
title="Create"
color="#841584"
accessibilityLabel="Create"
onPress={() =>
navigation.navigate("Result", {
ipt: ipt,
})
}
/>
</View>
</View>
</KeyboardAvoidingView>
);
const styles = StyleSheet.create({
container: {
margin: 10,
},
card: {
backgroundColor: "#F2F2F2",
margin: 10,
marginTop: 20,
borderRadius: 10,
height: "90%",
display: "flex",
},
input: {
backgroundColor: "#FFF",
height: 250,
alignItems: "center",
justifyContent: "center",
borderRadius: 10,
marginTop: 20,
marginBottom: 20,
},
});

Answer 1

Use automaticallyAdjustContentInsets and contentContainerStyle properties and change your style like below.
<KeyboardAvoidingView
automaticallyAdjustContentInsets={false}
behavior={null}
contentContainerStyle={{ flex: 1 }}
style={{
backgroundColor: 'backgroundColor',
flex: 1,
height: '100%',
}}
>
</KeyboardAvoidingView>