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 2.0.0

React Navigation 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 might not need all of packages listed below, so you should include a subset of a packages that your app needs.

    Copied to clipboard.

     "dependencies": {
     ...
     "@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",
     ...
}
  2. You can 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:

Stack requires these dependencies:

Copied to clipboard.

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

Add the following code sample to your 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:

Native stack requires these dependencies:

Copied to clipboard.

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

Add the following code sample to your 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:

Bottom tabs requires these dependencies:

Copied to clipboard.

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

Add the following code sample to your 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:

Material bottom tabs requires these dependencies:

Copied to clipboard.

"dependencies": {
    ...
    "@amazon-devices/react-navigation__material-bottom-tabs": "~2.0.0",
    "@amazon-devices/react-navigation__native": "~2.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"
    ...
}

Add the following code sample to your 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:

Materical top tabs requires these dependencies:

Copied to clipboard.

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

Add the following code sample to your 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>
  );
}

API reference

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 uses a Text component on other platforms.

Implementation details

Unsupported components

flipper-plugin-react-navigation and react-navigation__native-stack are not supported on Vega platform.

Known issues

Material Bottom Tabs

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

Drawer

Buttons in drawer are not rendered - blank space inside drawer. This is known issue which will be fixed after react-navigation upgrade which will be integrated with @amazon-devices/react-native-reanimated.

Supported versions

package name package version @amazon-devices/react-native-kepler version
@amazon-devices/react-navigation__bottom-tabs 2.0.0+6.5.10 2.0.0+rn0.72.0
@amazon-devices/react-navigation__core 2.0.0+6.4.10 2.0.0+rn0.72.0
@amazon-devices/react-navigation__devtools 2.0.0+6.0.20 2.0.0+rn0.72.0
@amazon-devices/react-navigation__drawer 2.0.0+6.6.5 2.0.0+rn0.72.0
@amazon-devices/react-navigation__elements 2.0.0+1.3.20 2.0.0+rn0.72.0
@amazon-devices/react-navigation__material-bottom-tabs 2.0.0+6.2.18 2.0.0+rn0.72.0
@amazon-devices/react-navigation__material-top-tabs 2.0.0+6.6.5 2.0.0+rn0.72.0
@amazon-devices/react-navigation__native 2.0.0+6.1.9 2.0.0+rn0.72.0
@amazon-devices/react-navigation__react-native-tab-view 2.0.0+3.4.4 2.0.0+rn0.72.0
@amazon-devices/react-navigation__routers 2.0.0+6.1.9 2.0.0+rn0.72.0
@amazon-devices/react-navigation__stack 2.0.0+6.3.19 2.0.0+rn0.72.0

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