I am new to React Native and I am currently working on an app, on the login screen, when I select the email, or the password field the keyboard comes up and the whole screen is shrinking, how can I prevent that?
And here is the render function and the styling:
render() {
return (
<View style={styles.container}>
<View style={styles.image} >
<LoginBubble />
</View>
<Text style={styles.appName}>App Name</Text>
<Text style={styles.lipsum} >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
<View style={styles.input}>
<View style={styles.icon}>
<EmailIcon />
</View>
<TextInput
style={styles.emailInput}
placeholder="Email"
onChangeText={(text) => this.setState({ email: text })}
onSubmitEditing={Keyboard.dismiss}
autoCapitalize="none"
placeholderTextColor="#29374E"
/>
</View>
<View style={styles.input}>
<View style={styles.icon}>
<PasswordIcon />
</View>
<TextInput
style={styles.passwordInput}
placeholder="Password"
secureTextEntry={true}
onChangeText={(text) => this.setState({ password: text })}
onSubmitEditing={Keyboard.dismiss}
autoCapitalize="none"
placeholderTextColor="#29374E"
/>
</View>
<TouchableOpacity
style={styles.loginButton}
>
<Text style={styles.loginButtonText} >Login</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.help}>Need help?</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create(
{
container:
{
justifyContent: "center",
flex: 1,
backgroundColor: "white",
marginTop: getStatusBarHeight()
},
image:
{
justifyContent: "center",
alignItems: "center",
marginTop: "-5%"
},
appName:
{
fontSize: 36,
color: "#29374E",
alignSelf: "center",
fontWeight: "700",
marginTop: "2%",
//fontFamily: "Inter-SemiBoldItalic"
},
lipsum:
{
color: "#AABCD0",
alignSelf: "center",
width: "60%",
marginBottom: "7%",
textAlign: "center"
},
input:
{
borderColor: "#DEE8F3",
borderWidth: 1,
marginTop: 10,
fontSize: 16,
borderRadius: 32,
height: "8%",
marginHorizontal: 16,
//fontFamily: "Arboria-Book",
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "center",
},
icon:
{
padding: 16
},
emailInput:
{
//marginLeft: "5%",
width: "86%",
fontSize: 16,
},
passwordInput:
{
marginLeft: "1%",
width: "86%",
fontSize: 16
},
loginButton:
{
backgroundColor: "#2276D8",
borderRadius: 41,
height: "8%",
justifyContent: "center",
marginTop: 10,
marginHorizontal: 16
},
loginButtonText:
{
fontSize: 18,
color: "white",
alignSelf: "center",
},
help:
{
fontSize: 16,
color: "#2276D8",
alignSelf: 'center',
marginTop: "10%"
}
}
);
export default LoginScreen;
Take a look at this:
It has a few solutions for this