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…
I created a new react native (v60.0) project and tried running by using command react-native run-android but faced Error: spawn vscode ENOENT error in the terminal as shown in the screenshot given below. I was running commands through the terminal of my IDE Visual Studio Code. In order to solve this react native issue, I…
Yesterday, I created a new react native project with the latest react native version 0.60 and tried to open it in my Android Studio but I got a response saying you can’t open the project with the current version of Android Studio. So, I decided to update my Android Studio to the latest version –…
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…