How to remove the active icon background in React Navigation Material Bottom Tab Navigator

Question

I'm having some styling issues with React Navigation Material Bottom Tabs Navigator. There's a background, which is automatically applied to the active tab, which I can't style (I've highlighted it in the below pic).

Tab Issue

Can anybody help? My code is as follows:

<Tab.Navigator
    initialRouteName="Home"
    labeled={false}
    shifting={false}
    activeColor="#333"
    inactiveColor="#999999"
    inactiveBackgroundColor='#000'
    barStyle={{
        paddingHorizontal: 10,
            backgroundColor: '#ffffff',
    }}
>
    <Tab.Screen
        name='Home'
        component={HomeScreen}
            options={{
                tabBarLabel: 'Home',
                tabBarIcon: ({ color }) => (
                    <MaterialCommunityIcons name="home" color={color} size={26} />
                ),
            }}
    />
</Tab.Navigator>

I have been through all of the React Navigation docs, but there's no mention.

Answer 1

OK, in case this helps out anyone else, I found out how to style the colour of the active tab. It can be themed with React Native Paper. First, wrap your route component in the Paper theme provider, and set a theme for the app:

import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { DefaultTheme } from './src/themes/defaultTheme'
import { Main } from './src/main';

const theme = {
    ...DefaultTheme,
};

export default function App() {
    return (
      <SafeAreaProvider>
        <PaperProvider theme={theme}>
          <Main />
        </PaperProvider>
      </SafeAreaProvider>
    );
}

I found the Native Paper default themes fiddly to get custom colours to work, so I created a custom theme myself. You'll find some great options do that here, in the dynamic theme colours section:

react-native-paper/theming.html#creating-dynamic-theme-colors

My custom theme file looks something like this:

export const DefaultTheme = {
  "colors": {
    "primary": "rgb(0, 104, 116)",
    "onPrimary": "rgb(255, 255, 255)",
    "primaryContainer": "rgb(151, 240, 255)",
    "onPrimaryContainer": "rgb(0, 31, 36)",
    "secondary": "rgb(74, 98, 103)",
    "onSecondary": "rgb(255, 255, 255)",
    "secondaryContainer": "rgb(205, 231, 236)",
    "onSecondaryContainer": "rgb(5, 31, 35)",
    etc...
  }
}

The secondaryContainer color is the active tab indicator background colour. Change it to whatever you want et voila! Happy coding.