Native Stack Navigator

• Form sheet

• Search bar

• Large title header

• Header items

• Transparent modal

• Transition animations

Native Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack.

Comparison with Stack Navigator

The Native Stack navigator uses the native APIs UINavigationController on iOS and Fragment on Android. This means animations and gestures are handled by the platform, resulting in smoother transitions and better performance compared to the JavaScript-based Stack Navigator.

It also exposes native features such as large titles on iOS, form sheets etc., and offers a more native look and feel out of the box.

However, because it relies on native components, it may not support customizations or behaviors not supported by the underlying platforms.

Installation

To use this navigator, ensure that you have @react-navigation/native and its dependencies (follow this guide), then install @react-navigation/native-stack:

npm

npm install @react-navigation/native-stack

yarn

yarn add @react-navigation/native-stack

pnpm

pnpm add @react-navigation/native-stack

bun

bun add @react-navigation/native-stack

Usage

To use this navigator, import it from @react-navigation/native-stack:

Static

import {
  createNativeStackNavigator,