Console

Settings

Sign out

Notifications

Alexa

Amazon Appstore

Ring

AWS

Documentation

Support

My Cases

Console

Vega Developer Docs

Home

Get Started

Design and Develop

Publish

Reference

Support

react-navigation

Open Beta Documentation Amazon offers this technical documentation as part of a pre-release, open beta. The features described might change as Amazon receives feedback and iterates on the features. For the most current feature information, see the latest Release Notes.

React Navigation 7.0.0 is a robust navigation library for React Native applications. You can easily manage screen transitions, handle routing, and implement navigation patterns such as bottom-tabs, stack, and drawer navigation.

React Native doesn't have a built-in API for navigation like you see in a web browser. React Navigation provides this navigation for you. React Navigation sits alongside the iOS, Android and Vega gestures and animations to transition between screens.

This library is system-deployed and available to React Native for Vega apps without a separate installation process. The library is deployed as an autolinking library, which your app links to at runtime. The library is guaranteed to be compatible only with the version of React Native for Vega for which it's built.

When you uplevel your app's version of React Native for Vega, consider the best practice of upleveling its library dependencies.

Installation

Add dependencies in the package.json file. You might not need all of the following packages, so include a subset of packages you need in your application.

Copied to clipboard.

 "dependencies": {
     ...
     "@amazon-devices/react-navigation__bottom-tabs": "~7.0.0",
     "@amazon-devices/react-navigation__core": "~7.0.0",
     "@amazon-devices/react-navigation__devtools": "~7.0.0",
     "@amazon-devices/react-navigation__drawer": "~7.0.0",
     "@amazon-devices/react-navigation__elements": "~7.0.0",
     "@amazon-devices/react-navigation__material-bottom-tabs": "~7.0.0",
     "@amazon-devices/react-navigation__material-top-tabs": "~7.0.0",
     "@amazon-devices/react-navigation__native": "~7.0.0",
     "@amazon-devices/react-navigation__native-stack": "~7.0.0",
     "@amazon-devices/react-navigation__react-native-tab-view": "~7.0.0",
     "@amazon-devices/react-navigation__routers": "~7.0.0",
     "@amazon-devices/react-navigation__stack": "~7.0.0",
     ...
}

Add the @amazon-devices/react-native-screens dependency for unmounting screens that aren't visible.

Copied to clipboard.
```
 "dependencies": {
     ...
     "@amazon-devices/react-native-screens": "~2.0.0"
     ...
}
```
Reinstall the dependencies file using the npm install command.

Examples

Stack example

Add the following dependencies:

Copied to clipboard.

"dependencies": {
      ...
      "@amazon-devices/react-navigation__stack": "~7.0.0",
      "@amazon-devices/react-navigation__native": "~7.0.0",
      "@amazon-devices/react-native-screens": "~2.0.0",
      ...
}

Paste this code in the App.tsx file:

Copied to clipboard.

import {enableFreeze, enableScreens} from '@amazon-devices/react-native-screens';
import {NavigationContainer} from '@amazon-devices/react-navigation__native';
import {createStackNavigator} from '@amazon-devices/react-navigation__stack';
import * as React from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';

function generateRandomColors(n: number): string[] {
  const generatedColors: string[] = [];

  for (let i = 0; i < n; i++) {
    const red = Math.floor(Math.random() * 128 + 64);
    const green = Math.floor(Math.random() * 128 + 64);
    const blue = Math.floor(Math.random() * 128 + 64);
    const hex = `#${red.toString(16).padStart(2, '0')}${green
      .toString(16)
      .padStart(2, '0')}${blue.toString(16).padStart(2, '0')}`;
    generatedColors.push(hex);
  }

  return generatedColors;
}

enableScreens();
enableFreeze();

const Stack = createStackNavigator();

const styles = StyleSheet.create({
  screenContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
  },
  button: {
    width: 200,
    height: 100,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonContainer: {
    flexWrap: 'wrap',
  },
});

const numberOfScreens = 4;

const colors = generateRandomColors(numberOfScreens);

