Build for scale: Best approach?on How to use React Navigation in React Native

Introduction

This series of build for scale: Is About the advanced way to use React native app.

I will talk about methods, best practices, how-to use guides, and advanced approaches on how to use the most used tools, and packages. Taking into account how to structure it in your app, how to architect the solution, and advanced approaches for a performant, secure, and scalable app.

This series is perfect for React Native developers of all levels who want to take their skills to the next level and build apps that stand the test of time. Whether you’re a seasoned professional or just starting, you’ll find invaluable knowledge and practical guidance to transform your React Native development journey I explained in the previous article how to optimise

React Navigation is a popular library for managing navigation in React Native applications. It provides a flexible and customizable solution for navigating between screens and managing the navigation state.

In this article, I will walk you through how to use the navigation for React Native, how it works, and best practices when it comes to using it.

Installation?

For our example, we have React Native Vanilla, with Yarn as the Package manager.?

yarn add @react-navigation/native
yarn add @react-navigation/stack
yarn add react-native-screens react-native-safe-area-context        

Link for Ios

npx pod-install ios        

Link for Android

react-native-screens package requires one additional configuration step to properly work on Android devices. Edit MainActivity.kt or MainActivity.java file which is located under android/app/src/main/java/<your package name>/.

Add the highlighted code to the body of MainActivity class.

public class MainActivity extends ReactActivity {
 // …
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(null);
 }
 // …
}        

and make sure to add the following import statement at the top of this file below your package statement:

import android.os.Bundle;        

Check the Official documentation if you have ambiguities

How to Structure Your App Navigation

Let’s say we have the following:

an app that has a Tab with two screens: ProductList, and Setting.? When we click on a product in ProductList, it takes us to a Product Screen.

First rule: Put all your navigations into the same folder: navigation

create a folder in your src folder, named navigation and put all of your navigation handling inside

1. create types files so you can use the Navigation Types and export them when needed.
2. create LinkingConfiguration.tsx to handle Deep Link
3. create a folder to put all your navigation approach AppNavigation?
4. in the folder navigation/index.tsx?, where you handle the main navigation

Second rule: Manage each navigation group inside the same?file

for our case, we will have the following:

1. TabNavigation.tsx: where we handle the navigation between the ProductList Screen and Setting Screen
2. ProductNavigator.tsx: where we handle Product navigation between ProductList Screen and Product Screen
3. MOST IMPORTANT: For each screen, create an enumeration to make sure you write the name of the screen correctly.
4. MOST IMPORTANT: Don’t forget to have a Type to check the type of props that is passed between each screen. For example from ProductList to Product, we pass an ID in the Route navigation. Put it there

Third Rule: Use Navigation Container props?

1. use it to log events when the user changes the screen. It will be needed later to log user journeys, debug issues…
2. use the initializer to initialize some operations that are needed.

How to do it the right?way.

I will be sharing an example of code here, so you can see it in action.

Let’s start:

STEP 1:

For naming consistency, we add the prefix screen at the end for each screen naming: Product List → ProductListScreen?

• We start by handling the types of our navigation.
• ?→ as we pass the ID to ProductScreen from ProductListScreen, we need to take that into account
• ?→ For clean code, we will separate the Tab Navigator inside a file, and the Product Navigator inside another file.?
• ?→ Each screen name, is in enum to handle issues while typing the name
• ?→ For the ID type that we pass,?
• ?→ → instead of using a type that is the same as Product ( For example productID is a string, and we put the productID as string). We need to keep consistency. Let’s say we change it in the backend from string to number, so we will have to change it in all our code bases. We use a better approach by getting the type from the Entity. In our case productID type is Product['id]?
• As we are using Typescript, we need to take into account the App Screen Navigation types, and the routes that we pass

STEP 2:

As we have two navigations. each one has its own navigation.

1- ProductNavigator.tsx

2- Tab Navigator, where we use the ProductNavigator, and add the SettingScreen: Take into account:

• use AccessebilityLabel, for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and TalkBack (Android). check more details here
• use Internalization for screen naming, and accessibility
• use testID for icons, to use in your Testing.
• You can decide on the colors used for icons, either from passed color or from your Theme.

STEP 3:

Create your DeepLinking file:

1. use in prefixes, your app URI scheme.
2. add different Screen routes, with their path
3. if needed to pass a route, include it in your path

STEP 4:

Put all the navigations inside your navigation/AppNavigation/index.tsx?

1. use NavigationContainerProps such as the handleNavigationStateChange function to log the user journey
2. use UseEffect to initialize your app there.
3. use LinkingConfiguration to include your Linking file

To handle the Deep link, by handling the user journey if he wants to navigate either at the ProductList screen or Product Screen.

STEP 5:

I have included the route type in AppScreens.

It can be used such as:

import AppScreens, {
  AppScreenProps,
} from '~/navigation/AppNavigation/AppScreens';

type ProductScreenRouteType =
  AppScreenProps<AppScreens.ProductScreen>['route'];

   const route = useRoute<ProductScreenRouteType>();
   const {productId}=route        

Conclusion

In conclusion, React Navigation empowers you to build seamless navigation experiences within your React Native apps. By following the steps outlined above, you can effectively integrate navigation into your projects, allowing users to navigate between different screens and sections of your app with ease. Remember, React Navigation offers a wide range of features and customization options to cater to the specific needs of your app. Explore the official documentation and experiment to discover the full potential of React Navigation in your React Native development journey.

I share insights about React Native, React, and Typescript. Follow me on Linkedin or Medium

#reactnative #react #typescript #mobiledevelopment #engineering #patterns #bestpractices #memoryleak #performance #scaleApp #fastApp #userexperience