How to Create a Beautiful Custom Bottom Tab in React Native using React Navigation

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

How to Fix React Native iOS Build Issues on M1 Mac

I own an M1 Macbook pro and is used for my software development purpose. Even though building react native Android app is flawless I always face issues while building iOS apps. This blog post is about common react native iOS build problems and solutions for M1 Mac users. Pod Install Failure The failure of the … Read more

How to Check whether Dark Mode is enabled in React Native

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

How to create Custom Dark Theme using Context API in React Native

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

How to add FlashList in React Native

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

‘The Android Gradle plugin supports only Kotlin Gradle plugin version 1.3.40 and higher’ React Native Error Fix

I was working on a react native project where I installed watermelonDB for storage purposes. After the installation, I could not run the project on Android emulator because of the following error. The error was related to Kotlin Gradle Plugin. The same issue was raised by someone else on Github and there I found the … Read more

Android Emulator Showing Wrong Time Error Fix

I was working on a react native project which is time sensitive. Unfortunately, my Android Emulator on my M1 Macbook pro always shows the wrong time. Even changing the time didn’t help the case. A quick google search helped me to find the solution. One solution was to turn off and then turn on emulator … Read more

How to Show Images According to a Preferred Aspect Ratio in React Native

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

How to Fix Android Gradle plugin requires Java 11 to run React Native Error

I was trying to run a new react native project using my Android emulator and I faced an unexpected react native issue that says the Android Gradle plugin requires Java 11 to run. Following is the complete error. The issue is with the JDK. As you can see, the error message is advocating us to … Read more

How to Fix ‘while resolving: undefined@undefined’ Error while Creating new React Native Project

Recently, I faced an unexpected react native error. I was creating a new React Native project with the command npx react-native init and I was shown an undefined@undefined error in the terminal. Following is the complete error. Following is the solution for this react native error. Go to users/YourName/ folder. Unhide the hidden folders. If … Read more

How to Show Dashed Border in React Native

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

How to Drag and Reorder FlatList Items in React Native

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

How to Add OTP Input in React Native

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