const Screen = ({navigation, route}: {navigation: any; route: any}) => {
  const {id} = route.params;
  return (
    <View style={[styles.screenContainer, {backgroundColor: colors[id]}]}>
      <Text style={styles.text}>SCREEN {id}</Text>
      <View style={styles.buttonContainer}>
        {colors.map((color, buttonId) => (
          <TouchableOpacity
            onPress={() => navigation.navigate('Screen' + buttonId)}>
            <View style={[styles.button, {backgroundColor: color}]}>
              <Text>Go to screen #{buttonId}</Text>
            </View>
          </TouchableOpacity>
        ))}
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <View style={[styles.button, {backgroundColor: 'white'}]}>
            <Text>{'<- Go back'}</Text>
          </View>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const screenOptions = {animationEnabled: true};
export const App = () => (
  <NavigationContainer>
    <Stack.Navigator screenOptions={screenOptions} detachInactiveScreens>
      {colors.map((_, id) => (
        <Stack.Screen
          key={id}
          name={'Screen' + id}
          component={Screen}
          initialParams={{id}}
          options={screenOptions}
        />
      ))}
    </Stack.Navigator>
  </NavigationContainer>
);

Native stack example

Add the following dependencies:

Copied to clipboard.

"dependencies": {
      ...
      "@amazon-devices/react-navigation__native-stack": "~7.0.0",
      "@amazon-devices/react-navigation__native": "~7.0.0",
      "@amazon-devices/react-native-screens": "~2.0.0",
      "@amazon-devices/react-native-safe-area-context": "~2.0.0",
      ...
}

Paste this code in the App.tsx file:

Copied to clipboard.

import {enableFreeze, enableScreens} from '@amazon-devices/react-native-screens';
import {createNativeStackNavigator} from '@amazon-devices/react-native-screens/native-stack';
import {NavigationContainer} from '@amazon-devices/react-navigation__native';
import * as React from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';

function generateRandomColors(n: number): string[] {
  const generatedColors: string[] = [];

  for (let i = 0; i < n; i++) {
    const red = Math.floor(Math.random() * 128 + 64);
    const green = Math.floor(Math.random() * 128 + 64);
    const blue = Math.floor(Math.random() * 128 + 64);
    const hex = `#${red.toString(16).padStart(2, '0')}${green
      .toString(16)
      .padStart(2, '0')}${blue.toString(16).padStart(2, '0')}`;
    generatedColors.push(hex);
  }

  return generatedColors;
}

enableScreens();
enableFreeze();

const Stack = createNativeStackNavigator();

const styles = StyleSheet.create({
  screenContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
  },
  button: {
    width: 200,
    height: 100,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonContainer: {
    flexWrap: 'wrap',
  },
});

const numberOfScreens = 4;

const colors = generateRandomColors(numberOfScreens);

const Screen = ({navigation, route}: {navigation: any; route: any}) => {
  const {depth, id} = route.params;
  return (
    <View
      style={[
        styles.screenContainer,
        {backgroundColor: colors[id], margin: 20 * depth},
      ]}>
      <Text style={styles.text}>SCREEN {id}</Text>
      <View style={styles.buttonContainer}>
        {colors.map((color, buttonId) => (
          <TouchableOpacity
            onPress={() =>
              navigation.navigate('Screen' + buttonId, {depth: depth + 1})
            }>
            <View style={[styles.button, {backgroundColor: color}]}>
              <Text>Go to screen #{buttonId}</Text>
            </View>
          </TouchableOpacity>
        ))}
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <View style={[styles.button, {backgroundColor: 'white'}]}>
            <Text>{'<- Go back'}</Text>
          </View>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const screenOptions = {presentation: 'transparentModal', headerShown: false};

export const App = () => (
  <NavigationContainer>
    <Stack.Navigator screenOptions={screenOptions}>
      {colors.map((_, id) => (
        <Stack.Screen
          key={id}
          name={'Screen' + id}
          component={Screen}
          initialParams={{id, depth: 0}}
          options={screenOptions}
        />
      ))}
    </Stack.Navigator>
  </NavigationContainer>
);

Bottom tabs example

Add the following dependencies:

Copied to clipboard.

"dependencies": {
      ...
      "@amazon-devices/react-navigation__bottom-tabs": "~7.0.0",
      "@amazon-devices/react-navigation__native": "~7.0.0",
      "@amazon-devices/react-native-screens": "~2.0.0",
      ...
}

Paste this code in the App.tsx file:

Copied to clipboard.

import { enableScreens } from '@amazon-devices/react-native-screens';
import { createBottomTabNavigator } from '@amazon-devices/react-navigation__bottom-tabs';
import { NavigationContainer } from '@amazon-devices/react-navigation__native';
import * as React from 'react';
import { Text, TouchableOpacity,View } from 'react-native';

enableScreens();

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

function SettingsScreen() {
  const [text, setText] = React.useState("Press me to check if touches work");
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity onPress={() => setText("Touching works!")}>
        <View style={{ width: 200, height: 200, backgroundColor: "skyblue" }}>
          <Text>{text}</Text>
        </View>
      </TouchableOpacity>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator detachInactiveScreens>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Material bottom tabs example

Add the following dependencies:

Copied to clipboard.

"dependencies": {
      ...
      "@amazon-devices/react-navigation__material-bottom-tabs": "~7.0.0",
      "@amazon-devices/react-navigation__native": "~7.0.0",
      "@amazon-devices/react-native-screens": "~2.0.0",
      "@amazon-devices/react-native-safe-area-context": "~2.0.0",
      "react-native-paper": "4.12.1"
      ...
}

Paste this code in the App.tsx file:

Copied to clipboard.

import { enableFreeze, enableScreens } from '@amazon-devices/react-native-screens';
import { createMaterialBottomTabNavigator } from '@amazon-devices/react-navigation__material-bottom-tabs';
import { NavigationContainer } from '@amazon-devices/react-navigation__native';
import * as React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';

enableScreens();
enableFreeze();

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

function SettingsScreen() {
  const [text, setText] = React.useState("Press me to check if touches work");
  return (
    <View>
      <TouchableOpacity onPress={() => setText("Touching works!")}>
        <View style={{ width: 200, height: 200, backgroundColor: "skyblue" }}>
          <Text>{text}</Text>
        </View>
      </TouchableOpacity>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab =
  createMaterialBottomTabNavigator();

export const App = () => {
  return (
    <View style={{flex: 1}}>
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
    <View style={{flex: 1}}></View>
    </View>
  );
}

Material top tabs example

Add the following dependencies:

Copied to clipboard.

"dependencies": {
      ...
      "@amazon-devices/react-navigation__material-top-tabs": "~7.0.0",
      "@amazon-devices/react-navigation__native": "~7.0.0",
      "@amazon-devices/react-native-screens": "~2.0.0"
      ...
}

Paste this code in the App.tsx file:

Copied to clipboard.

import { enableFreeze, enableScreens } from '@amazon-devices/react-native-screens';
import { createMaterialTopTabNavigator } from '@amazon-devices/react-navigation__material-top-tabs';
import { NavigationContainer } from '@amazon-devices/react-navigation__native';
import * as React from 'react';
import { Text, TouchableOpacity,View } from 'react-native';

enableScreens();
enableFreeze();

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

function SettingsScreen() {
  const [text, setText] = React.useState("Press me to check if touches work");
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity onPress={() => setText("Touching works!")}>
        <View style={{ width: 200, height: 200, backgroundColor: "skyblue" }}>
          <Text>{text}</Text>
        </View>
      </TouchableOpacity>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab =
createMaterialTopTabNavigator();

export const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Drawer example

Add the following dependencies:

Copied to clipboard.

"dependencies": {
      ...
      "@amazon-devices/react-native-gesture-handler": "~2.0.0",
      "@amazon-devices/react-native-reanimated": "~2.0.0",
      "@amazon-devices/react-navigation__drawer": "~7.0.0",
      "@amazon-devices/react-navigation__native": "~7.0.0",
      ...
}

Add the reanimated plugin to babel.config.js:

Copied to clipboard.

module.exports = {
  presets: [...],
  plugins: ['@amazon-devices/react-native-reanimated/plugin'] // add it here
};

Reset metro cache before running your application:

Copied to clipboard.

npm start -- --reset-cache

Paste this code in the App.tsx file:

Copied to clipboard.

import {GestureHandlerRootView} from '@amazon-devices/react-native-gesture-handler';
import {createDrawerNavigator} from '@amazon-devices/react-navigation__drawer';
import {NavigationContainer} from '@amazon-devices/react-navigation__native';
import React, {useState} from 'react';
import {Text, TouchableOpacity, View} from 'react-native';

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

function SettingsScreen() {
  const [text, setText] = useState('Press me to check if touches work');
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <TouchableOpacity onPress={() => setText('Touching works!')}>
        <View style={{width: 200, height: 200, backgroundColor: 'skyblue'}}>
          <Text>{text}</Text>
        </View>
      </TouchableOpacity>
      <Text>Settings!</Text>
    </View>
  );
}

const Drawer = createDrawerNavigator();

export const App = () => (
  <GestureHandlerRootView style={{flex: 1, backgroundColor: 'white'}}>
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home" detachInactiveScreens={false}>
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Settings" component={SettingsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  </GestureHandlerRootView>
);

APIs supported on Vega

React-Navigation library on Vega adds support for all available APIs in the React-Navigation v6.

Navigator types

Navigation type	Description
Stack Navigator	Transitions your app between screens. Each new screen is placed on top of a stack.
Drawer Navigator	Renders a navigation drawer on the side of the screen, which can be opened and closed with gestures.
Bottom Tabs Navigator	A simple tab bar at the bottom of the screen that lets you switch between different routes.
Material Bottom Tabs Navigator	A material-design themed tab bar on the bottom of the screen that lets you switch between different routes with animation. This bar wraps the `BottomNavigation` component from `react-native-paper`.
Material Top Tabs Navigator	A material-design themed tab bar on the top of the screen that lets you switch between different routes by tapping the tabs or swiping horizontally. This bar wraps the `react-native-tab-view` package.

Components

Component Name	Description
NavigationContainer	Manages your app state and links your top-level navigator to the app environment.
ServerContainer	Provides utilities to render your app on a server with the correct navigation state.
Group	Groups several screens inside a navigator.
Screen	Configures various aspects of screens inside a navigator. A Screen component is returned as one of the attributes from a `createXNavigator` function.
Link	Renders a component that can navigate to a screen on a press. Renders an `<a>` tag when using on the Web and uses a `Text` component on other platforms.

Not supported on Vega

flipper-plugin-react-navigation

Known issues

Material bottom tabs

A component on the second screen is unmounted after navigating back and forth.

Safe area of context

Referenced packages use the @amazon-devices/keplerscript-react-native-safe-area-context library for updated types. Do not directly consume this library.

Supported versions

Package name	Amazon NPM library version	Vega OS build number	Vega SDK version	Release notes
`@amazon-devices/react-navigation__bottom-tabs`	7.0.0+6.5.10	`OS 1.1 (201010438050)`	0.20	Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
`@amazon-devices/react-navigation__bottom-tabs`	7.0.0+6.5.10	`OS 1.1 (1001010443450)`	0.21
`@amazon-devices/react-navigation__core`	7.0.0+6.4.10	`OS 1.1 (201010438050)`	0.20	Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
`@amazon-devices/react-navigation__core`	7.0.0+6.4.10	`OS 1.1 (1001010443450)`	0.21
`@amazon-devices/react-navigation__devtools`	7.0.0+6.0.20	`OS 1.1 (201010438050)`	0.20	Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
`@amazon-devices/react-navigation__devtools`	7.0.0+6.0.20	`OS 1.1 (1001010443450)`	0.21
`@amazon-devices/react-navigation__drawer`	7.0.0+6.6.5	`OS 1.1 (201010438050)`	0.20	Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
`@amazon-devices/react-navigation__drawer`	7.0.0+6.6.5	`OS 1.1 (1001010443450)`	0.21
`@amazon-devices/react-navigation__elements`	7.0.0+1.3.20	`OS 1.1 (201010438050)`	0.20	Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
`@amazon-devices/react-navigation__elements`	7.0.0+1.3.20	`OS 1.1 (1001010443450)`	0.21
`@amazon-devices/react-navigation__material-bottom-tabs`	7.0.0+6.2.18	`OS 1.1 (201010438050)`	0.20	Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
`@amazon-devices/react-navigation__material-bottom-tabs`	7.0.0+6.2.18	`OS 1.1 (1001010443450)`	0.21
`@amazon-devices/react-navigation__material-top-tabs`	7.0.0+6.6.5	`OS 1.1 (201010438050)`	0.20	Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
`@amazon-devices/react-navigation__material-top-tabs`	7.0.0+6.6.5	`OS 1.1 (1001010443450)`	0.21
`@amazon-devices/react-navigation__native`	7.0.0+6.9.15	`OS 1.1 (201010438050)`	0.20	Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
`@amazon-devices/react-navigation__native`
`@amazon-devices/react-navigation__native-stack`	7.0.0+6.3.19	`OS 1.1 (201010438050)`	0.20	Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
`@amazon-devices/react-navigation__native-stack`	7.0.0+6.3.19	`OS 1.1 (1001010443450)`	0.21
`@amazon-devices/react-navigation__react-native-tab-view`	7.0.0+3.4.4	`OS 1.1 (201010438050)`	0.20	Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
`@amazon-devices/react-navigation__react-native-tab-view`	7.0.0+3.4.4	`OS 1.1 (1001010443450)`	0.21
`@amazon-devices/react-navigation__routers`	7.0.0+6.1.9	`OS 1.1 (201010438050)`	0.20	Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
`@amazon-devices/react-navigation__routers`	7.0.0+6.1.9	`OS 1.1 (1001010443450)`	0.21
`@amazon-devices/react-native-safe-area-of-context`	7.0.0+3.2.0	`OS 1.1 (201010438050)`	0.20	Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
`@amazon-devices/react-native-safe-area-of-context`	7.0.0+3.2.0	`OS 1.1 (1001010443450)`	0.21
`@amazon-devices/react-navigation__stack`	7.0.0+6.9.15	`OS 1.1 (201010438050)`	0.20	Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
`@amazon-devices/react-navigation__stack`	7.0.0+6.9.15	`OS 1.1 (1001010443450)`	0.21

Vega previously released an older version of the react-navigation library for Vega OS called react-navigation version 2.0.0:

"@amazon-devices/react-navigation__bottom-tabs": "~2.0.0"
"@amazon-devices/react-navigation__core": "~2.0.0"
"@amazon-devices/react-navigation__devtools": "~2.0.0"
"@amazon-devices/react-navigation__drawer": "~2.0.0"
"@amazon-devices/react-navigation__elements": "~2.0.0"
"@amazon-devices/react-navigation__material-bottom-tabs": "~2.0.0"
"@amazon-devices/react-navigation__material-top-tabs": "~2.0.0"
"@amazon-devices/react-navigation__native": "~2.0.0"
"@amazon-devices/react-navigation__native-stack": "~2.0.0"
"@amazon-devices/react-navigation__react-native-tab-view": "~2.0.0"
"@amazon-devices/react-navigation__routers": "~2.0.0"
"@amazon-devices/react-navigation__stack": "~2.0.0"

Existing users from the Vega private beta can continue to utilize these experimental features at their discretion. Documentation for react-navigation version 2.0.0 is not currently accessible for new developers.

Additional resources

For information on other libraries, see Supported Third-Party Libraries and Services.

Last updated: Oct 30, 2025

react-navigation

Installation

Examples

Stack example

Native stack example

Bottom tabs example

Material bottom tabs example

Material top tabs example

Drawer example

APIs supported on Vega

Navigator types

Components

Not supported on Vega

Known issues

Material bottom tabs

Safe area of context

Supported versions

react-navigation version 2.0.0

Additional resources