Avoid Keyboard on items on the Bottom - React Native - styles

Question

I have this React Native proyect (with Expo), and i have 2 buttons on the bottom of the container. When i open the keyboard to write something, those items come up with the keyboard. ¿How can i avoid that?
Here's the container code ->
render() {
return (
<View style={{flex: 1}}>
<Text style={styles.titulo}>Nueva Tarjeta</Text>
<View style={{ flex: 1}}>
<CreditCardInput
requiresName={true}
allowScroll={true}
labels={{
name: "Nombre del titular",
number: "Número de tarjeta",
expiry: "Venc",
cvc: "CVC",
}}
cardScale={1}
labelStyle={{ fontFamily: "OpenSansRegular" }}
placeholders={{
name: "Juan Perez",
number: "1234 1234 1234 1234",
expiry: "MM/AA",
cvc: "123",
}}
onChange={this._onChange}
/>
</View>
<View style={{ flexDirection: "row", alignSelf: "center",
justifyContent: 'flex-end', marginBottom: 10}}>
<TouchableOpacity style={styles.botonVolver}>
<Text style={styles.textoVolver}>Volver</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.botonAceptar}>
<Text style={styles.textoAceptar}>Aceptar</Text>
</TouchableOpacity>
</View>
</View>
);
}
Thanks in advance!

Answer 1

You could try using a KeyboardAvoidingView with its behavior prop set to 'height' on Android:
const screenHeight = Dimensions.get("window").height;
export default function App() {
return (
<KeyboardAvoidingView behavior="height" style={{ flex: 1 }}>
<View style={{ height: screenHeight - 75 }}>
<Text style={styles.titulo}>Nueva Tarjeta</Text>
<CreditCardInput
requiresName={true}
allowScroll={true}
labels={{
name: "Nombre del titular",
number: "Número de tarjeta",
expiry: "Venc",
cvc: "CVC",
}}
cardScale={1}
labelStyle={{ fontFamily: "OpenSansRegular" }}
placeholders={{
name: "Juan Perez",
number: "1234 1234 1234 1234",
expiry: "MM/AA",
cvc: "123",
}}
/>
</View>
<View
style={{
flexDirection: "row",
alignSelf: "center",
justifyContent: "flex-end",
marginBottom: 10,
}}
>
<TouchableOpacity style={styles.botonVolver}>
<Text style={styles.textoVolver}>Volver</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.botonAceptar}>
<Text style={styles.textoAceptar}>Aceptar</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
);
}
I also changed the height of the View that contains the CreditCardInput to be based on the screen height using Dimensions, because the transition was glitchy when flex was set on that View.
Be sure to import Dimensions and KeyboardAvoidingView from 'react-native'.