react-navigation/material-bottom-tabs set background through theme

[lasharela]

My react native app is wrapped by PaperProvider and for most components, it works.

import {DefaultTheme} from 'react-native-paper';

const theme = {
  ...DefaultTheme,
  roundness: 2,
  colors: {
    ...DefaultTheme.colors,
    primary: '#FF2968',
    accent: '#54FFF3',
  },
};

export default theme;

That's how my theme.js looks like and

Everything looks fine except react-navigation/material-bottom-tabs

import React from 'react';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
import {Icon} from '@components';

import ScreenHome from '@screens/ScreenHome';
import ScreenSettings from '@screens/ScreenSettings';

const Tab = createMaterialBottomTabNavigator();
const TabNavigation = () => {
  return (
    <Tab.Navigator
      shifting={true}
      sceneAnimationEnabled={false}
      initialRouteName="Feed"
      activeColor="#fff">
      <Tab.Screen
        name="Home"
        component={ScreenHome}
        options={{
          activeColor: '#ff0',
          tabBarIcon: ({color}) => (
            <Icon name="activity" type="Feather" size={30} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name="Settings"
        component={ScreenSettings}
        options={{
          tabBarIcon: 'message-text-outline',
        }}
      />
    </Tab.Navigator>
  );
};

export default TabNavigation;

Based on documentation:
By default Bottom navigation uses primary color as a background, in dark theme with adaptive mode it will use surface colour instead. See Dark Theme for more informations

But it's blue anyway.

What I'm doing wrong?

[satya164]

For React Navigation, you need to use React Navigation's theming system https://reactnavigation.org/docs/themes/

[louiechristie]

Hi @satya164

If you are not going to make material-bottom-tabs work with react-native-paper theming then this documentation needs updating:
https://reactnavigation.org/docs/material-bottom-tab-navigator/#using-with-react-native-paper-optional

Because it currently says:

You can use the theming support in react-native-paper to customize the material bottom navigation

[sudhiryadav]

You just need to use <NavigationContainer theme={theme}> where

import { DarkTheme, DefaultTheme} from 'react-native-paper';
const theme = {
  ...DarkTheme
};

[FanchenBao]

For @react-navigation/material-bottom-tabs, we cannot directly apply theme from react-native-paper directly on NavigationContainer. According to the doc, the theme has to apply to the Provider from react-native-paper. See here for an example.