React Native text input with a clear button

Introduction :

In this post, we will create one react native project with one text input field and one clear button. The clear button will remove all text from the input field.

Create a React Native project:

Create one basic react native project and run it on an emulator/real phone. Delete everything in the App.js and follow the below steps.

Clearing TextInput :

Input text components are known as TextInput. You can import it from react-native project. On android, editable text inputs don’t provide any clear button by default. But we can add one clear button on iOS apps. React native provide one props to turn it on or off :

clearButtonMode;

It takes one of the following values :

enum("never", "while-editing", "unless-editing", "always");

By default, its value is ‘never’. It will add one clear button to the right side of the TextInput on iOS devices.

Clearing TextInput on Android :

The above flag will not work on Android. If you want to make it look similar on both android and iOS, you need to add one button to the right of it. We can use one Image wrapped inside TouchableOpacity as the button :

<TouchableOpacity style={styles.closeButtonParent} onPress={() => setText("")}>
  <Image style={styles.closeButton} source={require("./assets/close.png")} />
</TouchableOpacity>

If we press it, it will set one string variable empty. The TextInput will use the value from this variable.

<TextInput
  style={styles.textInput}
  value={text}
  onChangeText={(value) => setText(value)}
/>

Full code :

Below is the complete App.js file :

import React, { useState } from "react";
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  View,
  TextInput,
  TouchableOpacity,
  Image,
} from "react-native";

const App = () => {
  const [text, setText] = useState("");
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.container}>
        <View style={styles.parent}>
          <TextInput
            style={styles.textInput}
            value={text}
            onChangeText={(value) => setText(value)}
          />
          <TouchableOpacity
            style={styles.closeButtonParent}
            onPress={() => setText("")}
          >
            <Image
              style={styles.closeButton}
              source={require("./assets/close.png")}
            />
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column",
    justifyContent: "center",
  },
  parent: {
    marginLeft: 25,
    marginRight: 25,
    borderColor: "gray",
    borderRadius: 5,
    borderWidth: 1,
    flexDirection: "row",
    justifyContent: "space-between",
  },
  textInput: {
    height: 40,
    width: "90%",
  },
  closeButton: {
    height: 16,
    width: 16,
  },
  closeButtonParent: {
    justifyContent: "center",
    alignItems: "center",
    marginRight: 5,
  },
});

export default App;

Output :

It will look like below on Android and iOS devices :

CodeVsColor