React Native

A collection of 28 posts

React Native

How to Retrieve the Build and Version Number of Your React Native App

In the world of mobile app development, keeping track of different versions and builds of your application is essential for managing releases, debugging, and providing user support. For React Native developers, one efficient way to access these crucial pieces of information is by utilizing the react-native-device-info library. This powerful tool

React Native

How to use React Hook Form in React Native

Using React Hook Form in React Native is a great way to manage forms efficiently, providing a seamless way to handle user input and validation. React Hook Form is a library that helps you validate forms in React and React Native applications. It reduces the amount of boilerplate code you

React Native

Unraveling the Mysteries of React Native's InteractionManager

In the bustling world of mobile app development, React Native has carved out a niche for itself, enabling developers to craft beautiful, native applications using the familiar and beloved React framework. Among the many utilities that React Native offers, the InteractionManager stands out as a pivotal tool for optimizing the

React Native

Invert Text Color Based on Background Color in React Native

In this blog post, we are going to learn how to use blend mode in React Native Skia

React Native

Firebase Tutorial for React Native: Getting Started

In this article, I m going to explain how to set up the Firebase core. This article will be a reference in our other articles.

React Native

Increasing Android build memory in React Native

how to increase Android build heap size

React Native Featured

React Native Swipeable List

Learn how to implement a Swipeable list with Reanimated.

React Native

How to Open Google Play in React Native

React Native Linking to Google Play

React Native

React Native Reanimated - Donut Chart

In this post, we will learn how to create an animated donut chart component in React Native using React Native  Reanimated and React Native SVG. I m playing with Reanimated library for fun purposes from time to time. Recently I show a video on Youtube from Catalin Miron [https://www.

React Native

How to install React Native Vector Icons

React Native Vectors Icons requires some additional steps to works properly.

React Native

Reanimated Drag and Drop

Reanimated is a powerful library, when it's used together with React Native Gesture Handler is much more powerful. In this article, we are going to show how to drag and drop views. Firstly, We need to import the necessary components and functions. import { View, StyleSheet, SafeAreaView } from '

React Native

How to fix Error: While trying to resolve module @apollo/client React Native

Error: While trying to resolve module @apollo/client

React Native

Best React Native UI Libraries in 2022

React Native allows you to create user interfaces with built-in declarative components like Picker, Button, Slider, Switch, etc. But with core components, we need to write our UI  components according to design. But no need to reinvent the wheel most of the time, we can use components libraries in our

React Native

How to center content when using ScrollView with KeyboardAvoidingView

One of the pain points of React Native is  TextInputs when the keyboard pops up. There are a lot of improvements over the years. Android and iOS work differently. Recently I had a problem with ScrollView inside KeyboardAvoidingView. I need to center content inside ScrollView. As you can see TextInput

React Native

How to hide Tab Bar from the screen in React Navigation 6

In this tutorial, we’ll show how to hide Tab bar from the screen in React Navigation 6. If you are using the default Tab provided by React Navigation hiding the tab bar is so easy. we can use setOptions a method like this way const hideTabBar = () => { navigation.setOptions(

React Native

React Native Pulse( Tinder inspired) Animation with Reanimated 2

Create Pulse animation with Reanimated 2

React Native

React Native Trigger Deep Links

Deep links are very important to improve the user's experience. You can send users specific pages in the app. When you configured deep links in your app. We have to test it like everything else The first option is you can do it this way. https://reactnavigation.org/

React Native

How to create ribbon in React Native

Create corner ribbons in React Native

React Native

How to find out FlatList scroll direction

FlatList scroll direction with Reanimated 2

React Native

How to create spinner in React Native with Renanimated 2

Creating spinner animation with reanimated. it shows how to use withRepeat and withTiming

React Native

How to find potential unnecessary re-renders in React

If you are a React developer. you should know React does UI updates when the component's state and props change. But some renders could be unnecessary. Let's take one simple example to show unnecessary re-render. if you run the code below, you will notice console log

React Native

What’s new in React Navigation 6

Recently I give a try React Navigation 6 and loved it. React Navigation 5 also was great, but it had some problems. They resolved a couple of pain points and performance problems and added great features to it. In this guide, I will give you a peek at what’s

React Native

How to clean React Native project

React Native evolving fast and everyday developer experiences going better but still have some problems.

React Native

Absolute imports in React Native

When we have a large React Native project, we are facing to have long relative imports in the project like this: import MyHeader from '../../../../../MyHeader' it can be confusing when you have too many folders and imports. Furthermore code looks messy. Luckily we have the solution for that

React Native

Disable React Native console.log in Release Mode

Developers frequently log messages to the Console to make sure their code is working as expected. Of course, it is helpful to make our lives easier. but it can be dangerous in a production application. Main reasons to disable console.log Speed: Console will reduce your application's performance