const theme = {
    dark: {
        background: 'red'
    },
    default: {
        background: 'green',
        primary: 'gold'
    }
}

function App(): JSX.Element {
    const [isDarkTheme, setDarkTheme] = useState<boolean>(false);

    return (
        <NavigationContainer
            scheme={isDarkTheme ? 'dark' : 'default'}
            // scheme={scheme !== 'dark' ? 'dark' : 'default'}
            basePath={home_path}
            config={{
                footer: <Footer />
            }
            }
        >
            <WrapScreen />
        </NavigationContainer>
    );
}

Theme color

Here's a breakdown of the themeColorNameProps type properties and their descriptions:

• primary: The primary color used for elements like buttons and highlighting.
• background: The background color of the UI.
• card: The color of cards or containers in the UI.
• text: The text color.
• link: The color used for hyperlinks or links.
• border: The color of borders and separators.
• notification: The color used for notifications or alerts.
• transparent: A transparent color.
• primary_text: The text color for primary elements.
• secondary: A secondary color for elements like secondary buttons.
• secondary_text: The text color for secondary elements.
• success: The color used to indicate success.
• success_text: The text color for success messages.
• danger: The color used to indicate danger or errors.
• danger_text: The text color for error messages.
• warning: The color used to indicate warnings.
• warning_text: The text color for warning messages.
• info: The color used for informational messages.
• info_text: The text color for informational messages.
• grey: A general grey color.
• light_grey: A lighter shade of grey.
• dark_grey: A darker shade of grey.

Using the operating system preferences

import { useColorScheme } from 'react-native';

function App(): JSX.Element {
    const scheme = useColorScheme();
    return (
        <NavigationContainer
            theme={theme}
            scheme={scheme == 'dark' ? 'dark' : 'default'
            }
            basePath='/home'
        >
            <DrawerContainer>
                <StatusBar
                    animated={true}
                    barStyle='light-content'
                    backgroundColor={colors.primary}
                    showHideTransition={'slide'}
                    hidden={false}
                />
                <N />
            </DrawerContainer>
        </NavigationContainer>
    );
}

Using Context API:

const WrapScreen = ({ setDarkTheme }: { setDarkTheme: React.Dispatch<React.SetStateAction<boolean>> }) => {
    const { dark, colors } = useTheme();
    const { } = useRouter()
    return (
        <ThemeContextProvider setDarkTheme={setDarkTheme} >
            <AuthenticationCheckProvider>
                <DrawerContainer>
                    <StatusBar
                        animated={true}
                        barStyle={'light-content'}
                        // barStyle={dark ? "light-content" : 'dark-content'}
                        backgroundColor={colors.primary}
                        showHideTransition={'slide'}
                        hidden={false}
                    />
                    <Screen />
                </DrawerContainer>
            </AuthenticationCheckProvider>
        </ThemeContextProvider>

    )
}

ThemeContextProvider:

import AsyncStorage from '@react-native-async-storage/async-storage';
import React, { useContext, useEffect, useState } from 'react';
import { createContext } from "react";
import { useRouter } from 'react-native-router-screen';

const ThemeContext = createContext<{ setDarkTheme: React.Dispatch<React.SetStateAction<boolean>> }>({ setDarkTheme: () => { } });

export function ThemeContextProvider({
    setDarkTheme,
    children
}: {
    setDarkTheme: React.Dispatch<React.SetStateAction<boolean>>,
    children: React.ReactNode,
}) {
    const router = useRouter();

    useEffect(() => {
        AsyncStorage.getItem('theme').then((r: any) => {
            setDarkTheme(r == 'dark')
        })
        return () => {
        }
    }, [router])

    return (
        <ThemeContext.Provider value={{ setDarkTheme: setDarkTheme }
        }>
            {children}
        </ThemeContext.Provider>
    );
};

export const useChangeTheme = () => {
    const change = useContext(ThemeContext)
    return change.setDarkTheme
}