React Navigation Npm / Tabs / Stack / Expo / Typescript / Github / Native Navigation

React Navigation Npm / Tabs / Stack / Expo / Typescript / Github / Native Navigation :

Installation

Install the required packages in your React Native project:

  • npm
  • Yarn
npm install @react-navigation/native

Copy

React Navigation is made up of some core utilities and those are then used by navigators to create the navigation structure in your app. Don’t worry too much about this for now, it’ll become clear soon enough! To frontload the installation work, let’s also install and configure dependencies used by most navigators, then we can move forward with starting to write some code.

The libraries we will install now are react-native-screens and react-native-safe-area-context. If you already have these libraries installed and at the latest version, you are done here! Otherwise, read on.

Installing dependencies into an Expo managed project

In your project directory, run:

expo install react-native-screens react-native-safe-area-context

Copy

This will install versions of these libraries that are compatible.

You can now continue to “Hello React Navigation” to start writing some code.

Installing dependencies into a bare React Native project

In your project directory, run:

  • npm
  • Yarn
npm install react-native-screens react-native-safe-area-context

Copy

Note: You might get warnings related to peer dependencies after installation. They are usually caused by incorrect version ranges specified in some packages. You can safely ignore most warnings as long as your app builds.

From React Native 0.60 and higher, linking is automatic. So you don’t need to run react-native link.

If you’re on a Mac and developing for iOS, you need to install the pods (via Cocoapods) to complete the linking.

npx pod-install ios

Copy

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

Add the following code to the body of MainActivity class:

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(null);
}

Copy

and make sure to add an import statement at the top of this file:

import android.os.Bundle;

Copy

This change is required to avoid crashes related to View state being not persisted consistently across Activity restarts.

Note: When you use a navigator (such as stack navigator), you’ll need to follow the installation instructions of that navigator for any additional dependencies. If you’re getting an error “Unable to resolve module”, you need to install that module in your project.

Wrapping your app in NavigationContainer

Now, we need to wrap the whole app in NavigationContainer. Usually you’d do this in your entry file, such as index.js or App.js:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
return (
<NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
);
}

Copy

Note: In a typical React Native app, the NavigationContainer should be only used once in your app at the root. You shouldn’t nest multiple NavigationContainers unless you have a specific use case for them.

Now you are ready to build and run your app on the device/simulator.

Continue to “Hello React Navigation” to start writing some code.

Leave a Comment