Cambiar dinámicamente el color del navegador de pestaña inferior en React Native

Tengo una pregunta sobre React Native. Estoy usando el paquete @react-navigation/bottom-tabs para tener una navegación inferior. Hoy implementé un cambiador de modo oscuro para mi aplicación. Tengo un problema con <Tab.Navigator>. El problema es que cada opción de color está definida dentro de screenOptions. ¿Es posible pasar props y cambiar los colores según el tema seleccionado por el usuario?

Déjame mostrarte lo que necesito. Cuando tengo habilitado el modo oscuro, toda la aplicación se ve así:

Cuando configuro el modo claro, la aplicación se ve así:

Solo necesito cambiar el color de la barra inferior a blanco y los iconos a negro en el modo claro. ¿Es posible?

Mi código es el siguiente:

const Tab = createBottomTabNavigator();
export default function MainContainer(){
    const theme = useSelector((state) => state.themeReducer.theme);
    return(
        <ThemeProvider theme={theme}>
        <NavigationContainer>
            <Tab.Navigator
            initialRouteName={skolboz}
            screenOptions={({route}) => ({
                tabBarIcon: ({focused, color, size}) => {
                    let iconName;
                    let rn = route.name;

                    if (rn === skolboz) {
                        iconName = focused ? 'home' : 'home-outline'
                    } else if (rn === newCase){
                        iconName = focused ? 'add' : 'add-outline'
                    } else if (rn === settings){
                        iconName = focused ? 'settings' : 'settings-outline'
                    }

                    return <Ionicons name={iconName} size={size} color={color} />
                },
                "tabBarActiveTintColor": "orange",
                "tabBarInactiveTintColor": "#FFF",
                "tabBarActiveBackgroundColor": "#000",
                "tabBarInactiveBackgroundColor": "#000",
                "tabBarLabelStyle": {
                  "fontSize": 10
                },
                "tabBarStyle": [
                    {
                      "display": "flex",
                      "borderTopWidth": 0,
                      "backgroundColor": "#000"
                    },
                    null
                  ],
                "headerStyle": [
                    {
                        "backgroundColor": "orange",
                    }
                ],
              })}
            >

                <Tab.Screen name={skolboz} component={Skolboz} options={{headerTitle: 'SKOLBOZ', headerTintColor: "white"}} />
                <Tab.Screen name={newCase} component={NewCase} options={{headerTitle: 'Pridať nový nedostatok', headerTintColor: "white"}} />
                <Tab.Screen name={settings} component={Settings} options={{headerTitle: 'Nastavenia', headerTintColor: "white"}} />

            </Tab.Navigator>
        </NavigationContainer>
        </ThemeProvider>
    )
}

Estoy usando Redux para cambiar el color basado en el tema de la aplicación. Pasando props de esta manera:

${props => props.theme.PRIMARY_BACKGROUND_COLOR};

¿Cómo puedo hacer la misma lógica dentro de screenOptions?

¡Gracias a todos por su respuesta!