Bottom Tabs are considered as an important UI element of mobile apps. They help users to navigate smoothly to the top features of the mobile app without hassles. Here, I am creating a beautiful custom bottom tab navigation using react navigation. React navigation library is the most popular library used for navigation features in react … Read more
From Android 10 and iOS 13, mobile phone users can prefer to use dark mode over the default light theme. As a mobile app developer, it’s important to know the color scheme preference of the user to make changes in the app design accordingly. Let’s learn how to check the color scheme preference of users … Read more
Context API helps to pass data through your react native application without having to pass a prop explicitly. It allows to store and share data globally. Thus, context API can be used as an alternative for state management libraries such as Redux. In this blog post, let’s see how to create a custom dark mode … Read more
It’s a known fact that the performance of FlatList slows down when you have a huge chunk of data. Shopify introduced an alternative to FlatList named FlashList which fixes the shortcomings of FlatList. FlashList is fast and performant when compared to FlatList. It increases the performance in both Android and iOS platforms. After all, FlashList … Read more
Sometimes you may want to show images according to a given aspect ratio instead of a fixed height. Let’s check how to show images with a predefined aspect ratio in react native. In this react native example, I will show you images in a 2/3 aspect ratio. The 2/3 aspect ratio is generally used to … Read more
Proper usage of the border and border styles is important to set your UI design appealing to users. There are three types of border types namely solid, dotted, and dashed in react native. The style property which we use to change border style is borderStyle. Let’s check how to create a dashed border in react … Read more
FlatList is one of the most used components in react native. It helps to render a list of items smoothly. Having a drag and reorder feature in FlatList helps users to arrange the items as they wish. This feature is very useful when the user wants to change the priority of items in the list. … Read more
As a part of authentications such as phone number authentications, usage of one-time passwords is increasing among mobile phone apps. Let’s check how to create OTP input easily in react native. I am using a third-party library named react native OTP input for this example. Install react native OTP input on your project using any … Read more
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 … Read more
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 … Read more
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 … Read more
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 … Read more
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 … Read more
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. The position style property can be used to place one component over another. The idea is to have a … Read more
