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

If you use React Native version 0.75 or lower

For @react-native-community/cli users, open Podfile in ios folder and change minimum iOS version to 14.0 before pod install

- platform :ios, min_ios_version_supported
+ platform :ios, '14.0'

For Expo users, install expo-build-properties, open app.json file and update deploymentTarget for ios as below

{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "ios": {
            "deploymentTarget": "14.0"
          }
        }
      ]
    ],
  }
}

Expo

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

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

Then install expo-build-properties to enable static linking for iOS by adding "useFrameworks": "static" in the plugin.

npx expo install expo-build-properties

{
  "expo": {
    "plugins": [
       "react-native-bottom-tabs",
+      [
+        "expo-build-properties",
+        {
+          "ios": {
+            "useFrameworks": "static"
+          }
+        }
+      ]
+    ]
  }
}

Alternatively, you can avoid enabling static linking (which can cause problems with your existing packages) by adding the following in the expo-build-properties plugin.

{
  "expo": {
    "plugins": [
       "react-native-bottom-tabs",
+      [
+        "expo-build-properties",
+        {
+          "ios": {
+            "extraPods": [
+              { name: "SDWebImage", modular_headers: true }, // Work around for not enabling static framework, required for react-native-bottom-tabs
+              { name: "SDWebImageSVGCoder", modular_headers: true }
+            ]
+          }
+        }
+      ]
+    ]
  }
}

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.

To enable static linking for iOS, Open the ./ios/Podfile file and add the following:

use_frameworks! :linkage => :static

Example usage

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

ON THIS PAGE

Quick Start#

Create a new project with Native Tabs#

Installation#

Expo#