Code Example

If you want to auto select text within a range in input field, then you can use selection prop of TextInput component of React Native. This prop accepts an object…

A password field is a secure field which obscure the entered text using * or dots. This is to protect the text from prying eyes. Not only passwords, we can…

React Native provides placeholderTextColor prop of TextInput component which can be used to set a placeholder color in input field. It accepts any valid color value and works with both…

A placeholder text helps to provide information about the input field. Like what the field is for – first name, address, write your message.. etc. These placeholder text are not…

A link url is made up http, :, //, www, ., and other characters. It is beneficial if the keyboard for this input field provides easy access to these entities.…

A phone number is different from numeric field because it can have a + character. This is because the country codes starts with + like +1 for United States. The…

Apart from normal input text field, we need to have a different keyboard layout for email fields. This is because an email is made up of letters, numbers, periods and…

If you want to restrict the data in input field to be of type numeric only, then you can use keyboardType prop of <TextInput> component and set it to –…

Limiting maximum number of characters in input field is required for applications where business logic demands so. For example, Twitter is famous for its short posts and they limit the…

To give visual benefits to the users, we show icons to the left of input fields like ✉️ for email field, 📞 for mobile number field, 📌 for location field,…

According to the use case, there may come a situation when you do not want users to edit an input field. It could be due to permissions, paid subscriptions, account…

For Android apps, you can change the cursor color of input field in React Native. <TextInput> component has a prop cursorColor which accepts a color value. Setting it will start…

If you want to show a prefilled input field to a user but wants to clear it when it is focused or clicked, then use clearTextOnFocus prop and set it…

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…

If you need to hide the cursor from input field in React Native, you need to use caretHidden prop of <TextInput> component and set it to true. The default value…

Multiline textarea input field is required where a lengthy text needs to be entered. Some use case are About me field in profile, chat messenger box, wysiwyg editor etc. React…

In order to capitalize words in input field in React Native, we need to use autoCapitalize prop of <TextInput> component. There are various possible values of autoCapitalize – characters –…

A <TextInput> component is used to create input field in React native. There are multiple props associated with this component which defines the behavior of text input. Apart from all…

When you long press a text in mobiles, you can select that and copy it. We learned about it in our previous articles. Here we will see how to change…