Keyboard changes all components placement in react native

Question

I created an AuthForm component that I use for a sign up and sign in screen after styling the screen I noticed every time I click on the keyboard to type some input everything changes its original placement and some components overlay others and it turns into a mess, how can I fix this?

Here is the code i used

import React, { useState } from "react";
import {
  StyleSheet,
  ImageBackground,
  View,
  TouchableOpacity,
} from "react-native";
import { Text, Button, Input } from "react-native-elements";
import Icon from "react-native-vector-icons/MaterialIcons";
import Spacer from "./Spacer";

const AuthForm = ({
  headerText,
  errorMessage,
  onSubmit,
  submitButtonText,
  subText,
}) => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  return (
    <View style={styles.container}>
      <Spacer>
        <Text style={styles.Text1}>{headerText}</Text>
        <Text style={styles.Text2}>{subText}</Text>
      </Spacer>
      <View style={styles.Input}>
        <Input
          style={styles.Input}
          placeholder="Your email"
          value={email}
          onChangeText={setEmail}
          autoCapitalize="none"
          autoCorrect={false}
          leftIcon={<Icon name="email" size={20} color="#B3C1B3" />}
        />
        <Input
          secureTextEntry
          placeholder="Your password"
          value={password}
          onChangeText={setPassword}
          autoCapitalize="none"
          autoCorrect={false}
          leftIcon={<Icon name="lock" size={20} color="#B3C1B3" />}
        />
      </View>
      {errorMessage ? (
        <Text style={styles.errorMessage}>{errorMessage}</Text>
      ) : null}

      <Spacer>
        <TouchableOpacity
          style={styles.buttonStyle}
          onPress={() => onSubmit({ email, password })}
        >
          <Text style={styles.ButtonText}>{submitButtonText}</Text>
        </TouchableOpacity>
      </Spacer>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    //justifyContent: "center",
  },
  errorMessage: {
    fontSize: 16,
    color: "red",
    marginLeft: 15,
    marginTop: 15,
    top: "35%",
  },
  buttonStyle: {
    color: "#e8c0c8",
    width: "45%",
    height: "25%",
    backgroundColor: "#fdc2e6",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 15,
    top: "150%",
    left: "30%",
  },
  ButtonText: {
    color: "#FFFF",
  },
  Text1: {
    top: "420%",
    left: "15%",
    fontSize: 24,
    color: "#ffffff",
  },
  Text2: {
    top: "420%",
    left: "15%",
    fontSize: 14,
    color: "#d9d9d9",
  },
  Input: {
    top: "40%",
    width: "70%",
    left: "15%",
  },
});

export default AuthForm;

Answer 1

Update June 29, 2020. EXPO SDK 38 is out and this setting is available on app.json

{
  "expo": {
    ...your app.json expo config,
    "android": {
      "softwareKeyboardLayoutMode": "pan"
    }
  }
}

Refer to the content in expo blog

New android.softwareKeyboardLayoutMode app.json key One tricky part of building forms in mobile apps is that developers need to ensure that the on-screen “software keyboard” doesn’t obscure the focused form element. Android lets you pick how you want this to be handled: you can resize the entire window so nothing will be drawn under the keyboard, or you can pan the window so the content is not underneath it. The native property that lets you control this is android:windowSoftInputMode .

In the past, all Expo apps have been configured to use the resize mode, but some developers have found this to be problematic for their apps because UI elements such as tab bars will be pushed up above the keyboard when it is enabled. If you would prefer to use the pan mode, you can now set the layout mode directly with android.softwareKeyboardLayoutMode in your app configuration. Find the key in the "android" section of "Configuration with app.json".

Reference about this setting: https://docs.expo.io/workflow/configuration/#android

---

Answer before Expo 38

I think you may observed this problem on Android but not on iOS?

In that case, you will have to set android:windowSoftInputMode="adjustPan" in your manifest file

E.g.

<application
  android:name=".MainApplication"
  android:allowBackup="true"
  ...
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    ...
    android:windowSoftInputMode="adjustPan">
    ...
  </activity>
  ...
</application>

Answer 2

You need to use a component named KeyboardAvoidingView. Here is the link to the official documentation with an example of use : https://facebook.github.io/react-native/docs/keyboardavoidingview