'Clear React Native TextInput

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?

javascript react-native

Solution 1:^[1]

Add ref to your TextInput, for example:

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

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

Solution 2:^[2]

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

<TextInput clearButtonMode="always" />

See the doc

Solution 3:^[3]

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

Solution 4:^[4]

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

Solution 5:^[5]

One simpler approach will be to use the value property of TextInput and use the component's state value object to set the value of textInput.

state = {
   inputTextValue : '',
}
 
submitText = () => {
    //handle the click action

    //add this line at the end of the function after you are done handling with the input text value.
     this.setState({inputTextValue : ''})
}  

<TextInput 
       onChangeText={(text) => this.setState({ inputText: text })}
       placeholder="Monday's breakfast"
       value={this.state.inputTextValue}
 />
 <TouchableOpacity 
       onPress={() => this.submitText()}>
       <Text>Submit</Text>
 </TouchableOpacity>

Solution 6:^[6]

Because you're using a functional component you can use Hooks as follows. If you have conditional renders your code check that todoInput is defined in the function passed to useEffect. I assumed your state variable is called todoText in the dependency list.

import {useRef, useEffect} from 'react';


let AddTodo = ({ dispatch }) => {
    const todoInput = useRef();
    useEffect(()=>todoInput.current.clear(),[todoText]);

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

Solution 7:^[7]

this works for me

  ref={element => {  
          //Clear text after Input
                this.attendee = element
              }}
              onSubmitEditing={this.handleAddPress}

and this.attendee.setNativeProps({ text: '' }) //Clear text after Input

Solution 8:^[8]

Following code sample:

<TextInput 
    onChangeText={(text) => this.onChangeText(text)} 
    ref={component => this._textInput = component}
    onSubmitEditing={() => {
       this.clearText()
     }}
/>

clearText(){
  this._textInput.setNativeProps({ text: ' ' });

  setTimeout(() => {
    this._textInput.setNativeProps({ text: '' });
   },3);
}

Solution 9:^[9]

This worked for me..

Init myTextInput at the constructor:

this.myTextInput = React.createRef();

Add the reference at render function:

<Input ref={this.myTextInput} />

And then you can call

this.myTextInput.current.value='';

Solution 10:^[10]

Thanks @André Abboud by your help i was able to clear my TextInput field but according to my custom TextInput, i made a slight change in implementantion.

Please review the code and approach used for implementation. As far as i know now my requirement of clearing the TextInput as i needed is fullfilled and if required for any changes please notify in comment.

And what i did to make it work is:

In setupSender.js

  ...
  this.state = {
    clearInput: false,
    ...
  }

  ...           
  setupSenderSubmit = () => {
      ...
      this.setState({                             
        clearInput: !this.state.clearInput,
      })
      ...
  }
  ...
      <CustomTextInput
        labelText="First Name" 
        onChangeText={(firstName) => this.setState({ firstName })}
        clearInput={this.state.clearInput}
        value={this.state.firstName}
        returnKeyType={ 'next' }
        autoFocus={true}
        onSubmitEditing={() =>  this.input2.current.focus()}
      ></CustomTextInput>
  ...

And in CustomTextInput.js

  this.state={
    clearInput: this.props.clearInput, 
  }

  ...

  static getDerivedStateFromProps = (props, state) => { 
    if (props.clearInput !== '' || props.clearInput !== undefined) {
      return {
        clearInput: props.clearInput
      }
    }
    return null;
  }

  ...

    <TextInput 
      label={this.props.label} 
      value={!this.state.clearInput ? this.state.text : null}
      onChangeText={(text) => {
          this.setState({text});
          this.props.onChangeText(text)
        }
      }
    </TextInput>

  ...

Solution 11:^[11]

On my functional Component , I call another function along with submitHandler , that function will take care to clear text

const [text, setText] = useState('');
 const anotherFunc = (val) =>{
        setText('');
    }


    return (
        <View>
            <TextInput 
            value ={text}
            onChangeText ={changeHander}
            placeholder = 'Add '
           />
            <Button 
            title = "Add Something "
            onPress = {()=>  {submitHandler(text) , anotherFunc(text)}}
            />

        </View>
    )

Solution 12:^[12]

React-Native Using Input component from native-base. This worked for me:

<Input ref={input => {this.textInput = input;}}

and then:

this.textInput._root.clear();

Note: Did not have to use React.createRef() to initialise.

Solution 13:^[13]

I make this code for clearing TextInput in React Native OnSubmitEditing you can check my snack: https://snack.expo.io/@andreh111/clear-textinput-onsubmitediting

Here is the code:

state = {
    searchInput:'',
    clearInput:false
}
render(){
  return(



  <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
    <TextInput 
            style={{
              borderColor:'black',
              borderWidth:1,
              width:200,
              height:50
            }}
              onChangeText={(searchInput)=>this.setState({
                searchInput
              })}
              value={!this.state.clearInput ? this.state.searchInput : null}
              onSubmitEditing={()=>{
                this.setState({
                  clearInput:!this.state.clearInput,

                })

              }}
     />
</View>
)

}

Solution 14:^[14]

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

         this.name.clear();
         this.email.clear();
         this.password.clear();
         this.confirmPassword.clear();

Solution 15:^[15]

      this.state = {
           commentMsg: '',
      }

after submittion 
     if (response.success)
     {
            this.commentMsg.clear();        //TODO me
     }


  <TextInput
     style={styles.textInput}
     multiline={true}
     ref={input => {
     this.commentMsg = input
       }}
     onChangeText={(text) => this.setState({commentMsg: text})}
     placeholder ='Comment'/>

Solution 16:^[16]

Work to me...

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

after call function

clearMsg(){

    this.textInput.state.value = ''
}

Solution 17:^[17]

Also you can set the value of the <TextInput/> the same of the state and after use the data, set the state back to an empty string:

//state
const [state, setState] = useState({
  name: '',
  lastname: ''
})

//functions
const newUser = () => {
// Do your magic and after
  setState({
    name: '',
    lastname: ''
  })
}

const handleOnChange = () => {
  setState({
    // change your state
  })
}

//render
<TextInput
  value={state.name}
  placeholder='Name'
  onChangeText={/* execute your handleOnChange() */}
/>

<TextInput
  value={state.lastname}
  placeholder='Lastname'
  onChangeText={/* execute your handleOnChange() */}
/>

<Button title='Saved' onPress={() => newUser()} />

Hope to be usefull!

Solution 18:^[18]

for RN > 0.6

const [msg, setMsg] = useState()

use value inside TextInput

<TextInput 
    onChangeText={(txt) => setMsg(txt)}}
    value={msg}
/>

then set state in your button press function like this

const pressButton = () => {
    setMsg('')
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Kawatare267
Solution 2	Amaury Liet
Solution 3
Solution 4	Fadi Abo Msalam
Solution 5
Solution 6
Solution 7	Hansa Tharuka
Solution 8	Gurbela
Solution 9	mharindu
Solution 10	Kishan Bharda
Solution 11	Farhad Kabir
Solution 12	fadzb
Solution 13	André Abboud
Solution 14	Keshav Gera
Solution 15	Keshav Gera
Solution 16	Marquin Ferreira
Solution 17	Lianel
Solution 18	Sohaib Khan

'Clear React Native TextInput

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]

Solution 17:[17]

Solution 18:[18]