How to Add Nested Navigator of Stack Navigator and Bottom Tab Navigator in React Native (TypeScript)

Navigating through different screens and pages is an essential aspect of building mobile apps, and React Navigation library provides a powerful way to handle this in react native. In this blog post, let’s learn how to combine the functionality of both Stack Navigator and Bottom Tab Navigator to create a nested navigator in react native….

How to Navigate from One Screen to Another in React Native (TypeScript)

Navigation is a crucial aspect of any mobile application. It enables users to move seamlessly between different screens and access the information and features they need. In this blog post, let’s learn how to navigate from one screen to another. Even though there are some navigation libraries, react navigation is the most popular navigation library…

How to use BackHandler with React Navigation in React Native

On Android devices, users prefer the hardware back button to navigate back. Even though the actions of the back button are generally desirable, sometimes you may need to customize the action of the hardware button. In this blog post, Let’s see how to customize the back button actions using BackHandler and react-navigation library. The BackHandler…

|

How to Create a Drawer Navigator with Custom Component in React Native using React Navigation

In this blog post I will walk you through how to create a navigation drawer with custom content component in react native using navigation library react navigation. First of all add react navigation library to your react native project using the following command: npm install react-navigation Now, install react native gesture handler in your project…

How to Create a Navigator without Back Actions in React Native

Update: This tutorial is outdated. I suggest you check out the authentication flow from the official documentation. While creating an authentication flow we usually don’t want the screens to navigate back. In such situations, we want a navigator which resets the navigation history while navigating. In this blog post, I will show you how to…

How to Pass Data from One Screen to Another while Navigating in React Native

Update: This is an old post. I have created a new tutorial with typescript. Check out the blog post given here. Navigation is an important aspect of any react native mobile application. While navigating from screen to screen, you may also want to pass data. In this blog post, you can learn how to pass…

How to Make the Screen Refresh when Navigating Back in React Native (TypeScript)

In this blog post, I show you how to make the screen refresh when you navigate back in react native using react navigation library. Most of the react native projects out there prefer react navigation library for the navigation solutions. Usually, when a user navigates back using the back arrow of the header or hardware…

How to Add Bottom Tab Navigator in React Native (TypeScript)

If there were no libraries such as react navigation, navigation in react native would have been an uphill task. In this blog post, you can learn how to create a bottom tab navigator in your react native project. First of all, I recommend you install react navigation into your react native project by following the…