reactjsreact-nativekeyboardtextinputshrink

React Native TextInput shrinks when selected, how can I stop it?


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?

Before selecting TextInput: enter image description here

After selecting TextInput: enter image description here

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;

Solution

  • Take a look at this:

    https://www.freecodecamp.org/news/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580/

    It has a few solutions for this