TextInput React Native not working onChangeText

Question

The text does not update on the screen {account}. When you type on the text input it seems like the onChangeAccount is not called. I have destructured it but it does not work unless I put the text inside the app return statement. It types one work then dismisses the keyboard.

...
const TextInputScreen = () => {
    const [account, onChangeAccount] = React.useState(null);


const ExternalTextInputContainer =({account,onChangeAccount})=>{
  return(
    <TextInput
            style={styles.input}
        onChangeText={onChangeAccount}
        value={account}
    />
  )
}
  return (
    <SafeAreaView>
      />
      <Text>{account}</Text>
       <ExternalTextInputContainer value={account}  onChangeText={
      onChangeAccount} />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default TextInputScreen;

Answer 1

You need to pass the value to onChangeAccount. You're not passing anything to it.

<TextInput
    style={styles.input}
    onChangeText={text=> onChangeAccount(text)}
    value={account}
/>

Update: You don't need to pass props to ExternalTextInputContainer component like you're doing now. Also, you're trying to deconstruct account and onChangeAccount from the props in the function. Apart from you don't pass such properties to your function, it can cause conflicts since you already have such functions/variable names defined. You can remove those props from your ExternalTextInputContainer constant function.

Also, about dismissing the keyboard issue: It happens because you used the constant function as a component inside your main component. This causes rerendering the component each time you type a character and then your keyboard gets dismissed. You can either define the component outside of TextInputScreen and then import it. Or use ExternalTextInputContainer as a function. So, you'll need to call it like this:

return (
<SafeAreaView>
  />
  <Text>{account}</Text>
   {ExternalTextInputContainer()}
</SafeAreaView>
 );

For more info, you can read this: stackoverflow.com/a/60048240/5257477

Answer 2

Its because you arent passing any props to the ExternalTextInputContainer component.

Change to this:

<ExternalTextInputContainer account={account} onChangeAccount={onChangeAccount} />

Answer 3

just change a little:

    const TextInputScreen = () => {
    const [account, setAccount] = React.useState('');


const ExternalTextInputContainer =({account,onChangeAccount})=>{
  return(
    <TextInput
            style={styles.input}
        onChangeText={onChangeAccount}
        value={account}
    />
  )
}
  return (
    <SafeAreaView>
      />
      <Text>{account}</Text>
       <ExternalTextInputContainer account={account}  onChangeAccount={
      text => setAccount(text)} />
    </SafeAreaView>
  );
};

Answer 4

I got assistance above, the problem was caused by the fact the textInput is a component and it re-renders every time causing it to flicker and dismiss keyboard after typing. The solution would be to convert the component into a function or import the component from your components folder.

const AccountView = () => {
    const [account, onChangeAccount] = React.useState(null);


const externalTextInputContainer =({account,onChangeAccount})=>{
  return(
    <TextInput
            style={styles.input}
        onChangeText={onChangeAccount}
        value={account}
    />
  )
}
  return (
    <SafeAreaView>
      {externalTextInputContainer({account,onChangeAccount})}
    </SafeAreaView>
  );
};