React Native

A collection of 25 posts

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

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'; import Animated,

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({ tabBarStyle:

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/docs/deep-linking/

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 inside component re-render

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 problem,

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 since it

React Native

Handling App Clips URL in React Native

In this post, We are going to explain the App Clips invocation URL in React Native. Firstly, I wrote this article when App Clips was introduced. it was just an experimental, then I decided to explore more about App Clips' experiences. If you checked Apple documentation about App Clips. the

React Native

How to Open App Store in React Native

Sometimes you need to redirect App Store to download force update or something else. Its very easy to do in React Native. For this purpose we are going to use Linking from React Native core. It means no additional package needed. But we need to add  one configuration to app

React Native

How to Integrate Maps in React Native

Maps are an important part of the apps. In this blog post, we are going to integrate the React Native Maps package into our sample app.