Custom tab bars in React Native - UI Render Trace

Component - Custom tab bars

This UI component shows a custom tab bar at the bottom of the screen. It lets users switch between different screens by tapping on labeled icons. The custom tab bar is styled differently from the default, with unique colors and layout.

Widget Tree

View (root)
├─ View (screen content)
└─ View (custom tab bar)
   ├─ TouchableOpacity (Tab 1)
   │  ├─ Icon
   │  └─ Text (Label 1)
   ├─ TouchableOpacity (Tab 2)
   │  ├─ Icon
   │  └─ Text (Label 2)
   └─ TouchableOpacity (Tab 3)
      ├─ Icon
      └─ Text (Label 3)

The root View holds the whole screen. Inside it, the main screen content is shown above. At the bottom, a View acts as the custom tab bar. It contains three touchable tabs, each with an icon and a label stacked vertically.

Render Trace - 5 Steps

Step 1: View (root)

Step 2: View (screen content)

Step 3: View (custom tab bar)

Step 4: TouchableOpacity (each tab)

Step 5: Icon and Text (inside tab)

State Change - Re-render

Trigger:User taps on a tab button

Before

Selected tab index is 0 (first tab)

→

After

Selected tab index changes to tapped tab index (e.g., 1 or 2)

Re-renders:The entire custom tab bar re-renders to update highlight on selected tab

UI Quiz - 3 Questions

What happens visually when a user taps a different tab?

A The entire screen background color changes

B The tapped tab icon and label change color to show selection

C The tab bar disappears

D Nothing changes visually

Key Insight

Custom tab bars let you create unique navigation styles that match your app's brand. Using touchable areas with icons and labels stacked vertically is a common pattern. Highlighting the selected tab clearly helps users know where they are. Remember to keep the tab bar accessible by ensuring touch targets are large enough and labels are clear.