How to clear React Native TextInput?

Sometimes, we want to clear React Native TextInput.

In this article, we’ll look at how to clear React Native TextInput.

How to clear React Native TextInput?

To clear React Native TextInput, we can set the value with a state and clear the state.

For instance, we write:

import * as React from 'react';
import { View, TextInput, Button } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  const [val, setVal] = React.useState('');

  return (
    <View>
      <TextInput value={val} onChangeText={setVal} />
      <Button title="clear" onPress={() => setVal('')} />
    </View>
  );
}

to set the value prop to val.

And we set onChangeText to setVal to set val to the inputted value.

Next, we add a Button with the onPress prop set to a function that set val to an empty string with setVal.

Conclusion

To clear React Native TextInput, we can set the value with a state and clear the state.