CS325 - Mobile Software

Development
Lab 6

Nested Navigation , Prop Navigation &

CustomDrawerContent

Sahar Sarraj – Prof. Bochra Khiari

2024-2025

1
 I. Nested Navigation ( Recap )

An important concept in react native is nesting navigators which means rendering a navigator
inside a screen of another navigator, for example as seen in Lab 5 we nested a Tab navigator
inside a Drawer navigator inside a Stack navigation. See figures 1 and 2.

Sign in Screen Drawer Screen Tab Navigation Screen

Figure 1: Screens from Lab 5

Figure 2: Code App.js from Lab 5

In the code developed during lab 5, the App.js component includes a Stack Navigator. This Stack
Navigator sets the SignIn screen as the initial route and then navigates to the Drawer Navigation.

2
The Drawer Navigation then invokes the tab navigation. So here we have a tab navigator nested
inside a drawer navigator nested inside a stack navigation.

 Stack.Navigator
o SignIn
o DrawNavigation
 Home: TabNavigation
 All Profiles
 Top 10
 Settings
 Logout

When nesting navigators, there are some things to keep in mind:

1. Each navigator keeps its own navigation history:

For example, when you press the back button inside a screen in a nested stack navigator, it'll
go back to the previous screen inside the nested stack even if there's another navigator as the
parent.

2. Each navigator has its own options:

For example, specifying a title option in a screen nested in a child navigator won't affect the
title shown in a parent navigator.

3. Each screen in a navigator has its own params:

For example, any params passed to a screen in a nested navigator are in the route prop of that
screen and aren't accessible from a screen in a parent or child navigator.

4. Parent navigator's UI is rendered on top of child navigator:

For example, when you nest a stack navigator inside a drawer navigator, you'll see that the
drawer appears above the stack navigator's header. However, if you nest the drawer navigator
inside a stack, the drawer will appear below the header of the stack. This is an important
point to consider when deciding how to nest your navigators.

³ https://reactnavigation.org/docs/nesting-navigators

3
 II. Prop navigation

This example is taken from Lab 5. Inside the screen login we defined a pressable component that
represents the button login. The onPress is a prop used with components like Pressable to define
an action that should be executed when the user presses the component. When the "Log In" text
is pressed, the function is called. It uses the navigation object to navigate to a specific screen
named "DrawNavigation" while passing along a prop email.

Figure 3: Pressable component defined inside the SignIn Screen

The DrawNavigation component receives props as its argument, specifically navigation and
route. Each screen component in your app is provided with the navigation and route props
automatically.

1. Navigation prop: This prop contains various convenience functions that dispatch
navigation actions. Such as
a. Navigate: go to another screen.
b. goBack: close the active screen and move back in the stack.
2. Route prop: the route object provides information about the current route such as:
a. key: A unique key for each route (automatically generated). Useful for identifying a
screen.
b. params: An optional object containing the data passed during navigation (e.g., the
email from the SignIn screen to the DrawNavigation stack screen )

To read the params you use the route.params inside a screen

Figure 4: Access the email prop using route inside the DrawNavigation component.

Useful links

1. Navigation prop: https://reactnavigation.org/docs/navigation-prop/

4
2. Passing parameters to routes: https://reactnavigation.org/docs/params/
 III. Custom DrawerContent
In this step, we will customize the drawerContent of the Drawer Navigator to display the email
passed from the SignIn screen. We will use route.params to access the passed email in the
Custom Drawer.

1. Step 1: Navigate to the Drawer with Parameters (Done in Previous Lab)

In the SignIn screen, we already navigated to DrawNavigation and passed the email parameter
like so:

2. Step 2: Create Your Own Custom Drawer Content

We’ll define a separate function for CustomDrawerContent. This function will receive email as
a prop and use DrawerItemList to display the existing navigation items, along with our custom
welcome <Text> message at the top.

Explanation of Props:

5
  email: Passed manually to display in the custom welcome message.
 props (state, navigation, descriptors): These are automatically provided by
Drawer.Navigator and are essential for rendering navigation items with
DrawerItemList.( without them, the custom drawer no longer “knows about” the
drawer items that we already created --> try not passing them , what do you notice ?)

3. Step 3: Use the Custom Drawer Content in the Drawer Navigator

In our DrawNavigation component, we extract the email from route.params . We then pass it as
a prop to CustomDrawerContent, along with the default props (state, navigation, descriptors),

4. Step 4: Add your Logout Button :

Now, place your "Log Out" button inside your CustomDrawerContent, after the
DrawerItemList component. ( you can use a Pressable or TouchableOpacity for more style
customization control )
This ensures it appears below the list of DrawerItemList. Here’s how the final order should
look like to you:

6
 5. Step 5: Customize Your Custom Drawer :

Feel free to personalize your drawer, you can for instance :

 Add an avatar placeholder image at the top of your drawer.

 Populate the DrawerItemList with additional items such as "About Us," "Help &
Support" or any other items you'd like to include in your app.