Bottom Tab Navigator: Core Mobile Navigation
A Bottom Tab Navigator is the classic mobile UI for switching between top-level app sections. It lazily loads screens, mounting them only when first focused to save memory. Use it for primary navigation.
Why it exists
Mobile apps need a simple, persistent way for users to switch between a small number of primary sections. A tab bar at the bottom of the screen is a universally understood pattern that provides this top-level navigation without hiding it behind a menu.
The mental model
Think of a Tab Navigator as a set of persistent buttons at the bottom of your app. Each button corresponds to a major feature or screen, like 'Home', 'Search', or 'Profile'. Tapping a tab makes its associated screen visible while keeping the tab bar itself in place. Under the hood, it's a state machine that manages which screen is currently active.
How it works
You use the createBottomTabNavigator function from @react-navigation/bottom-tabs. This function returns a Navigator component that wraps your Screen components. A key performance feature is lazy initialization: screens are not mounted and rendered until a user navigates to them for the first time. By default (detachInactiveScreens: true), inactive screens are detached from the view hierarchy to conserve memory, integrating with react-native-screens.
When to use it
Use a Bottom Tab Navigator for the primary, top-level navigation of your app, typically with 3 to 5 distinct sections. It's ideal for letting users quickly switch between core functionalities that should always be accessible, such as a feed, messages, and user settings.
When not to use it
Avoid using a tab navigator for sequential steps in a flow, like a checkout process or a multi-page form; a Stack Navigator is more appropriate for that. If you have more than five top-level destinations, a Drawer Navigator might be a better choice to avoid cluttering the tab bar.
One canonical example
A common footgun is misunderstanding the back button behavior on Android. By default, pressing back returns the user to the first tab (backBehavior: 'firstRoute'). To make it behave like a web browser's back button, you must explicitly change this prop. For example, setting backBehavior: 'history' will take the user to the previously visited tab, providing a more intuitive navigation history for users who jump between tabs frequently.
Interview question
Which statement accurately describes a key performance optimization of the Bottom Tab Navigator?
- a.It pre-renders all tab screens in the background to ensure seamless transitions.
- b.It uses a single, dynamic component to display content for all tabs, reducing component tree complexity.
- c.It caches the state of all inactive tabs in memory to prevent data loss upon re-focus.
- d.It only mounts a screen when it is first focused and detaches inactive screens to conserve memory.Correct
Why? this is the answer
The Bottom Tab Navigator employs lazy initialization, mounting screens only when they are first focused, and detaches inactive screens to save memory. This is contrary to pre-rendering all screens, which would consume more resources upfront.
Just read this? Test yourself on what you have been reading.
Read the original → reactnavigation.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react native — each one lists the topics its interview covers.
See open roles