Skip to main content
Version: 8.x

Hello React Navigation

In a web browser, clicking a link pushes a page onto the browser's history stack, and pressing the back button pops the page from the stack, making the previous page active again. React Native doesn't have a built-in history like a web browser - this is where React Navigation comes in.

The native stack navigator keeps track of visited screens in a history stack. It also provides UI elements such as headers, native gestures, and animations to transition between screens etc. that you'd expect in a mobile app.

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@next
info

@react-navigation/native-stack depends on react-native-screens and the other libraries that we installed in Getting started. If you haven't installed those yet, head over to that page and follow the installation instructions.

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:

import * as React from 'react';
import { View, Text } from 'react-native';
import { createStaticNavigation } from '@react-navigation/native';
import {
  createNativeStackNavigator,
  createNativeStackScreen,
} from '@react-navigation/native-stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const RootStack = createNativeStackNavigator({
  screens: {
    Home: createNativeStackScreen({
      screen: HomeScreen,
    }),
  },
});

const Navigation = createStaticNavigation(RootStack);

export default function App() {
  return <Navigation />;
}

Basic app using stack navigator

If you run this code, you will see a screen with an empty navigation bar and a grey content area containing your HomeScreen component (shown above). These are the default styles for a stack navigator - we'll learn how to customize them later.

tip

The casing of the route name doesn't matter - you can use lowercase home or capitalized Home, it's up to you. We prefer capitalizing our route names.

Configuring the navigator