Tab Navigator (Bottom Tabs) in React Native - UI Render Trace

Component - Tab Navigator (Bottom Tabs)

This component creates a bottom tab navigation bar in a React Native app. It lets users switch between different screens by tapping icons or labels at the bottom of the screen.

Widget Tree

TabNavigator
├─ TabBar
│  ├─ TabItem (Home)
│  ├─ TabItem (Search)
│  └─ TabItem (Profile)
└─ ScreenContainer
   ├─ HomeScreen (when Home tab active)
   ├─ SearchScreen (when Search tab active)
   └─ ProfileScreen (when Profile tab active)

The TabNavigator is the main container. It has a TabBar at the bottom with three TabItems labeled Home, Search, and Profile. Above the TabBar is the ScreenContainer that shows the screen matching the selected tab.

Render Trace - 4 Steps

Step 1: TabNavigator

Step 2: TabBar

Step 3: TabItem (Home)

Step 4: ScreenContainer

State Change - Re-render

Trigger:User taps the Search tab in the bottom TabBar

Before

Active tab is Home, HomeScreen is visible

→

After

Active tab changes to Search, SearchScreen is visible

Re-renders:TabNavigator subtree re-renders: TabBar updates active tab highlight, ScreenContainer switches to SearchScreen

UI Quiz - 3 Questions

What happens visually when you tap a different tab in the bottom TabBar?

A The screen content changes to the selected tab's screen and the tab highlight moves.

B Only the tab label changes color but the screen content stays the same.

C The entire app reloads and shows the first tab again.

D Nothing changes visually until you swipe the screen.

Key Insight

Bottom tab navigation is a common pattern in mobile apps to let users switch between main sections easily. The TabBar stays visible at the bottom, and tapping a tab updates the screen content and highlights the active tab. This keeps navigation simple and intuitive.