React Navigation

REACT NAVIGATION
In a web browser, you can link to different pages using an anchor (<a>) tag. When the user clicks
on a link, the URL is pushed to the browser history stack. When the user presses the back
button, the browser pops the item from the top of the history stack, so the active page is now the
previously visited page. React Native doesn't have a built-in idea of a global history stack like a
web browser does -- this is where React Navigation enters the story.
React Navigation's native stack navigator provides a way for your app to transition between
screens and manage navigation history. If your app uses only one stack navigator then it is
conceptually similar to how a web browser handles navigation state - your app pushes and pops
items from the navigation stack as users interact with it, and this results in the user seeing
different screens. A key difference between how this works in a web browser and in React
Navigation is that React Navigation's native stack navigator provides the gestures and
animations that you would expect on Android and iOS when navigating between routes in the
stack.
 REACT NAVIGATION
React Navigation is made up of some core utilities and those are
then used by navigators to create the navigation structure in your
app.
Detailed information on installing the necessary components for
using React Navigation is available at the link
https://reactnavigation.org/docs/getting-started/
 CREATING A NATIVE STACK NAVIGATOR​
createNativeStackNavigator is a function that returns an object containing 2 properties: Screen
and Navigator. Both of them are React components used for configuring the navigator. The
Navigator should contain Screen elements as its children to define the configuration for routes.

NavigationContainer is a component which manages our navigation tree and contains the
navigation state. This component must wrap all navigators structure. Usually, we'd render this
component at the root of our app, which is usually the component exported from App.js.
WRAPPING YOUR APP IN NAVIGATIONCONTAINER
 REACT NAVIGATION
If you run this code, you will see a screen with an empty navigation bar and a grey
content area containing your HomeScreen component . The styles you see for the
navigation bar and the content area are the default configuration for a stack navigator,
we'll learn how to configure those later.
The casing of the route name doesn't matter -- you can use lowercase home or
capitalized Home, it's up to you.
The only required configuration for a screen is the name and component props.
 CONFIGURING THE NAVIGATOR
All of the route
configuration is specified
as props to our navigator.
We haven't passed any
props to our navigator, so it
just uses the default
configuration.
Let's add a second screen
to our native stack
navigator and configure the
Home screen to render
first:
CONFIGURING THE NAVIGATOR
 CONFIGURING THE NAVIGATOR
Now our stack has two routes, a Home route and a Details route. A route can be
specified by using the Screen component. The Screen component accepts a name
prop which corresponds to the name of the route we will use to navigate, and a
component prop which corresponds to the component it'll render.
Here, the Home route corresponds to the HomeScreen component, and the Details
route corresponds to the DetailsScreen component. The initial route for the stack is
the Home route. Try changing it to Details and reload the app (React Native's Fast
Refresh won't update changes from initialRouteName, as you might expect), notice
that you will now see the Details screen. Then change it back to Home and reload
once more.
Note: The component prop accepts component, not a render function. Don't pass an inline function (e.g. component={() =>
<HomeScreen />}), or your component will unmount and remount losing all state when the parent component re-renders.
 SPECIFYING OPTIONS
Each screen in the
navigator can specify
some options for the
navigator, such as the
title to render in the
header. These options
can be passed in the
options prop for each
screen component:
SPECIFYING OPTIONS
Sometimes we will
want to specify the
same options for
all of the screens in
the navigator. For
that, we can pass a
screenOptions
prop to the
navigator.
SPECIFYING OPTIONS
 PASSING ADDITIONAL PROPS
Sometimes we might want to pass additional props to a screen. We can do that
with 2 approaches:
• Use React context and wrap the navigator with a context provider to pass data
to the screens (recommended).
• Use a render callback for the screen instead of specifying a component prop:

<Stack.Screen name="Home">
{props => <HomeScreen {...props} extraData={someData} />}
</Stack.Screen>
 SUMMARY
