Elements Library

A component library containing the UI elements and helpers used in React Navigation. It can be useful if you're building your own navigator, or want to reuse a default functionality in your app.

Installation

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

npm

npm install @react-navigation/elements

yarn

yarn add @react-navigation/elements

pnpm

pnpm add @react-navigation/elements

bun

bun add @react-navigation/elements

Components

Header

A component that can be used as a header. This is used by all the navigators by default.

Usage:

import { Header } from '@react-navigation/elements';

function MyHeader() {
  return <Header title="My app" />;
}

Try on Snack

To use the header in a navigator, you can use the header option in the screen options:

Static

import { Header, getHeaderTitle } from '@react-navigation/elements';

const MyStack = createNativeStackNavigator({
  screenOptions: {
    header: ({ options, route, back }) => (
      <Header
        {...options}
        back={back}
        title={getHeaderTitle(options, route.name)}
      />
    ),
  },
  screens: {
    Home: HomeScreen,
  },
});

Try on Snack

Dynamic

import { Header, getHeaderTitle } from '@react-navigation/elements';

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        header: ({ options, route, back }) => (
          <Header
            {...options}
            back={back}
            title={getHeaderTitle(options, route.name)}
          />
        ),
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  );
}

Try on Snack

note

This doesn't replicate the behavior of the header in stack and native stack navigators as the stack navigator also includes animations, and the native stack navigator header is provided by the native platform.

It accepts the following props:

headerTitle

String or a function that returns a React Element to be used by the header. Defaults to scene title.

When a function is specified, it receives an object containing following properties:

• allowFontScaling: Whether it scale to respect Text Size accessibility settings.
• tintColor: Text color of the header title.
• style: Style object for the Text component.
• children: The title string (from title in options).

Static

const RootStack = createNativeStackNavigator({