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…
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…
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…
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…
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…
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…
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…
I own a Macbook Pro with an M1 chip. I faced a build failing issue When trying to run a new react native project for iOS. There was no issue with running the same project on Android. Let’s check how to fix this specific build issue with M1 Mac. I got the following error when…
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…
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…
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…
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…