Clear React Native TextInput

I am using Native base and here is how i have made it work

constructor(props) {
    super(props);
    this.searchInput = React.createRef();
}

<Input
    placeholder="Search"
    ref={this.searchInput}
/>

then whenever i want to clear i use

    this.searchInput.current._root.clear();

reference https://github.com/facebook/react-native/issues/18843

According to changes and recommendations after React 16.3, you will need to retrieve the ref at your constructor using React.createRef:

At constructor function: this.myTextInput = React.createRef();

At render function:

<TextInput ref={this.myTextInput} />

And then you can call

this.myTextInput.current.clear();

[1] https://reactjs.org/docs/refs-and-the-dom.html

Add ref to your TextInput, for example:

 <TextInput ref={input => { this.textInput = input }} />

then call this.textInput.clear() to clear your input value

For iOS, it will give the default clear text button.

<TextInput clearButtonMode="always" />

See the doc

Related