React Native Course

There could be the use cases where you want the users to write from center of the input field; Like entering the OTP code. Similarly from right side too. To…

If you want to provide a functionality where user can easily copy the text of input field by focusing it, then you need to use selectTextOnFocus prop of TextInput. This…

We already discussed about how to change selection color of text in previous articles. Here we will see how to change the selection color of text in input field. In…

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…