Nested navigators in React Native - UI Render Trace

Component - Nested navigators

This UI component shows how to use nested navigators in a React Native app. Nested navigators let you have one navigator inside another, like having tabs inside a stack. This helps organize screens and navigation flows clearly.

Widget Tree

NavigationContainer
├─ StackNavigator
│  ├─ HomeScreen
│  └─ ProfileNavigator
│     ├─ ProfileScreen
│     └─ SettingsScreen

The root is NavigationContainer that holds a StackNavigator. The StackNavigator has two main screens: HomeScreen and ProfileNavigator. ProfileNavigator is itself a nested navigator (like a stack or tabs) with ProfileScreen and SettingsScreen inside it.

Render Trace - 5 Steps

Step 1: NavigationContainer

Step 2: StackNavigator

Step 3: HomeScreen

Step 4: ProfileNavigator

Step 5: ProfileScreen

State Change - Re-render

Trigger:User taps 'Go to Profile' button on HomeScreen

Before

StackNavigator shows HomeScreen

→

After

StackNavigator shows ProfileNavigator with ProfileScreen

Re-renders:StackNavigator subtree including ProfileNavigator and its screens

UI Quiz - 3 Questions

What happens when the user taps 'Go to Profile' on HomeScreen?

A The app closes

B The app navigates to the nested ProfileNavigator showing ProfileScreen

C The HomeScreen reloads

D The app navigates to SettingsScreen directly

Key Insight

Nested navigators help organize complex navigation flows by grouping related screens inside their own navigator. This keeps navigation logic clear and makes the app easier to maintain.