Tutorial React Navigation React Native

 

Getting started

The Fundamentals section covers the most important aspects of React Navigation. It should be enough to build a typical mobile application and give you the background to dive deeper into the more advanced topics.

Minimum requirements

react-native >= 0.72.0

expo >= 52 (if you use Expo Go)

typescript >= 5.0.0 (if you use TypeScript)

Installation

The @react-navigation/native package contains the core functionality of React Navigation.

In your project directory, run:

npm install @react-navigation/native

Installing dependencies

Next, install the dependencies used by most navigators: react-native-screens and react-native-safe-area-context.

In your project directory, run:

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

If you're on a Mac and developing for iOS, install the pods via Cocoapods to complete the linking:

npx pod-install ios

Configuring react-native-screens on Android

react-native-screens requires one additional configuration to properly work on Android.

Edit MainActivity.kt or MainActivity.java under android/app/src/main/java/<your package name>/ and add the code:

// MainActivity.kt 

import android.os.Bundle

import com.swmansion.rnscreens.fragment.restoration.RNScreensFragmentFactory

// ...

class MainActivity: ReactActivity() {

  // ...

  override fun onCreate(savedInstanceState: Bundle?) {

    supportFragmentManager.fragmentFactory = RNScreensFragmentFactory()

    super.onCreate(savedInstanceState)

  }

  // ...

}

This avoids crashes related to View state not being persisted across Activity restarts.

Opting-out of predictive back on Android

React Navigation doesn't yet support Android's predictive back gesture, so you need to disable it for the system back gesture to work properly.

In AndroidManifest.xml, set android:enableOnBackInvokedCallback to false in the <application> tag (or <activity> tag to opt-out at activity level):

// AndroidManifest.xml

<application

  android:enableOnBackInvokedCallback="false"

  >

  <!-- ... -->

</application>

Installing the native stack navigator library

Each navigator in React Navigation lives in its own library.

To use the native stack navigator, we need to install @react-navigation/native-stack:

npm install @react-navigation/native-stack

Installing the elements library

The @react-navigation/elements library provides components designed to work with React Navigation. In this guide, we'll use components like Button from the elements library:

npm install @react-navigation/elements

Creating a native stack navigator

We can create a native stack navigator by using the createNativeStackNavigator function:

createNativeStackNavigator takes a configuration object containing the screens to include, as well as various other options.

createStaticNavigation takes the navigator and returns a component to render in the app. It should only be called once, typically at the root of your app (e.g., in App.tsx):

In a typical React Native app, the createStaticNavigation function should be only used once in your app at the root.

GitHub

Android Build Script

GitHub

twitter