React Native Bottom Tabs
Docs
Docs

Quick Start

Installation

npm
yarn
pnpm
bun
npm install react-native-bottom-tabs
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"]
  }
}

You also need to enable static linking for iOS by adding "useFrameworks": "static" in the expo-build-properties plugin.

{
  "expo": {
    "plugins": [
       "react-native-bottom-tabs",
+      [
+        "expo-build-properties",
+        {
+          "ios": {
+            "useFrameworks": "static"
+          }
+        }
+      ]
+    ]
  }
}
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: