KeyboardAwareScrollView and KeyboardAvoidingView does not allow keyboard to appear

Question

I'm making a login Screen using react native and im trying to make it exactly like reddit login Screen but when im using KeyboardAwareScrollView and KeyboardAvoidingView the keyboard does not appear. it keeps opening and closing. Login.js:

expo sdk : 46 platform : android

<View style={{ flex: 1 }}>
  <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"}>
    <KeyboardAwareScrollView style={{ height: 500 }}>
      <View
        style={{
          paddingRight: 10,
          flex: 0.05,
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "space-between",
        }}
      >
        <Appbar.BackAction onPress={() => navigation.navigate("Home")} />
        <Text style={{ fontSize: 24, fontWeight: "bold", color: "#ff4757" }}>
          WA
        </Text>
        <TouchableOpacity onPress={() => navigation.navigate("Regist")}>
          <Text style={{ color: "#ff4757" }}>Sign up</Text>
        </TouchableOpacity>
      </View>

      <View style={styles.centeredView}>
        <View style={{ flex: 0.9 }}>
          <Text style={styles.loginTitleText}>Log in to WearAble</Text>
          <View style={styles.continueWithGA}>
            <TouchableOpacity
              style={styles.buttonlogoStyle}
              activeOpacity={0.5}
            >
              <Image source={googleimg} style={styles.buttonImageIconStyle} />
              <Text style={styles.buttonTextStyle}>Continue with Google</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.buttonlogoStyle}
              activeOpacity={0.5}
            >
              <Image source={appleimg} style={styles.buttonImageIconStyle} />
              <Text style={styles.buttonTextStyle}>Continue with Apple</Text>
            </TouchableOpacity>
          </View>
          <View
            style={{
              flexDirection: "row",
              justifyContent: "center",
              width: "100%",
              alignItems: "center",
              marginTop: 20,
              marginBottom: 25,
            }}
          >
            <View style={styles.line} />
            <Text
              style={{
                marginLeft: 13,
                marginRight: 13,
                fontSize: 15,
                fontWeight: "bold",
              }}
            >
              OR
            </Text>
            <View style={styles.line} />
          </View>
          <View style={{ marginBottom: 10 }}>
            <TextInput
              mode="outlined"
              label="Username"
              outlineColor="gray"
              activeOutlineColor="#ff4757"
              style={{ backgroundColor: "none" }}
            />
          </View>
          <View style={{ marginBottom: 10 }}>
            <TextInput
              mode="outlined"
              label="Password"
              secureTextEntry={!showPass}
              right={
                <TextInput.Icon
                  icon={!showPass ? "eye-off" : "eye"}
                  color={!showPass ? "black" : "lightblue"}
                  onPress={eyeShow}
                />
              }
              outlineColor="gray"
              activeOutlineColor="#ff4757"
              style={{ backgroundColor: "none" }}
            />
          </View>
          <TouchableOpacity>
            <Text>Forgot Password?</Text>
          </TouchableOpacity>
          <HelperText type="error" visible={errorCheck}>
            Your Username or Password was incorrect!
          </HelperText>
        </View>

        <TouchableOpacity style={{ flex: 0.1 }} onPress={() => {}}>
          <Text style={{ fontSize: 17 }}>
            By continuing, you agree to out{" "}
            <Text style={{ color: "#ff4757", textDecorationLine: "underline" }}>
              User Agreement
            </Text>{" "}
            and{" "}
            <Text style={{ color: "#ff4757", textDecorationLine: "underline" }}>
              Privacy Policy
            </Text>
            .
          </Text>
        </TouchableOpacity>
      </View>

      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <View style={{ flex: 0.07 }}>
          <TouchableOpacity
            style={styles.loginButton}
            onPress={() => LoginUser(email, pass)}
          >
            <Text style={styles.loginButtonText}>Continue</Text>
          </TouchableOpacity>
        </View>
      </TouchableWithoutFeedback>
    </KeyboardAwareScrollView>
  </KeyboardAvoidingView>
