Trouble styling the active icon background color in React Native Paper Bottom Tabs Navigator

Question

I was using @react-navigation/material-top-tabs before. I used createMaterialTopTabNavigator to set up a Bottom Navigation because I wanted the smooth swipe transition it provides, similar to the Material Top Navigator. However, unlike createBottomTabNavigator, Material Top doesn't have a keyboardHidesTabBar option, which means I can't automatically hide the tab bar when the keyboard opens.

Since I was having difficulties with the keyboard, I decided to use and implement Material Bottom Tabs Navigator instead. However, based on the docs, it has been moved to react-native-paper. Now that I am using React Native Paper's bottom navigation, I have used their template and modified it based on my previous settings.

While experimenting with the transition from material top tabs from React Navigation to React Native Paper bottom tabs navigator, I successfully implemented the structure/function. However, there's one thing I wasn't able to find to change and update, which is the background button of the icon that has a lavender color background when it is active. I can't find where I should apply the style or what I should be aiming for to make the changes.

Here's my code for the app stack I have created with these bottom tabs:

//other code and imports...
export default function AppStack() {

    //other code...

    return (
        <menuTab.Navigator
            initialRouteName="Home"
            screenOptions={{
                headerShown: false,
            }}
            tabBar={({ navigation, state, descriptors, insets }) => (
                <BottomNavigation.Bar
                    style={{
                        backgroundColor: 'white',
                        height: 60,
                        alignContent: 'center',
                        alignItems: 'center',
                    }}
                    activeColor={'black'}
                    inactiveColor={'#616161'}
                    navigationState={state}
                    safeAreaInsets={insets}
                    onTabPress={({ route, preventDefault }) => {
                        const event = navigation.emit({
                            type: 'tabPress',
                            target: route.key,
                            canPreventDefault: true,
                        });

                        if (event.defaultPrevented) {
                            preventDefault();
                        } else {
                            navigation.dispatch({
                                ...CommonActions.navigate(route.name, route.params),
                                target: state.key,
                            });
                        }
                    }}
                    renderIcon={({ route, focused, color }) => {
                        const { options } = descriptors[route.key];
                        if (options.tabBarIcon) {
                            return options.tabBarIcon({ focused, color, size: 24 });
                        }
                        return null;
                    }}
                />
            )}
        >
            <menuTab.Screen
                name="Home"
                component={HomeNavigator}
                options={{
                    tabBarLabel: () => { return null },
                    tabBarIcon: ({ color, focused }) => (
                        <Icon name={focused ? "news-filled" : "news"} color={color} size={30} />
                    ),
                }}
            />
            //other screens....
        </menuTab.Navigator>
    );
}
//other code...

Answer 1

Use theme prop.

<BottomNavigation.Bar              
    theme={{colors: {secondaryContainer: 'green'}}} // <---- Here
    activeColor={'black'}
    inactiveColor={'#616161'}
    navigationState={state}
    ...
/>

theme prop work with all the react-native-paper component.

More about here.