Android Native Styling#

React Native Bottom Tabs uses native platform primitives to ensure a consistent look and feel across platforms. This means that the appearance of the tabs is controlled by the native platform styling.

Expo users#

Use Expo Config Plugin for Material 3 styling:

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

If you want to use Material2 styling, you can pass theme option to the plugin:

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

Available options:

• material2 - Material Design 2 styling
• material3 - Material Design 3 styling
• material3-dynamic - Material Design 3 styling with dynamic theming (Material You)

React Native Community CLI users#

Inside of your android/app/src/main/res/values/styles.xml file you can 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>

For Material 3 Dynamic theming (Material You), you can use Theme.Material3.DynamicColors.DayNight.NoActionBar:

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

If you want to use Material Design 2, you can extend from Theme.MaterialComponents.DayNight.NoActionBar:

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