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 –
-
while-editing
– The ❌ button is visible during editing of field. -
unless-editing
– The button is visible while not editing the field. -
always
– It is visible as long as there is some text in the field. -
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.
Read These Next ⬇️
How to Create Simple Input Field?
How to Open Numeric Keyboard?
How to Open Email Id Keyboard?
How to Open Phone number Keyboard?
How to Open Url Keyboard?
How to Create Password Input Field?
How to Auto Capitalize Text in Input Field?
How to Create Multiline Input Field?
How to Hide Cursor in Input Field?
How to Clear input Field using X Button?
How to Clear input Field when focused?
How to Change Cursor Color in Input Field?
How to Disable input field?
How to add Icon at the left of Input Field?
How to Change Dark-Light Theme of Keyboard?
How to Avoid Overlapping of Keyboard?
How to Limit Characters in Input Field?
How to Add Placeholder in input field?
How to Change Placeholder Color in Input Field?
How to Programmatically select text in Input Field?
How to Change Text Selection Color in Input Field?
How to Select Whole text in Input Field on Focus?
How to Write text from center in input field?
How to Change underline color of input field?
React Native Series
Alert
- Basic Alert
- Dismiss on Clicking Outside
- Input Fields in Alert Dialog – Prompt()
- Dark-Light Theme of Dialog
ActivityIndicator
- Basic Circular Loader
- Change size of Circular Loader
- Show/hide Circular Loader
- Change color of Circular Loader
Button
FlatList
- Simple List
- Single Item Selection from List
- Multiple Item Selection from List
- Adding separator between list items
- Multiple columns List
- Showing Message in Empty List
- Add Footer to the List
- Add Header to the List
- Horizontal List
- Inverted List
- Pull to Refresh in List
- Infinite Loading List
SectionList
ScrollView
- ScrollView
- Stick Single Item at Header
- Stick Multiple Items at Header
- Stick Item at Footer
- Hide Sticky Element on Scroll
Image
- Display Image from remote url
- Display local storage image
- Display Base64 Image
- Display Gif & Webp Images
- Adding Blur to Image
- Displaying loader for Image
- Resizemode for Images
- Setting Default Placeholder Image
- Background Image
Modal
RefreshControl
- RefreshControl
- Change Refresh Loader Color
- Change Refresh Loader Size
- Change Refresh Loader Background Color
- Title under Refresh Loader
- Change color of title under refresh loader
StatusBar
- Get StatusBar Size
- Change StatusBar Background Color
- Display StatusBar icons & text in While Color
- Display StatusBar icons & text in Dark Color
- Hiding StatusBar
- Translucent StatusBar
Switch
Text
- Adding Text
- Bold Text
- Italic Text
- Underline Text
- Selecting Text for copy-paste
- Changing Highlight Color of Text Selection
- Fit text in View box
- Clickable anchors in text
- Truncate Lengthy Text
TextInput
- Simple Input Field
- Auto Capitalize Text in Input Field
- Multiline Input Field
- Hide Cursor in Input Field
- Clear input Field using X
- Clear input Field when focused
- Change Cursor Color in Input Field
- Disable input field
- Icon at the left of Input Field
- Dark-Light Keyboard
- Avoid Overlapping of Keyboard
- Limiting Characters in Input Field
- Numeric Keyboard
- Email Id Keyboard
- Phone number Keyboard
- Url Keyboard
- Placeholder in input field
- Placeholder Color in Input Field
- Password Input Field
- Programmatically select text in Input Field
- Change Text Selection Color in Input Field
- Select Whole text in Input Field on Focus
- Write text from center in input field
- Changing underline color of input field
TouchableWithoutFeedback
TouchableHighlight
TouchableOpacity
Pressable
Appearance
AppState
ToastAndroid
Dimensions
Keyboard