react-navigation - Amazon Vega Docs

Amazon Developer

Console

as

Settings

Sign out

Notifications

Alexa

Amazon Appstore

Ring

AWS

Documentation

Support

Contact Us

My Cases

Console

as

Vega Developer Docs

Get Started

Design and Develop

Publish

Reference

Support

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.

"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.

"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:

"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:

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:

"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:

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:

"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:

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:

"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:

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:

"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:

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:

"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 a reanimated plugin to babel.config.js:

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

Reset metro cache before running the application:

npm start -- --reset-cache

Paste this code in the App.tsx file:

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 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

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 modified on October 30, 2025