When we create a new react native project we prefer the latest version of react native. But in some situations, we might need to create a new project using a specific react native version. This usually happens when the latest version of react native has many breaking changes and is unstable. react-native init ProjectName is…
Update: This tutorial is outdated. I suggest you check out the authentication flow from the official documentation. While creating an authentication flow we usually don’t want the screens to navigate back. In such situations, we want a navigator which resets the navigation history while navigating. In this blog post, I will show you how to…
By default, the behavior of the FlatList component of react native is to scroll. But, in some unusual situations, you may want to disable scrolling in react native FlatList. This blog post goes through how to disable scrolling in FlatList. As you know, FlatList inherits the props of the ScrollView component. Hence you can use…
Some famous apps out there such as Instagram are restricted to portrait orientation. You may also want your react native app to support portrait orientation only. By default, react native works on both orientations- portrait and landscape. Let’s check how to restrict the app to portrait in react native. To make the app portrait only…
There are tons of mobile devices including smartphones and tablets with different dimensions and resolutions. Hence, sometimes it is important for developers to identify the device. In this blog post, I will tell you how to detect whether a device is a tablet or not in React Native. I prefer to use react native device…
Update: This is an old post. I have created a new tutorial with typescript. Check out the blog post given here. Navigation is an important aspect of any react native mobile application. While navigating from screen to screen, you may also want to pass data. In this blog post, you can learn how to pass…
NaN value stands for not a number value. A value of a number data type becomes NaN when the value is not a number legally. Getting a NaN value instead of a number can even break your react native mobile application. So, how to check if a number is NaN or not in React Native?…
In this blog post, I explain how to change transparency, that is, the opacity of an image in react native. In order to change the opacity, you should use the style property opacity of the Image component. You can change the transparency from 0.0 to 1.0 whereas 1.0 is the maximum i.e. the image becomes…
You can easily display gif images in ios but things are not the same in Android. In a normal straightforward case, the following snippet will work on ios but not on Android devices. Now, assume that I want to show the following gif from the giphy website. It’s a gif image in the webp format….
In this blog post, you can learn how to open the dial screen where the mobile phone number is dialed from your react native app. The dialer screen can be opened using the Linking API of react native. The Linking API gives you a general interface to manage app links. The following code snippet will…
If your PC has low configurations then opening the Android emulator and Android Studio simultaneously may make it slow. In this blog post, I explain how to take screenshots as well as screen records from an Android emulator without opening Android Studio. First of all, you have to launch the Android emulator using the terminal….
Sometimes you may need to show superscript and subscript through the react native text component. Superscript characters are small and are slightly above the normal baseline whereas subscript characters appear slightly below. You can use the lineHeight property of the Text component to show superscripts and subscripts. With lineHeight, you can place the text above…