0PricingLogin
React Native Academy · Lesson

Bottom Tab Navigator

Create a bottom tab navigator with three tabs, customize each tab's icon using a vector icon library, and configure the active tint color.

What is a Bottom Tab Navigator?

A bottom tab navigator renders a tab bar at the bottom of the screen with one tab per registered screen. Tapping a tab switches to that screen. This pattern is very common in mobile apps (Instagram, Twitter, Airbnb) and is provided by the @react-navigation/bottom-tabs package.

Installing the Bottom Tabs Package

Install the bottom tabs navigator package separately from the React Navigation core. If you are using Expo, also make sure react-native-screens and react-native-safe-area-context are already installed from the previous setup step.

npm install @react-navigation/bottom-tabs

All lessons in this course

  1. Installing and Configuring React Navigation
  2. Navigating Between Screens and Passing Params
  3. Bottom Tab Navigator
  4. Drawer Navigator and Nested Navigators
← Back to React Native Academy