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;

Y sharifpour · Answer 1 · 2022-05-13T21:05:03.483

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

it still does not work. Updates one word and then dismisses keyboard — questerstudios, May 13 '22 at 20:16
That issue is because you defined the constant function as a component inside your main component. This causes rerendering each time and losing focus. 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 ```{ ExternalTextInputContainer()}```. For more info, you can read this: — Y sharifpour, May 13 '22 at 20:54
Thanks you are correct. I didn't realise this at lot. Then from today I will move away from defining components in the same screen. — questerstudios, May 14 '22 at 16:53

score 0 · Answer 2 · answered May 13 '22 at 19:31

0

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

Change to this:

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

answered May 13 '22 at 19:31

Ajay Gupta

1,944
2
21
36

Still does not work. Keyboard flashes opens then it types one word and dismisses. – questerstudios May 13 '22 at 19:46

score 0 · Answer 3 · answered May 14 '22 at 03:35

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>
  );
};

score 0 · Answer 4 · answered May 14 '22 at 16:57

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>
  );
};

TextInput React Native not working onChangeText

4 Answers4