Docs
Docs

Quick Start

Create a new project with Native Tabs

If you don't have an existing project, you can create a new Expo app using the following command:

npx create-expo-app@latest NativeTabs --template @bottom-tabs/expo-template

Installation

npm
yarn
pnpm
bun
npm install react-native-bottom-tabs

If you are going to use React Navigation / Expo Router Integration make sure to install @bottom-tabs/react-navigation.

npm
yarn
pnpm
bun
npm install @bottom-tabs/react-navigation

Expo

Add the library plugin in your app.json config file and create a new build.

  "expo": {
+   "plugins": ["react-native-bottom-tabs"]
  }
}
WARNING

This library is not supported in Expo Go.

React Native Community CLI users

Edit android/app/src/main/res/values/styles.xml to inherit from provided theme in order to customize the appearance of the native bottom tabs.

<resources>
- <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+ <style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
    <!-- … -->
  </style>
</resources>

Here you can read more about Android Native Styling.

Example usage

Please follow the guides below to integrate the library with your navigation library:

Need React or React Native expertise you can count on?

Let's talkLet's talk
Need to boost your app's performance?
We help React Native teams enhance speed, responsiveness, and efficiency.