React Native Input: How to Enter Text and Delete It Easily
What is the input element for and how to implement it in React Native?
Any developer who uses React Native will know about the importance of placing text input. There will always be a space where users will have to enter information in any web or mobile app. For example, when registering on a specific platform.
In any web application, you’re going to need to use a simple input tag. This is what you know as <input>. The React Native input will be what allows you to implement this feature in this framework. You will do it through an element known as TextInput.
In its most basic form, it would look like this:
import React from 'react'
import { StyleSheet, Text, Text, View, TextInput } from 'react-native'.
const ExampleScreen = () => {
return (
<View>
<Text> Enter Text:</Text>
<TextInput/>
</View>
)
}
const styles = StyleSheet.create({})
It is important to mention that React Native elements appear in a basic version. This means that the TextInput appears but without any styling. So, if you don’t modify it, the user will hardly find a way to interact with it. We will show you how to give it a basic styling to improve the functionality.
How to apply basic and functional styling to the text input in React Native?
If you want to see the TextInput, you will need to add a basic style to it. For example, by creating a margin. For that, you will need to add a new object. It would be done as follows:
const styles = StyleSheet.create({
input: {
margin: 15,
borderColor: 'black',
borderWidth: 1
}
})
return (
<View>
<Text> Enter Text: </Text>
<TextInput style={styles.input}/>
</View>
)
You’re done! You can now manage the status of the entry.
How to manage the text input status?
Now, what you will have to do is to add the state to the component. If you look closely, the previous component has a functional structure. Therefore, you will have to use the “useState” hook, which, as its name indicates, will be helpful for the user to interact with it.
You should apply:
import React {useState} from 'react
const ExampleScreen = () => {
const [text, setText] = useState('')
return (
<View>
<Text> Enter Text: </Text>
<TextInput style={styles.input}/>
</View>
)
}
The value “text” would be transformed into a state value if it were a class component. In such a case, it would look as follows:
state = {
text: ''
}
this.setState({
text: "someNewText"
})
Through JSX, you will be able to display the current status in the interface of your creation. Basically, you will have to add a new text element to the component:
const ExampleScreen = () => {
const [text, setText] = useState('')
return (
<View>
<Text> Enter Text: </Text>
<TextInput style={styles.input}/>
<Text> Text: {text} </Text>
</View>
)
}
The state is already initialized. However, now you will be able to incorporate a callback through the “value” attribute and the “onChangeText” event as follows:
const ExampleScreen = () => {
const [text, setText] = useState('')
return (
<View>
<Text> Enter Text:</Text>
<TextInput
style={styles.input}
value={text}
onChangeText={(newValue)=> setText(newValue)}/>
<Text> Text: {text}</Text>
</View>
)
}
How to delete a text entry easily on Android and iOS?
You already know that text input components in React Native are known as TextInput. In some systems, such as iOS, editable inputs do not include a clear button automatically. However, a clear functionality can be added through the clearButtonMode.
Whereas:
enum(‘never’, ‘while-editing’, ‘unless-editing’, ‘always’)
You should note that, by default, the value will be “never”. However, you must set it to “always” so that you can apply it on iOS.
However, on Android, it will be somewhat different. For that, you are going to have to add a button on the right side, through the TouchableOpacity component. You can do it in the following way:
<TouchableOpacity
style={styles.closeButtonParent}
onPress={() => setText('')}>
<Image
style={styles.closeButton}
source={require('./assets/close.png')}/>
</TouchableOpacity>
Touching it will delete the text that has been placed.
<TextInput
style={styles.textInput}
value={text}
onChangeText={value => setText(value)}/>
You’re done! You now know what you need to do to delete text in React Native.
Incorporate other useful attributes in the TextInputs
Although you already have basic functionality, you will enhance it with new attributes in TextInputs. Here are some of the most popular ones:
- autoCapitalize. This is one of the most well-known attributes. In this case, it refers to the possibility of automatically capitalizing the first of the TextInput values, although it can also be applied to a specific one. The default setting is activated with the first letter, generally for first and last names, although you can customize it.
- autoCompleteType. Another handy attribute, especially for database fields where users want to fill in the information they frequently use when creating accounts. For example, email or password. You can enable or disable it without any problems.
- autoCorrect. Finally, you also can automatically correct some spelling or syntax problems. By default, it will be activated, but you can change it if you feel it is not necessary.
The importance of the different uses in React Native
As you can see, this JavaScript framework is really useful for creating native apps on iOS and Android. Since they are two different operating systems, it is expected that modifications will be made for one of them, as was the case with deleting text inputs.
However, once you learn the basics of each OS, you will realize that it is much simpler than it seems. The Cross-Platform compatibility of this framework can make your work much more manageable when programming valuable apps for any work environment.
You have already learned the basic features of React Native Input. If you want to discover more tips and tutorials about this framework or code in general, we recommend you continue reading some of the articles available on our blog.