Phone number authentication is widely used in mobile apps. Country code picker and OTP are important components of Phone number authentication. In this blog post, let’s see how to create a country code picker with phone number input easily in react native. The easiest way to create a country code picker is to use any…
Sometimes, you may want to generate random colors in your react native project. This short tutorial helps you to generate random colors and set them as background colors in react native. You can generate a random color using the following function in JavaScript. In the following react native example, there’s a FlatList with items that…
Mobile users can take screenshots in any app easily. In some scenarios, you may want to prevent users from taking screenshots inside your app. In this tutorial, let’s check how to prevent screenshots in react native app. Please note that this tutorial works only for Android apps created using react native. Go to YourProject/android/app/src/main/java/com/yourproject/MainActivity and…
The radio button helps users to choose an option from a set of options. As you know, react native doesn’t have a dedicated radio button component. Let’s check how to add a radio button in react native. In this tutorial, I am using a third-party library named react native radio buttons group to create radio…
Most of the time, the react native image component is enough for showing images in your react native app. If your app has so many images to load then you may find issues such as flickering, cache miss, etc with the image component. So, how to make your images optimized and load faster in react…
By default, the elements of react native are arranged vertically. You can also arrange them horizontally using style properties. In this react native tutorial, let’s check how to place your Text component over the Image component. You can place text over an image in react native in multiple ways. The position style property can be…
Sometimes, you may want to add images and apply some darkness to them. In this short tutorial, let’s check how to bring down the brightness of an image in React Native. The Image component of react native doesn’t allow to have children. Hence, we are using ImageBackground component which allows children. The idea here is…
It’s always good to have common color variables throughout your react native project. This helps you to manage your colors and usage easily. Even though this seems pretty obvious beginners may not know how to add a color file in react native. For example, create a file named Colors.js in your project. Then add the…
ESLint is a code analysis tool that helps you to fix issues such as syntax errors in your code easily. Simply, it increases the productivity of a developer. In some rare cases, you may want to disable ESLint for a particular file in react native. The way to disable ESLint for a file is by…
When you are developing a react native app, it’s usual to use console.log function for debugging purposes. Extensive use of console.log may make your app slow. Hence, it would be good to remove console.log from production due to security issues. There are libraries such as redux logger which uses console.log. Manually removing console.log is not…
Even though rare, you may want to disable your TextInput widget in some scenarios. In this Flutter tutorial, let’s check how to disable TextField. Disabling TextField is very easy. TextField has a property named enabled. Just make the enabled prop false to disable the TextField. See the code snippet given below. Following is the output….
I already have a blog post on how to disable Flutter TextField. In this tutorial, let’s learn how to make TextField read-only in Flutter. You might be thinking what’s the difference between disabling and making read-only? When the TextField is made read-only then you cannot change the text but you can select the text. The…