How to display close ‘x’ button in input field to clear text in React Native?

You can enable the close button (x) at the right side of the input field to clear the entered text using clearButtonMode prop.

This prop works with <TextInput> component. It supports 4 values –

1. while-editing – The ❌ button is visible during editing of field.
2. unless-editing – The button is visible while not editing the field.
3. always – It is visible as long as there is some text in the field.
4. never – The close button is never visible

Note: This doesn’t work with multiline text input.

Code Example

import React from "react";
import { SafeAreaView, StyleSheet, TextInput, View } from "react-native";

const ClearButtonTextInput = () => {
  const [text, onChangeText] = React.useState("");
  const [text1, onChangeText1] = React.useState("");
  const [text2, onChangeText2] = React.useState("");
  
  return (
    <SafeAreaView>
    <View style={{paddingTop: 30}}>
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
        clearButtonMode={'always'}
      />
      <TextInput
        style={styles.input}
        onChangeText={onChangeText1}
        value={text1}
        clearButtonMode={'while-editing'}
      />
      <TextInput
        style={styles.input}
        onChangeText={onChangeText2}
        value={text2}
        clearButtonMode={'unless-editing'}
      />
    </View>
      
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default ClearButtonTextInput;

Output –

Let’s understand the output. We have 3 different input fields in 3 phones. In the first phone we are editing the first input field, in second phone the second input field and similarly in third.

1st field is set with clearButtonMode = always. So, in all three phones the ❌ button is shown in first input field. Whether we are editing it or not.

2nd field is set with clearButtonMode = while-editing. So, in 2nd phone the ❌ is visible but not in 3rd phone. This is because we are not editing this field in 3rd phone.

3rd field is set with clearButtonMode = unless-editing. So, in 2nd phone the ❌ is visible but not in 3rd phone. Because it works opposite to while-editing. ❌ is shown when you are not editing the field but gets hidden when you are editing it.

In the code we are setting 3 input fields with various values of clearButtonMode – always, while-editing, unless-editing.

Live Demo

Conclusion

Clearing input field using cross button at the right side of input field is very useful in editing forms. iOS allows this functionality natively. In React native, we can achieve this by setting clearButtonMode prop in TextInput component.