Not able to propagate theme to nested navigator expo react native paper on devices (web works)

Question

It is weird. My app on browser works perfectly, but on iOS simulator, and Expo Go, it does not:

And the problem seems to be only with the background color, as the colors for light theme are different:

But note that still the theme does not apply for the tab navigation itself. On web it does apply.

What I have is the Main component, that adds the PaperProvider:

import { Provider as PaperProvider } from 'react-native-paper';

import { NavigationContainer } from '@react-navigation/native';
import themes from './constants/themes';
import MainStackNavigation from './navigation/MainStackNavigation';
import { Provider } from 'react-redux';
import store from './store';

const Main = () => {
    const theme= 'dark';
    const _theme = themes[theme];
    const session = true;

    return (
        <PaperProvider theme={_theme}>
            <Provider store={store}>
                <NavigationContainer linking={ {prefixes: []}} theme={_theme}>
                    {session ? (
                        <MainStackNavigation />
                    ) : (
                        <></>
                    )}
                </NavigationContainer>
            </Provider>
        </PaperProvider>
    );
};

Here is the theme configuration:

import {
    DarkTheme as NavigationDarkTheme,
    DefaultTheme as NavigationDefaultTheme,
} from '@react-navigation/native';
import { MD3DarkTheme, MD3LightTheme, adaptNavigationTheme } from 'react-native-paper';
import { darkGreenColors, lightGreenColors } from '../utils/colors';


const { LightTheme, DarkTheme } = adaptNavigationTheme({
    reactNavigationLight: NavigationDefaultTheme,
    reactNavigationDark: NavigationDarkTheme,
});

const CombinedDefaultTheme = {
    ...MD3LightTheme,
    ...LightTheme,
    ...lightGreenColors,
};

const CombinedDarkTheme = {
    ...MD3DarkTheme,
    ...DarkTheme,
    ...darkGreenColors,
};

const themes = {
    light: CombinedDefaultTheme,
    dark: CombinedDarkTheme
};


export default themes;

And, most importantly, the navigation:

import React from 'react';

import { createMaterialBottomTabNavigator } from 'react-native-paper/react-navigation';
import { createStackNavigator } from '@react-navigation/stack';
import { StatusBar } from 'react-native';
import { useTheme } from 'react-native-paper';


import PlantsScreen from '../screens/PlantsScreen';
import HandPlant from '../svgs/HandPlant';
import NotificationsScreen from '../screens/NotificationsScreen';

const Stack = createStackNavigator();

const Tab = createMaterialBottomTabNavigator();

const BottomBarNavigation = () => {
    const { colors } = useTheme();
    const _barStyle = 'dark-content';

    return (
        <>
            <StatusBar
                barStyle={_barStyle}
                backgroundColor={colors.background}
                animated
            />
            <Tab.Navigator>
                <Tab.Screen
                    name="plants"
                    component={PlantsScreen}
                    options={{
                        tabBarIcon: () => <HandPlant height={24}/>,
                        tabBarLabel: 'Plants',
                    }}
                />
            </Tab.Navigator>
        </>
    );
};

const MainStackNavigation = () => {
    return (
        <>
            <Stack.Navigator screenOptions={{ headerShown: false }} >
                <Stack.Screen name="home" component={BottomBarNavigation} />
                <Stack.Screen
                    name="notifications"
                    component={NotificationsScreen}
                    options={{
                        presentation: 'modal'
                    }}
                />
            </Stack.Navigator>
        </>
    );
};

export default MainStackNavigation;

What I figured is that the theme is not being propagated to the TabNavigator, since the NotificationsScreen is working.

As it works on web, it is very difficult to figure out what is going on... Does anyone have any ideas?