Check out this code snippet:
return (
<KeyboardAvoidingView style={{ flex: 1 }} behavior="padding" enabled>
<View style={style.flex1}>
<View style={style.imageContainer}>
<Image
style={style.image}
source={require("../../assets/pictures/LoginBackground.png")}
resizeMode="cover"
/>
<View style={style.blackOpacity} />
</View>
<View style={style.contentContainer}>
<View style={style.flex1}>
<Text style={style.welcomeHeader}>{Strings.Welcome}</Text>
</View>
<View style={style.fieldsContainer}>
<LoginInput
placeholder={Strings.MailPlaceholder}
keyboardType={"email-address"}
onChangeText={setEmail}
styles={style.itemContainer}
/>
<LoginInput
placeholder={Strings.PasswordPlaceholder}
secureTextEntry={true}
onChangeText={setPassword}
styles={style.itemContainer}
/>
<TouchableOpacity
disabled={isLoginFormEmpty()}
style={
isLoginFormEmpty()
? [style.loginBtn, style.itemContainer, style.disabled]
: [style.loginBtn, style.itemContainer]
}
onPress={() => submitLogin()}
>
<Text style={style.loginBtnText}>{Strings.LoginBtn}</Text>
</TouchableOpacity>
</View>
</View>
</View>
</KeyboardAvoidingView>
The following styles are applied:
const style = StyleSheet.create({
flex1: {
flex: 1,
},
imageContainer: {
flex: 1,
},
image: {
width: "100%",
height: "100%",
},
blackOpacity: {
...StyleSheet.absoluteFillObject,
backgroundColor: "black",
opacity: 0.6,
},
contentContainer: {
flex: 2,
backgroundColor: Colors.opacityBlack,
alignItems: "center",
},
welcomeHeader: {
fontFamily: getFontFamily("Heebo", "600"),
textAlign: "right",
fontSize: scaleFontSize(40),
marginTop: verticalScale(10),
color: Colors.white,
},
fieldsContainer: {
flex: 5,
alignItems: "center",
flexDirection: "column",
justifyContent: "space-between",
},
loginBtn: {
justifyContent: "center",
backgroundColor: Colors.submitPurple,
marginBottom: verticalScale(120),
},
disabled: {
opacity: 0.5,
},
loginBtnText: {
fontFamily: getFontFamily("Heebo", "500"),
fontSize: scaleFontSize(20),
textAlign: "center",
color: Colors.black,
},
itemContainer: {
width: horizontalScale(250),
height: verticalScale(40),
borderRadius: horizontalScale(20),
},
});
When the keyboard is closed, everything looks fine: https://i.stack.imgur.com/mc72C.jpg
However, when I open the keyboard, it causes the input elements to be too close together and lose the spacing between each element:
https://i.stack.imgur.com/lX9Dl.jpg
Do you have any suggestions on how to maintain consistent spacing between elements even when the keyboard is open?
I've already tried changing the behavior property or nesting the KeyboardAvoidingView within the main View, but it didn't solve the issue. I also attempted wrapping everything in a ScrollView, but that altered the entire layout.