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?…
The appearance of the Keyboard in your react native app may make behavioral changes in your user interface and hence sometimes we may need to hide the Keyboard to not affect the UI. Hiding or dismissing the keyboard programmatically in react native is pretty easy. You just need to import the Keyboard component from react…
If you are a regular Android user then chances are high that you come across snackbars. The Snackbars are part of the material design and are used to inform users about an action performed or about to perform. Even though snackbar has some similarities to Android toast, it has its own identity. Usually, Snackbar appears…
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…
A FlatList is the most suitable component in case of showing the same sort of dynamic data in your react native mobile application. In this blog post, I will explain how to show a text message through FlatList when it is empty. When the data source of your FlatList component goes empty, then the user…
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…
In react native, we use onPress prop in touchable components to enable pressing functionality. But, what about having an onPress function for the View component itself? This feature is one of the things I was missing when I compare react native to native Android development. If you are using react native version greater than 0.55.3…
While developing mobile apps with react native, chances are high that you may come across some scenarios where the value of the variable you declared becomes undefined. So, how to check if a variable is undefined or not in react native as well as JavaScript? Earlier I have written about how to check undefined property…