React Navigation

Question 1

createNativeStackNavigator

Answer 1

is a function that returns an object containing 2 properties: Screen and Navigator.

Both are React components used for configuring the navigator.

Question 2

NavigationContainer

Answer 2

is a component which manages our navigation tree and contains the navigation state.

The navigation container must wrap all navigators structure and is rendered at the root of our app, which is usually the component exported from App.js.

Question 3

Navigation State

Answer 3

is the state where React Navigation stores the navigation structure and history of the app.

Question 4

What does the navigation state look like?

Answer 4

const state = {
type: ‘stack’,
key: ‘stack-1’,
routeNames: [‘Home’, ‘Profile’,
‘Settings’],
routes: [
{ key: ‘home-1’, name:
‘Home’, params: { sortBy:
‘latest’ } },
{ key: ‘settings-1’, name:
‘Settings’ },
],
index: 1,
stale: false,
};

Question 5

Stack.Navigator

Answer 5

is a component that takes route configuration as its children with additional props for configuration and renders our content.

The Navigator should contain Screen elements as its children to define the configuration for routes.

Question 6

Stack.Screen

Answer 6

requires a name prop which refers to the name of the route

requires component prop which specifies the component to render for the route.