I am setting the theme of my Navigation Container like this
import {
NavigationContainer,
DefaultTheme,
DarkTheme,
} from "@react-navigation/native";
export default function Navigation() {
const colorScheme = useColorScheme();
return (
<NavigationContainer
linking={LinkingConfiguration}
theme={colorScheme === "dark" ? DarkTheme : DefaultTheme}
>
<RootNavigator />
</NavigationContainer>
);
}
I have a stack navigator, and inside the stack navigator i have a drawer navigator, like this:
// Root Navigator
export default function RootNavigator() {
return (
<Stack.Navigator id="root-navigation-navigator" initialRouteName={initialRouteName}>
<Stack.Screen
name="Root"
component={DrawerNavigator}
options={{
headerShown: false,
}}
/>
{/* Other Screens */}
</Stack.Navigator>
);
}
// Drawer Navigator
export default function DrawerNavigator(props) {
return (
<Drawer.Navigator
initialRouteName="UserSettings"
drawerContent={(props) => <CustomDrawerContent {...props} me={me} />}
>
{/* Some Screens */}
</Drawer.Navigator>
}
The Drawer Toggle Button
In default browser theme it looks like this:
In dark theme it looks like this:
How can I get the toggle button to contract the black of dark theme?!
Thanks in advance.