Collecting numerical input is a common requirement for mobile apps. React Native’s TextInput component makes this task easier but doesn’t restrict the input to numbers by default. This blog post will explain how to make TextInput accept only numeric input, covering various methods and providing practical examples. Prerequisites Basic Usage of TextInput Let’s start by…
In mobile apps, it’s common to require form controls that can be enabled or disabled based on certain conditions. One such control is the TextInput in React Native. In this blog post, we will go through the ways you can disable TextInput and scenarios where this might be useful. Prerequisites The Basics: Disabling TextInput Disabling…
Whether you’re looking to allow longer messages or simply want to give your users more flexibility in their input, then you should have multiline support. In this blog post, let’s learn how to add multiline textinput in react native. The TextInput component has many properties and multiline is one among them. You just need to…
As a part of authentications such as phone number authentications, usage of one-time passwords is increasing among mobile phone apps. Let’s check how to create OTP input easily in react native. I am using a third-party library named react native OTP input for this example. Install react native OTP input on your project using any…
A react native project without using the TextInput component can be a strange thing. In this blog post, I will show you how to change the color of the TextInput cursor. Yes, it’s a simple thing but it can have significance when you are designing your react native app. Text input has many props which…
A react native project without using the TextInput component can be a strange thing. In this blog post, I will show you how to change the color of the TextInput cursor. Yes, it’s a simple thing but it can have significance when you are designing your react native app. Text input has many props which…
In this blog post, I am going to write about how to dynamically add or remove the TextInput component and get corresponding values from each text input in react native. In this react native dynamic TextInput example, I have three buttons namely add, remove and get values. Pressing add button will add a TextInput component…
TextInput is one of the most important components in React Native. In this blog post, I am sharing with you how to make the TextInput focus automatically. When the TextInput is in focus the keyboard appears automatically and this prompts the user to type in. You can use the autoFocus prop to make the TextInput…
Sometimes you don’t want the user to input many characters through React Native TextInput component. Fortunately, react native TextInput has a prop to limit the characters the user enters. The maxLength property of TextInput limits the number of maximum characters that can be entered. You can use it as given in the code snippet given…
Sometimes, you may want to show an icon inside your TextInput, specifically saying- an icon aligned to the left of the TextInput. React Native TextInput has inlineImageLeft prop to add an icon inside it. Unfortunately, inlineImageLeft supports only the Android platform. There’s also another prop named inlineImagePadding to adjust the padding of the image inside…
We use the TextInput component in almost all React Native applications. Because of that, we usually try to customize or stylize textinput to the maximum extent. In this blog post, I will tell you how to change the placeholder color in TextInput. The TextInput comes with the placeholderTextColor property and you can change the color…
Sometimes, you might need TextInput which can’t be edited by the user. In that case, TextInput should be made not editable with editable prop. Let’s check how to make TextInput noneditable in react native. Go through the code below where I made TextInput not editable. As you noticed, here I used editable={false} to make the TextInput not…