• 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 and Android
gestures and animations to transition between screens.
• Stack.Navigator is a component that takes route configuration as its children
with additional props for configuration and renders our content.
• Each Stack.Screen component takes a name prop which refers to the name of
the route and component prop which specifies the component to render for the
route. These are the 2 required props.
• To specify what the initial route in a stack is, provide an initialRouteName as
the prop for the navigator.
• To specify screen-specific options, we can pass an options prop to
Stack.Screen, and for common options, we can pass screenOptions to
Stack.Navigator
 MOVING BETWEEN SCREENS
The natural question at this point is: "how do I go from the Home route to the
Details route?“
We defined a native stack navigator with two routes (Home and Details), but
we didn't learn how to let a user navigate from Home to Details (although we
did learn how to change the initial route in our code).
NAVIGATING TO A NEW SCREEN
NAVIGATING TO A NEW SCREEN
NAVIGATING TO A NEW SCREEN
 NAVIGATING TO A NEW SCREEN
Let's break this down:
• navigation - the navigation prop is passed in to every screen component (definition)
in the native stack navigator.
• navigate('Details') - we call the navigate function (on the navigation prop — naming
is hard!) with the name of the route that we'd like to move the user to.
If we call navigation.navigate with a route name that we haven't defined in a navigator,
it'll print an error in development builds and nothing will happen in production builds.
Said another way, we can only navigate to routes that have been defined on our
navigator — we cannot navigate to an arbitrary component.
So we now have a stack with two routes: 1) the Home route 2) the Details route. What
would happen if we navigated to the Details route again, from the Details screen?
NAVIGATE TO A ROUTE MULTIPLE TIMES
NAVIGATE TO A ROUTE MULTIPLE TIMES
NAVIGATE TO A ROUTE MULTIPLE TIMES
 NAVIGATE TO A ROUTE MULTIPLE TIMES
If you run this code, you'll notice that when you tap "Go to Details... again"
that it doesn't do anything! This is because we are already on the Details
route. The navigate function roughly means "go to this screen", and if you are
already on that screen then it makes sense that it would do nothing.

Let's suppose that we actually want to add another details screen. This is
pretty common in cases where you pass in some unique data to each route
(more on that later when we talk about params!). To do this, we can change
navigate to push. This allows us to express the intent to add another route
regardless of the existing navigation history.
NAVIGATE TO A ROUTE MULTIPLE TIMES
NAVIGATE TO A ROUTE MULTIPLE TIMES
 NAVIGATE TO A ROUTE MULTIPLE TIMES
Each time you call
push we add a new
route to the
navigation stack.
When you call
navigate it first tries
to find an existing
route with that
name, and only
pushes a new
route if there isn't
yet one on the
stack.
 GOING BACK
The header provided by the native stack navigator will automatically include a
back button when it is possible to go back from the active screen (if there is
only one screen in the navigation stack, there is nothing that you can go back
to, and so there is no back button).

Sometimes you'll want to be able to programmatically trigger this behavior,

and for that you can use navigation.goBack();

On Android, React Navigation hooks in to the hardware back button and fires
the goBack() function for you when the user presses it, so it behaves as the
user would expect.
GOING BACK
GOING BACK
GOING BACK
 GOING BACK
Another common requirement is to be able to go back multiple screens -- for
example, if you are several screens deep in a stack and want to dismiss all of
them to go back to the first screen. In this case, we know that we want to go
back to Home so we can use navigate('Home') (not push! try that out and see
the difference). Another alternative would be navigation.popToTop(), which
goes back to the first screen in the stack.
GOING BACK
GOING BACK
GOING BACK
 SUMMARY
•navigation.navigate('RouteName') pushes a new route to the native stack
navigator if it's not already in the stack, otherwise it jumps to that screen.
•We can call navigation.push('RouteName') as many times as we like and it
will continue pushing routes.
•The header bar will automatically show a back button, but you can
programmatically go back by calling navigation.goBack(). On Android, the
hardware back button just works as expected.
•You can go back to an existing screen in the stack with
navigation.navigate('RouteName'), and you can go back to the first screen in
the stack with navigation.popToTop().
•The navigation prop is available to all screen components (components
defined as screens in route configuration and rendered by React Navigation
as a route).