Create Stack Navigator

There are several types of navigation that can be setup in the app. We will be adding stack navigation via the StackNavigator component. This component keeps track of screens and the order they were selected.

Add NavigationContainer

Before we begin, we need to wrap our app in a NavigationContainer. NavigationContainer manages the navigation tree and contains the navigation state. This component must wrap all navigator types, regardless if you're using StackNavigator or not.

• Open App.tsx and import NavigationContainer from the Vega supported Navigation library.
• Remove the LandingScreen component and replace it with a NavigationContainer component.

import { NavigationContainer } from '@amazon-devices/react-navigation__native';

export const App = () => {
  return (
    <NavigationContainer>
    </NavigationContainer>
  );
}

Create a StackNavigator

Now that we have a NavigationContainer, let's add a StackNavigator.

• Import createStackNavigator from the KeplerScript React Navigation Stack library.
• Call createStackNavigator() before the App's return statement, and store the response in a variable called "Stack".

The createStackNavigator function returns an object containing 2 properties: Screen and Navigator. Both of them are React components used for configuring navigation.

The updated App.tsx code should look like this:

import * as React from 'react';
import { NavigationContainer } from '@amazon-devices/react-navigation__native';
import { createStackNavigator } from '@amazon-devices/react-navigation__stack';
import { LandingScreen } from './screens';

export const App = () => {
  const Stack = createStackNavigator();

  return (
    <NavigationContainer>
    </NavigationContainer>
  );
}

Add Screens to the StackNavigator

Now that we have a NavigationContainer and a Stack, let's add the LandingScreen and VideoDetailScreen to the stack. We'll need to start by importing the VideoDetailPage.

• Add the VideoDetailPage to the import statement for the screens.

import { LandingScreen, VideoDetailScreen } from './screens';

• Add a Stack.Navigator component under NavigationContainer.
• Add two Stack.Screen components under Stack.Navigator, with name and component props.
• Set the name and component props to the corresponding names of each component in screens, where the name is a string, and the component is an object.

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name='LandingScreen' component={LandingScreen}/>
    <Stack.Screen name='VideoDetailScreen' component={VideoDetailScreen}/>
  </Stack.Navigator>
</NavigationContainer>

Note that the name can be different from the name of the component. For example, you could use 'Landing' with a component of {LandingScreen}.

The updated App.tsx code now looks like this:

import * as React from 'react';
import { NavigationContainer } from '@amazon-devices/react-navigation__native';
import { createStackNavigator } from '@amazon-devices/react-navigation__stack';
import { LandingScreen, VideoDetailScreen } from './screens';

export const App = () => {
  const Stack = createStackNavigator();

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name='LandingScreen' component={LandingScreen}/>
        <Stack.Screen name='VideoDetailScreen' component={VideoDetailScreen}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Define a Theme

Let’s give our NavigationContainer a Theme, to give it some styling to ensure we keep the background color.

• Add DefaultTheme after NavigationContainer in the respective import statement.

import { NavigationContainer, DefaultTheme } from '@amazon-devices/react-navigation__native';

• Create a const called "AppTheme" inside the App function, using the code below.

const AppTheme = {
    ...DefaultTheme,
    colors: {
        ...DefaultTheme.colors,
        background: '#232F3E',
        text: 'white',
    }
};

We're calling ...DefaultTheme to copy the DefaultTheme into our AppTheme. We're overriding the colors style in the theme. However, we only care about overriding the background and text colors, so we've added ...DefaultTheme.colors to pick up the colors that we're not overriding.

• Pass our new theme to the NavigationContainer’s theme prop.

<NavigationContainer theme={AppTheme}>

• Refresh the app and see how it looks. You will notice a big white bar above our Header.

This is the default header for the StackNavigator. We can hide this by passing our Stack.Navigator a screenOptions prop and set it to {{ headerShown: false }}.

<Stack.Navigator screenOptions={{ headerShown: false }}>

The App.tsx code should now look like this:

import * as React from 'react';
import { NavigationContainer, DefaultTheme } from '@amazon-devices/react-navigation__native';
import { createStackNavigator } from '@amazon-devices/react-navigation__stack';
import { LandingScreen, VideoDetailScreen } from './screens';

export const App = () => {
  const Stack = createStackNavigator();

  const AppTheme = {
    ...DefaultTheme,
    colors: {
        ...DefaultTheme.colors,
        background: "#232F3E",
        text: "white",
    },
  };

  return (
    <NavigationContainer theme={AppTheme}>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name='LandingScreen' component={LandingScreen}/>
        <Stack.Screen name='VideoDetailScreen' component={VideoDetailScreen}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Navigation Basics

We can now wire up our screens using navigation. Before we do so, let's go over some basics.

The navigation object is passed to components and screens via the props object. All we need to do is destructure it in the parameters of the component/screen arrow functions to use it (e.g. { navigation }).

To navigate to another screen, we will call navigation.navigate, passing in the name of the screen we want to navigate to (e.g. navigation.navigate('LandingScreen')).

We can pass in additional parameters in an object with the fields and values we want to pass (e.g. navigation.navigate('LandingScreen', { param1: 1, param2: false, param3: []}). These additional paramaters are available through the route parameter, which is also available in props. In the screen or component receiving the parameters, we can desctructure the route object (e.g. { route }) and access the parameters through params (e.g. route.params.param1).

With this in mind, let's start wiring up navigation between screens.

Next