Clear React Native TextInput

Question

Working through the Redux AddTodo example in React Native. The first AddTodo example below uses state to store the TextInput value and works fine.

class AddTodo extends React.Component{      constructor(props){         super(props);         this.state = { todoText: "" };      }     update(e){         if(this.state.todoText.trim()) this.props.dispatch(addTodo(this.state.todoText));          this.setState({todoText: "" });      }     render(){         return(             <TextInput                  value = {this.state.todoText}                 onSubmitEditing = { (e)=> { this.update(e); } }                 onChangeText = { (text) => {this.setState({todoText: text}) } } />         );     } } 

However following a few of the Redux examples, the following code is much shorter and also works except that the TextInput value is not cleared after submitting

let AddTodo = ({ dispatch }) => {    return (       <TextInput            onSubmitEditing = { e => { dispatch(addTodo(e.nativeEvent.text)) } }        />   ) } 

Is there any way I can clear the InputText value from onSubmitEditing?

Answer 1

Add ref to your TextInput, for example:

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

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

Answer 2

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

<TextInput clearButtonMode="always" /> 

See the doc