React Native Keyboard Shows But Doesn't Appear to Detect Input (Android)

Question

I am trying to set up some inputs in React Native as shown in the code below, however I have a weird bug where I can click the input box, the keyboard shows up, but if I click the keyboard it doesn't do anything, I can't even e.g. press shift or open numbers section. The issue is definitely not displaying the value as it changes when I change "name" state for example.

Why is my keyboard in React native completely unresponsive?

EDIT: So it seems if I run it in the web version, inputs are completely fine and everything works, my keyboard is only not working in the Expo Go build of the app, can anyone help with this?

import { useState } from "react";
import {
  Button,
  StyleSheet,
  TextInput,
  ScrollView,
  ActivityIndicator,
  View,
} from "react-native";
import firebase from "../database/firebaseDb";

const AddUserScreen = () => {
  const [dbRef, setDbRef] = useState(firebase.firestore().collection("users"));
  const [name, setName] = useState("namehi");
  const [email, setEmail] = useState("");
  const [mobile, setMobile] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  const storeUser = () => {
    if (name === "") {
      alert("Please fill in at least your name.");
    } else {
      setIsLoading(true);
      dbRef
        .add({
          name: name,
          email: email,
          mobile: mobile,
        })
        .then((res) => {
          setName("");
          setEmail("");
          setMobile("");
          setIsLoading(false);
          this.props.navigation.navigate("UserScreen");
        })
        .catch((err) => {
          console.error("Error found: ", err);
          setIsLoading(false);
        });
    }
  };

  if (isLoading) {
    return (
      <View style={styles.preloader}>
        <ActivityIndicator size="large" color="#9E9E9E" />
      </View>
    );
  }

  return (
    <ScrollView style={styles.container}>
      <View style={styles.inputGroup}>
        <TextInput
          placeholder={"Name"}
          value={name}
          onChangeText={(val) => {
            console.log(val); // <<<<<<<< This console.log doesn't fire at all
            setName("it worked");
          }}
        />
      </View>
      <View style={styles.inputGroup}>
        <TextInput
          multiline={true}
          numberOfLines={4}
          placeholder={"Email"}
          value={email}
          onChangeText={setEmail}
        />
      </View>
      <View style={styles.inputGroup}>
        <TextInput
          placeholder={"Mobile"}
          value={mobile}
          onChangeText={setMobile}
        />
      </View>
      <View style={styles.button}>
        <Button title="Add User" onPress={() => storeUser()} color="#19AC52" />
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 35,
  },
  inputGroup: {
    flex: 1,
    padding: 0,
    marginBottom: 15,
    borderBottomWidth: 1,
    borderBottomColor: "#cccccc",
  },
  preloader: {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    position: "absolute",
    alignItems: "center",
    justifyContent: "center",
  },
});
export default AddUserScreen;

Answer 1

you have to use the arrow function to call setEmail

const onChangeEmailHandler = (t) => {
 setEmail(t)
}
.
.
.
 <TextInput
          multiline={true}
          numberOfLines={4}
          placeholder={"Email"}
          value={email}
          onChangeText={onChangeEmailHandler}
        />