Learn ReactJS & React Native With Me
  • Home
  • React Native Series
  • React Js
  • Write for us
  • Animal Welfare
  • About Me
  • Contact
  • Home
  • React Native Series
  • React Js
  • Write for us
  • Animal Welfare
  • About Me
  • Contact
  • Facebook
  • Twitter
  • LinkedIn
  • Email
Learn ReactJS & React Native With Me

Code, Bugs, Pitfalls, Tricks of React Js & React Native

  • Home
  • React Native Series
  • React Js
  • Write for us
  • Animal Welfare
  • About Me
  • Contact

How to programmatically select text in input field in React Native?

  • Akash Mittal
  • December 9, 2022
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…
View Post

How to create password input field in React native? Code Example

  • Akash Mittal
  • December 9, 2022
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…
View Post

How to change placeholder text color in input field in React native?

  • Akash Mittal
  • December 9, 2022
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…
View Post

How to create a placeholder in input field in React Native? Code Example

  • Akash Mittal
  • December 9, 2022
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…
View Post

How to create a link url input field in React Native? Code Example

  • Akash Mittal
  • December 9, 2022
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.…
View Post

How to create phone number input field with keyboard in React native?

  • Akash Mittal
  • December 9, 2022
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…
View Post

How to create email id input field and keyboard in React Native?

  • Akash Mittal
  • December 9, 2022
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…
View Post

How to open numeric keyboard in React Native? Code Example

  • Akash Mittal
  • December 9, 2022
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 –…
View Post

How to limit number of characters in input field in React Native?

  • Akash Mittal
  • December 9, 2022
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…
View Post

How to change the dark-light theme of keyboard in React native?

  • Akash Mittal
  • December 9, 2022
React Native supports changing the theme of keyboard from dark to light and vice-versa. The keyboard appears when an input field is focused. So, the functionality is derived from input…
View Post

How to show an icon to the left of input field in React Native?

  • Akash Mittal
  • December 9, 2022
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,…
View Post

How to disable the input field for editing in React Native? Code Example

  • Akash Mittal
  • December 9, 2022
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…
View Post

How to change the cursor color of input field in React native?

  • Akash Mittal
  • December 9, 2022
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…
View Post

How to clear text of input field when in focus or clicked in React Native?

  • Akash Mittal
  • December 9, 2022
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…
View Post

How to display close ‘x’ button in input field to clear text in React Native?

  • Akash Mittal
  • December 9, 2022
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…
View Post

How to hide the cursor from input field in React native? Code Example

  • Akash Mittal
  • December 9, 2022
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…
View Post

How to create multiline textarea input field in React native? Code Example

  • Akash Mittal
  • December 9, 2022
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…
View Post

How to capitalize words in input field in React native? Code Example

  • Akash Mittal
  • December 9, 2022
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 –…
View Post

How to create a simple input field in React native? Code Example

  • Akash Mittal
  • December 9, 2022
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…
View Post

How to change text selection color on copy-paste in React Native?

  • Akash Mittal
  • December 9, 2022
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…
View Post

Posts navigation

Previous 1 2 3 4 … 30 Next

Learn ReactJS & React Native With Me
Copyright AkashMittal.com | Privacy Policy