react-navigation - Amazon Vega Docs

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 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 Vega for which it is built. When you up level the version of Vega with which your app is built, it a best practice to also uplevel the version of the library on which it is dependent.

Documentation

Check out our dedicated documentation page for info about this library, API reference and more.

Installation

Add dependencies in package.json file for all packages you need. Select the tab for your React Native version. You won’t need all of the packages listed below, so include a subset of packages you need in your application.

React Native 0.72
React Native 0.83

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

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

You may add @amazon-devices/react-native-screens dependency for unmounting screens that are not visible.

React Native 0.72
React Native 0.83

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

"dependencies": {
      ...
      "@amazon-devices/react-native-screens": "~3.0.0"
      ...
}

Reinstall dependencies using npm install command.

Examples

Stack Example:

You need to add following dependencies:

React Native 0.72
React Native 0.83

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

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

Paste this code in App.tsx file:

import {enableFreeze, enableScreens} from '@amazon-devices/react-native-screens';
import {NavigationContainer} from '@amazon-devices/react-navigation__native';
import {createStackNavigator, StackNavigationOptions} 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: StackNavigationOptions = { animation: 'default' };
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:

React Native 0.72
React Native 0.83

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

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

Paste this code in App.tsx file:

import {enableFreeze, enableScreens} from '@amazon-devices/react-native-screens';
import {createNativeStackNavigator} from '@amazon-devices/react-navigation__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 = {
  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:

React Native 0.72
React Native 0.83

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

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

Paste this code in 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 Top Tabs Example:

You need to add following dependencies:

React Native 0.72
React Native 0.83

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

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

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

You need to add following dependencies:

React Native 0.72
React Native 0.83

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

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

Add reanimated plugin to babel.config.js:

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

Reset metro cache before running application:

npm start -- --reset-cache

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

Known issues

API 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	Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack.
Native Stack Navigator	Native Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack, using the Native APIs.
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

Navigation library has some exceptions in terms of API support.

flipper-plugin-react-navigation is not supported on Vega platform yet.

Additional resources

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

​Documentation

​Installation

​Examples

​Stack Example:

​Native Stack Example:

​Bottom Tabs Example:

​Material Top Tabs Example:

​Drawer Example:

​Known issues

​API supported on Vega

​Navigator types

​Components

​Not Supported on Vega

​Additional resources

Documentation

Installation

Examples

Stack Example:

Native Stack Example:

Bottom Tabs Example:

Material Top Tabs Example:

Drawer Example:

Known issues

API supported on Vega

Navigator types

Components

Not Supported on Vega

Additional resources