Is there a way to ensure that the button stays fixed at the bottom of the screen, even when the keyboard is open?
Currently, I am facing an issue where the button moves up along with the keyboard.
I attempted using
position: "absolute", bottom: "0"Below is the code snippet:
return (
<KeyboardAvoidingView
behavior="padding"
style={styles.container}
>
<StatusBar style="light" />
<View style={styles.inputContainer}>
<TextInput
placeholder="First name (required)"
onChangeText={(name) =>
setFirstName((prev) => name)
}
style={styles.input}
/>
<TextInput
placeholder="Last name (optional)"
onChangeText={(lastname) =>
setFirstName((prev) => lastname)
}
style={styles.input}
/>
</View>
<Button
onPress={() => null}
title="Next"
buttonStyle={styles.button}
/>
</KeyboardAvoidingView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "space-between",
},
inputContainer: {
width: 350,
top: "20%",
alignSelf: "center",
},
input: {
borderBottomWidth: 3,
height: 50,
},
button: {
backgroundColor: Colors.blue,
width: 300,
marginBottom: 80,
height: 50,
alignSelf: "center",
},
});
Here is how the layout appears when the keyboard is opened: