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.

Practice

1. What is the main purpose of a Bottom Tab Navigator in a React Native app?

easy

A. To handle user authentication and login

B. To display a list of items in a vertical scroll

C. To allow users to switch between main screens using tabs at the bottom

D. To create pop-up alerts and notifications

Solution

1. Step 1: Understand the role of Bottom Tab Navigator

   The Bottom Tab Navigator provides a set of tabs at the bottom of the screen for easy navigation between main app screens.

2. Step 2: Compare with other options

   Options A, B, and D describe different app features unrelated to tab navigation.

3. Final Answer:

   To allow users to switch between main screens using tabs at the bottom -> Option C

4. Quick Check:

   Bottom Tab Navigator = Easy screen switching [OK]

Hint: Tabs at bottom mean screen switching, not lists or alerts [OK]

Common Mistakes:

• Confusing tab navigator with list views
• Thinking it handles login or alerts
• Mixing up navigation types

2. Which of the following is the correct way to wrap a Bottom Tab Navigator in React Native?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify correct wrapping order

   The Bottom Tab Navigator must be inside the NavigationContainer to manage navigation state properly.

2. Step 2: Check each option

   <NavigationContainer><Tab.Navigator></Tab.Navigator></NavigationContainer> correctly wraps Tab.Navigator inside NavigationContainer. <Tab.Navigator><NavigationContainer></NavigationContainer></Tab.Navigator> reverses the order, which is incorrect. <NavigationContainer><Stack.Navigator></Stack.Navigator></NavigationContainer> uses Stack.Navigator, not Tab.Navigator. <Tab.Screen><NavigationContainer></NavigationContainer></Tab.Screen> incorrectly wraps NavigationContainer inside Tab.Screen.

3. Final Answer:

   <NavigationContainer><Tab.Navigator></Tab.Navigator></NavigationContainer> -> Option B

4. Quick Check:

   NavigationContainer wraps Tab.Navigator [OK]

Hint: NavigationContainer always wraps the navigator component [OK]

Common Mistakes:

• Placing NavigationContainer inside Tab.Navigator
• Using Stack.Navigator instead of Tab.Navigator
• Wrapping NavigationContainer inside Tab.Screen

3. Given this code snippet, what label will appear on the second tab?

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    
      
      
    
  );
}

medium

A. Config

B. Settings

C. SettingsScreen

D. Home

Solution

1. Step 1: Check the tabBarLabel option for the second tab

   The second Tab.Screen has options={{ tabBarLabel: 'Config' }}, which overrides the default label.

2. Step 2: Understand default vs custom labels

   Without tabBarLabel, the label would be the name prop 'Settings'. But here, it is replaced by 'Config'.

3. Final Answer:

   Config -> Option A

4. Quick Check:

   tabBarLabel overrides name label [OK]

Hint: Look for tabBarLabel option to find displayed tab label [OK]

Common Mistakes:

• Using the name prop as label ignoring tabBarLabel
• Confusing component name with label
• Assuming default label always shows

4. Identify the error in this Bottom Tab Navigator code:

const Tab = createBottomTabNavigator();

function App() {
  return (
    
      
      
    
  );
}

medium

A. Tab.Screen name props must be numbers

B. Tab.Screen components must be outside Tab.Navigator

C. Tab.Navigator should not have children

D. Missing NavigationContainer wrapping the Tab.Navigator

Solution

1. Step 1: Check for NavigationContainer

   The code does not wrap Tab.Navigator inside NavigationContainer, which is required to manage navigation state.

2. Step 2: Verify Tab.Screen usage

   Tab.Screen components are correctly inside Tab.Navigator, and name props are strings, which is correct.

3. Final Answer:

   Missing NavigationContainer wrapping the Tab.Navigator -> Option D

4. Quick Check:

   NavigationContainer must wrap Tab.Navigator [OK]

Hint: Always wrap navigators inside NavigationContainer [OK]

Common Mistakes:

• Forgetting NavigationContainer
• Placing Tab.Screen outside Tab.Navigator
• Using invalid name prop types

5. You want to add icons to your Bottom Tab Navigator tabs using the tabBarIcon option. Which approach correctly adds a simple icon component to the tabs?

hard

A. Use }} /> inside Tab.Navigator

B. Add directly inside Tab.Navigator without options

C. Wrap Tab.Navigator inside <Icon> component

D. Set tabBarIcon as a string like 'home' in Tab.Screen options

Solution

1. Step 1: Understand tabBarIcon usage

   The tabBarIcon option expects a function returning a React element, typically an icon component.

2. Step 2: Evaluate each option

   Use <Tab.Screen options={{ tabBarIcon: () => <Icon name='home' /> }} /> inside Tab.Navigator correctly uses a function returning <Icon name='home' /> inside options. Add <Icon name='home' /> directly inside Tab.Navigator without options incorrectly places Icon directly inside Tab.Navigator. Wrap Tab.Navigator inside <Icon> component wraps Tab.Navigator inside Icon, which is invalid. Set tabBarIcon as a string like 'home' in Tab.Screen options sets tabBarIcon as a string, which is not supported.

3. Final Answer:

   Use <Tab.Screen options={{ tabBarIcon: () => <Icon name='home' /> }} /> inside Tab.Navigator -> Option A

4. Quick Check:

   tabBarIcon needs a function returning icon component [OK]

Hint: tabBarIcon must be a function returning an icon component [OK]

Common Mistakes:

• Placing icon components outside options
• Using strings instead of functions for tabBarIcon
• Wrapping navigator inside icon components