How to Display Gif Images in React Native Android App

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 in ios but not on Android devices. Now, assume that I want to show following gif giphy website. It’s a gif image in webp format. In order to get … Read more

How to Open Dialer Screen Directly from React Native App

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 Linking API of react native. Linking API gives you a general interface to manage app links. The following code snippet will open the … Read more

How to Screen Record and Take Screenshots from Android Emulator without using Android Studio

If your PC has low configurations then opening Android emulator and Android Studio simultaneously may make it slow. In this blog post, I explain how to take screenshot as well as screen record from Android emulator without opening Android Studio. First of all you have to launch Android emulator using command prompt / terminal. If … Read more

How to Show SuperScript and SubScript in React Native Text

Sometimes you may need to show superscript and subscript through react native text component. Superscript characters are small and are slightly above the normal baseline whereas subscript characters appear slightly below. You can use lineHeight prop of react native text component to show superscript and subscript. With lineHeight you can place the text above or … Read more

How to Show a Message When Flatlist is Empty

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 … Read more

How to Make the TextInput on Focus in React Native

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 autoFocus prop to make the textInput on … Read more

How to Set OnPress Function to View in React Native

In react native, we use onPress prop in touchable components to enable pressing functionality. But, what about having 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 then … Read more

How to Check a Variable is Undefined in React Native

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 … Read more

How to Make React Native Modal Close Automatically

We use modals to show alerts, messages or any other information to the user. As modals are basically dialog boxes which displayed over parent view, it attracts user attention. Hence, modals are an important component in React Native. In most of the modals, there will be a close button which makes the modal hide when … Read more

How to Convert Text to Upper Case or Lower Case in React Native

Upper case and lower case conversions of text are used for many purposes including form filling and authentication. Converting text to upper case or to lower case is pretty easy in react native. You can use JavaScript methods toLowerCase() as well as toUpperCase() on strings. The usage case of toLowerCase and toUpperCase in react native … Read more

How to Make the Screen Refresh when Navigating Back in React Native

In this blog post, I show you how to make the screen refresh when you navigate back in react native using react navigation library. Most of the react native projects out there prefer react navigation library for the navigation solutions. Usually, when a user navigates back using the back arrow of the header or hardware … Read more

How to Migrate Android Support Packages into AndroidX in React Native 0.59

Update: React Native has released new stable version 0.60. It comes with AndroidX support but still, you may need to migrate your native libraries to AndroidX yourself. React Native team also recommends using a tool named Jetifier to patch node modules for a temporary solution. In late 2018, Google started to change Android support library … Read more

How to Use Set Timeout in React Native

Sometimes, we may need to execute code after some delay. In such cases, we use JavaScript method setTimeout in React Native. SetTimeout method is used to execute a function after waiting a specific amount of time. See the following snippet to see how do we use setTimeout method. The yourFunction will execute only after 3000 … Read more