React Native textInput clear

Question

I have a textinput like this:

 <TextInput 
          secureTextEntry={true}
          autoCompleteType="password"
          onChangeText={val => setClave(val)}
/>

and the component is:

const [clave, setClave] = useState('');

which is just for the password, because it is a login screen. So i press a button and execute some functions that validates the textInput data, and when is all ready, navigate to another screen,

my final function that navigates to another screen is this:

const goInicio = () => {
    setClave('')        
    navigation.navigate('Home')
    
  };

and what i tried to do there is to set the state of clave to an empty string but if i navigate back to the login screen the password will still be written, even though its value changed, and it no longer works to log in, it is still showing as if it has something written, how can i fix that?

Answer 1

The internal value state of TextInput and clave are unrelated since you have not set clave to be the value prop of TextInput. You are changing clave in the onChange method of the TextInput but not the other way around. This direction is one directional.

Instead, set the value prop of the TextInput to be equal to clave

<TextInput 
  value={clave}
  secureTextEntry={true}
  autoCompleteType="password"
  onChangeText={val => setClave(val)}
/>