</View>;

i want the page to behave like reddit login screen

Answer 1

i solved my problem. By moving the keyboardAvoidingView component to contain just the Continue button and the KeyboardAwareScrollView to the content of the page this how the code looks now:

<View style={{ flex: 1, backgroundColor: "white", marginTop: 5 }}>
  <StatusBar color={"white"} />
  <View
    style={{
      paddingRight: 10,
      flex: 0.05,
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "space-between",
    }}
  >
    <Appbar.BackAction onPress={() => navigation.navigate("Home")} />
    <Text style={{ fontSize: 24, fontWeight: "bold", color: "#ff4757" }}>
      WA
    </Text>
    <TouchableOpacity onPress={() => navigation.navigate("Regist")}>
      <Text style={{ color: "#ff4757" }}>Sign up</Text>
    </TouchableOpacity>
  </View>

  <View style={styles.centeredView}>
    <KeyboardAwareScrollView
      style={{ justifyContent: "space-between", backgroundColor: "green" }}
    >
      <View>
        <Text style={styles.loginTitleText}>Log in to WearAble</Text>
        <View style={styles.continueWithGA}>
          <TouchableOpacity style={styles.buttonlogoStyle} activeOpacity={0.5}>
            <Image source={googleimg} style={styles.buttonImageIconStyle} />
            <Text style={styles.buttonTextStyle}>Continue with Google</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.buttonlogoStyle} activeOpacity={0.5}>
            <Image source={appleimg} style={styles.buttonImageIconStyle} />
            <Text style={styles.buttonTextStyle}>Continue with Apple</Text>
          </TouchableOpacity>
        </View>
        <View
          style={{
            flexDirection: "row",
            justifyContent: "center",
            width: "100%",
            alignItems: "center",
            marginTop: 20,
            marginBottom: 25,
          }}
        >
          <View style={styles.line} />
          <Text
            style={{
              marginLeft: 13,
              marginRight: 13,
              fontSize: 15,
              fontWeight: "bold",
            }}
          >
            OR
          </Text>
          <View style={styles.line} />
        </View>

        <View style={{ marginBottom: 10 }}>
          <TextInput
            mode="outlined"
            label="Username"
            outlineColor="gray"
            activeOutlineColor="#ff4757"
            style={{ backgroundColor: "none" }}
            returnKeyType="done"
          />
        </View>
        <View style={{ marginBottom: 10 }}>
          <TextInput
            mode="outlined"
            label="Password"
            secureTextEntry={!showPass}
            right={
              <TextInput.Icon
                icon={!showPass ? "eye-off" : "eye"}
                color={!showPass ? "black" : "lightblue"}
                onPress={eyeShow}
              />
            }
            outlineColor="gray"
            activeOutlineColor="#ff4757"
            style={{ backgroundColor: "none" }}
            returnKeyType="done"
          />
        </View>

        <TouchableOpacity>
          <Text>Forgot Password?</Text>
        </TouchableOpacity>
        <HelperText type="error" visible={errorCheck}>
          Your Username or Password was incorrect!
        </HelperText>
      </View>

      <TouchableOpacity style={{}} onPress={() => {}}>
        <Text style={{ fontSize: 17 }}>
          By continuing, you agree to out{" "}
          <Text style={{ color: "#ff4757", textDecorationLine: "underline" }}>
            User Agreement
          </Text>{" "}
          and{" "}
          <Text style={{ color: "#ff4757", textDecorationLine: "underline" }}>
            Privacy Policy
          </Text>
          .
        </Text>
      </TouchableOpacity>
    </KeyboardAwareScrollView>
  </View>

  <KeyboardAvoidingView style={{ height: 60 }}>
    <TouchableOpacity
      style={styles.loginButton}
      onPress={() => LoginUser(email, pass)}
    >
      <Text style={styles.loginButtonText}>Continue</Text>
    </TouchableOpacity>
  </KeyboardAvoidingView>
</View>;