Native Stack Navigator: Native Performance, Less Customization

Why it exists

React Native apps need to manage screen transitions. While this can be done purely in JavaScript, it often feels less fluid than a truly native app. Native Stack Navigator was created to bridge this gap by using the platform's own highly-optimized navigation components for superior performance.

The mental model

Think of Native Stack Navigator as a direct line to the device's own screen management system. Each new screen is a native view placed on top of a stack. When you navigate, you're telling iOS or Android to push a new view using its own code, not just re-rendering a JavaScript component. This is why its animations and gestures feel so fluid.

How it works

Instead of re-implementing navigation logic in JavaScript, this navigator delegates the work to the underlying native platform. It uses UINavigationController on iOS and Fragment on Android. This means the animations, gestures like swiping back, and overall behavior are handled by the OS, not the React Native JavaScript thread, leading to better performance.

When to use it

Use Native Stack Navigator as your default choice for screen stacks. It provides the best performance and a look and feel that matches platform conventions out of the box. It's ideal for apps that prioritize a native user experience and want access to native-only features like large titles on iOS and form sheet modals.

When not to use it

Avoid Native Stack Navigator if you need highly customized screen transitions or header behaviors not supported by the native iOS or Android APIs. Because it's a wrapper around native components, its customizability is limited. For those cases, the JavaScript-based Stack Navigator (@react-navigation/stack) offers more flexibility.

One canonical example

To set up a basic stack, you import createNativeStackNavigator and define your screens. A stack with a 'Home' screen and a 'Profile' screen would look like this:

import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
function AppStack() { return (<Stack.Navigator><Stack.Screen name="Home" component={HomeScreen} /><Stack.Screen name="Profile" component={ProfileScreen} /></Stack.Navigator>); }

This creates a navigator where you can move from Home to Profile, which gets placed on top of the stack with a native transition.