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 :
You might also like:
- React native example to create Text with different colors or multicolored Text
- How to remove yellow warning box in React Native
- How to hide the keyboard on touch outside in react native
- Handling keyboard with react-native ScrollView
- How to show pdf files in react native applications
- How to add scroll to top to a FlatList in ReactNative app
- How to change the background color of a View dynamically in React Native