Amazon Developer

Console

as

Settings
Sign out
Notifications
Alexa
Amazon Appstore
AWS
Documentation
Support
Contact Us
My Cases

Console

as

Get Started
Design and Develop
Publish
Reference
Support

react-navigation version 7.0.0

React Navigation 7.0.0 is a robust navigation library for React Native applications, offering an easy and efficient way to 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 a web browser does. React Navigation provides this for you, along with the iOS, Android and Vega gestures and animations to transition between screens.

This is a system-deployed library and is available to React Native for Vega apps without a separate installation process. It is deployed as an autolinking library which your app links to at runtime. Compatibility is guaranteed only between the library and the version of React Native for Vega for which it is built.

When you up level the version of React Native for Vega with which your app is built, it a best practice to also uplevel the version of the library on which it is dependent.

Installation

  1. Add dependencies in package.json file for all packages you need. You may not need all of the packages listed below, so you should include a subset of a packages that you would 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",
     ...
}
  2. You may add @amazon-devices/react-native-screens dependency for unmounting screens that are not visible.

    Copied to clipboard.

     "dependencies": {
     ...
     "@amazon-devices/react-native-screens": "~2.0.0"
     ...
}
  3. Reinstall dependencies file using npm install command.

Examples

Stack example

You need to add 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 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

You need to add 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 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

You need to add 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 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

You need to add 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 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

You need to add 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 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

You need to add 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 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 application:

Copied to clipboard.

npm start -- --reset-cache

Paste this code in 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.

Navigation type Description
Stack Navigator Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack.
Drawer Navigator Drawer Navigator renders a navigation drawer on the side of the screen which can be opened and closed via gestures.
Bottom Tabs Navigator A simple tab bar on 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 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 wraps react-native-tab-view package.

Components

Component Name Description
NavigationContainer It is responsible for managing your app state and linking your top-level navigator to the app environment.
ServerContainer Provides utilities to render your app on server with the correct navigation state.
Group Components that are used to group several screens inside a navigator.
Screen Screen components are used to configure various aspects of screens inside a navigator. A Screen component is returned as one of the attributes from a createXNavigator functions.
Link Component that renders a component that can navigate to a screen on press. This renders an <a> tag when using on the Web and It uses a Text component on other platforms.

Not supported on Vega

The following are not supported on Vega at this time:

  • flipper-plugin-react-navigation

Known issues

Material bottom tabs

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

Safe area of context

The @amazon-devices/keplerscript-react-native-safe-area-context library is used by the referenced packages 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 2.0.0+6.5.10 OS 1.1 (201010435950) 0.19 Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
2.0.0+6.5.10 OS 1.1 (201010438050) 0.20
@amazon-devices/react-navigation__core 2.0.0+6.4.10 OS 1.1 (201010435950) 0.19 Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
2.0.0+6.4.10 OS 1.1 (201010438050) 0.20
@amazon-devices/react-navigation__devtools 2.0.0+6.0.20 OS 1.1 (201010435950) 0.19 Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
2.0.0+6.0.20 OS 1.1 (201010438050) 0.20
@amazon-devices/react-navigation__drawer 2.0.0+6.6.5 OS 1.1 (201010435950) 0.19 Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
2.0.0+6.6.5 OS 1.1 (201010438050) 0.20
@amazon-devices/react-navigation__elements 2.0.0+1.3.20 OS 1.1 (201010435950) 0.19 Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
2.0.0+1.3.20 OS 1.1 (201010438050) 0.20
@amazon-devices/react-navigation__material-bottom-tabs 2.0.0+6.2.18 OS 1.1 (201010435950) 0.19 Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
2.0.0+6.2.18 OS 1.1 (201010438050) 0.20
@amazon-devices/react-navigation__material-top-tabs 2.0.0+6.6.5 OS 1.1 (201010435950) 0.19 Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
2.0.0+6.6.5 OS 1.1 (201010438050) 0.20
@amazon-devices/react-navigation__native 2.0.0+6.9.15 OS 1.1 (201010435950) 0.19 Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
@amazon-devices/react-navigation__native-stack 2.0.0+6.9.15 OS 1.1 (201010435950) 0.19 Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
2.0.0+6.3.19 OS 1.1 (201010438050) 0.20
@amazon-devices/react-navigation__react-native-tab-view 2.0.0+3.4.4 OS 1.1 (201010435950) 0.19 Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
2.0.0+3.4.4 OS 1.1 (201010438050) 0.20
@amazon-devices/react-navigation__routers 2.0.0+6.1.9 OS 1.1 (201010435950) 0.19 Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
2.0.0+6.1.9 OS 1.1 (201010438050) 0.20
@amazon-devices/react-native-safe-area-of-context 2.0.0+3.2.0 OS 1.1 (201010435950) 0.19 Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
2.0.0+3.2.0 OS 1.1 (201010438050) 0.20
@amazon-devices/react-navigation__stack 2.0.0+6.3.19 OS 1.1 (201010435950) 0.19 Released as a system distributed library. Backward-compatibility checks are not required on the initial release.
2.0.0+6.9.15 OS 1.1 (201010438050) 0.20

Additional resources

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

Last updated: Sep 30, 2025

Follow us:
amazon_developer_logo

© 2010-2025, Amazon.com, Inc. or its affiliates. All Rights Reserved.

Terms

Amazon Developer Blog

Contact Us