React Navigation (native) V5: Problem with Dark Theme. Drawer Navigator Toggle Button does not contrast with the background. Screenshots included
Asked Answered
B

0

9

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:

enter image description here

In dark theme it looks like this:

enter image description here

How can I get the toggle button to contract the black of dark theme?!

Thanks in advance.

Boswall answered 21/5, 2021 at 14:23 Comment(1)
this answer fixed the issue for me, https://mcmap.net/q/1320877/-react-navigation-5-drawer-navigator-change-style-of-drawer-39-s-menu-iconDescendible

© 2022 - 2024 — McMap. All rights reserved.