Thiết kế website giá rẻ

Question

After updating expo from SDK 45 to 51 and upgrading all the packages my drawer menu acts weird.

When I open it by sliding it works fine, but when I open the drawer via code it opens fine, but when I select an item the page navigates as expected but the drawer stays open. When I then select a drawer menu item it closes.
I am using the latest packages from react-navigation 6

Anyone knows how to automatically close the drawer when an item is selected?

My drawer has nested stacks and is build like this:

import * as React from "react";
import { View, Image } from "react-native";

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import {
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItemList,
} from "@react-navigation/drawer";

import HomeScreen from "@/app/home";
import SpeciesListScreen from "@/app/components/species/SpeciesListScreen";
import SpeciesDetailScreen from "@/app/components/species/SpeciesDetailScreen";
import DictionaryDetailScreen from "@/app/components/dictionary/DictionaryDetailScreen";
import DictionaryListScreen from "@/app/components/dictionary/DictionaryListScreen";
import InfoScreen from "@/app/components/info/InfoScreen";
import LinksScreen from "@/app/components/info/LinksScreen";
import DeterminationMenuScreen from "@/app/components/determination/DeterminationMenuScreen";
import DeterminationScreen from "@/app/components/determination/DeterminationScreen";
import SettingsScreen from "@/app/components/settings/SettingsScreen";
import QRScreen from "@/app/components/settings/QRScreen";

import BackButton from "@/app/components/buttons/BackButton";
import HomeButton from "@/app/components/buttons/HomeButton";
import MenuButton from "@/app/components/buttons/MenuButton";
import Colors from "@/app/libs/colors";
import DrawerIcon from "@/app/navigation/DrawerIcon";
import { Translate } from "@/app/libs/language";

const Stack = createNativeStackNavigator();
const Drawer = createDrawerNavigator();
const styles = require("@/app/libs/styles");

const CustomDrawerContent = (props) => (
  <DrawerContentScrollView
    {...props}
    style={{
      backgroundColor: Colors.blue,
    }}
  >
    <View
      style={{
        alignItems: "center",
        paddingVertical: 10,
        backgroundColor: Colors.blue,
      }}
    >
      <Image source={require("@/assets/appImages/mini_splash.png")} />
    </View>
    <DrawerItemList
      {...props}
      style={{
        tintColor: Colors.white,
      }}
    />
  </DrawerContentScrollView>
);

const HomeStack = () => (
  <Stack.Navigator
    screenOptions={{
      headerStyle: styles.headerStyle,
      headerTitleStyle: styles.headerTitleStyle,
      headerTintColor: "#fff",
    }}
  >
    <Stack.Screen
      route="Home"
      name="Home"
      component={HomeScreen}
      options={{
        title: "Blauwtipje.nl",
        headerRight: () => <MenuButton />,
      }}
    />
  </Stack.Navigator>
);

const SettingsStack = () => (
  <Stack.Navigator
    screenOptions={{
      headerStyle: styles.headerStyle,
      headerTitleStyle: styles.headerTitleStyle,
      headerTintColor: "#fff",
      headerLeft: () => <HomeButton />,
      headerRight: () => <MenuButton />,
    }}
  >
    <Stack.Screen
      name="Settings"
      component={SettingsScreen}
      options={{
        title: Translate("settings.title"),
      }}
    />
    <Stack.Screen
      name="QRScreen"
      component={QRScreen}
      options={{
        title: Translate("settings.connect_user"),
      }}
    />
  </Stack.Navigator>
);

const SpeciesStack = () => (
  <Stack.Navigator
    screenOptions={{
      headerStyle: styles.headerStyle,
      headerTitleStyle: styles.headerTitleStyle,
      headerTintColor: "#fff",
      headerRight: () => <MenuButton />,
      headerLeft: () => <BackButton />,
    }}
  >
    <Stack.Screen
      name="SpeciesList"
      component={SpeciesListScreen}
      options={{
        title: Translate("home.species"),
      }}
    />
    <Stack.Screen
      name="SpeciesDetail"
      component={SpeciesDetailScreen}
      options={({ route }) => ({
        title: route.params?.title || "blauwtipje.nl",
      })}
    />
    <Stack.Screen
      name="DictionaryDetail"
      component={DictionaryDetailScreen}
      options={({ route }) => ({
        title: route.params?.title || "blauwtipje.nl",
      })}
    />
  </Stack.Navigator>
);

const InfoStack = () => (
  <Stack.Navigator
    screenOptions={{
      headerStyle: styles.headerStyle,
      headerTitleStyle: styles.headerTitleStyle,
      headerTintColor: "#fff",
      headerLeft: () => <HomeButton />,
      headerRight: () => <MenuButton />,
    }}
  >
    <Stack.Screen name="Info" route="Info" component={InfoScreen} />
  </Stack.Navigator>
);

const LinksStack = () => (
  <Stack.Navigator
    screenOptions={{
      headerStyle: styles.headerStyle,
      headerTitleStyle: styles.headerTitleStyle,
      headerTintColor: "#fff",
      headerLeft: () => <HomeButton />,
      headerRight: () => <MenuButton />,
    }}
  >
    <Stack.Screen name="Links" component={LinksScreen} />
  </Stack.Navigator>
);

const DictionaryStack = () => (
  <Stack.Navigator
    screenOptions={{
      headerStyle: styles.headerStyle,
      headerTitleStyle: styles.headerTitleStyle,
      headerTintColor: "#fff",
      headerLeft: () => <BackButton />,
      headerRight: () => <MenuButton />,
    }}
  >
    <Stack.Screen
      name="DictionaryList"
      component={DictionaryListScreen}
      options={{
        title: Translate("dictionary.title"),
      }}
    />
    <Stack.Screen
      name="DictionaryDetail"
      component={DictionaryDetailScreen}
      options={({ route }) => ({
        title: route.params?.title || "blauwtipje.nl",
      })}
    />
    <Stack.Screen
      name="SpeciesDetail"
      component={SpeciesDetailScreen}
      options={({ route }) => ({
        title: route.params?.title || "blauwtipje.nl",
      })}
    />
  </Stack.Navigator>
);

const DeterminationStack = () => (
  <Stack.Navigator
    name="DeterminationStack"
    screenOptions={{
      headerStyle: styles.headerStyle,
      headerTitleStyle: styles.headerTitleStyle,
      headerTintColor: "#fff",
      headerLeft: () => <BackButton />,
      headerRight: () => <MenuButton />,
    }}
  >
    <Stack.Screen
      name="DeterminationMenu"
      component={DeterminationMenuScreen}
      options={{
        title: Translate("determination.title"),
      }}
    />
    <Stack.Screen
      name="Determination"
      component={DeterminationScreen}
      options={{
        title: Translate("determination.title"),
      }}
    />
    <Stack.Screen
      name="SpeciesDetail"
      component={SpeciesDetailScreen}
      options={({ route }) => ({
        title: route.params?.title || "blauwtipje.nl",
      })}
    />

    <Stack.Screen
      name="DictionaryDetail"
      component={DictionaryDetailScreen}
      options={({ route }) => ({
        title: route.params?.title || "blauwtipje.nl",
      })}
    />
  </Stack.Navigator>
);

const Navigator = () => (
  <NavigationContainer independent={true}>
    <Drawer.Navigator
      screenOptions={{
        headerShown: false,
        drawerPosition: "right",
        activeTintColor: "#fff",
        inactiveTintColor: "#fff",
      }}
      drawerContent={(props) => <CustomDrawerContent {...props} />}
      initialRouteName="HomeDrawer"
      onDrawerOpen={() => console.log("Drawer is open")}
      onDrawerClose={() => console.log("Drawer is closed")}
    >
      <Drawer.Screen
        name="HomeDrawer"
        component={HomeStack}
        options={{
          drawerActiveBackgroundColor: Colors.orange,
          drawerInactiveTintColor: Colors.white,
          drawerActiveTintColor: Colors.white,
          drawerLabel: Translate("home.title"),
          drawerIcon: ({ tintColor }) => (
            <DrawerIcon narme="home" tintColor={tintColor} />
          ),
        }}
      />
      <Drawer.Screen
        name="SpeciesDrawer"
        component={SpeciesStack}
        options={{
          drawerActiveBackgroundColor: Colors.orange,
          drawerActiveTintColor: Colors.white,
          drawerInactiveTintColor: Colors.white,
          drawerLabel: Translate("species.title"),
          drawerIcon: ({ tintColor }) => (
            <DrawerIcon name="list" tintColor={tintColor} />
          ),
        }}
      />
      <Drawer.Screen
        name="DictionaryDrawer"
        component={DictionaryStack}
        options={{
          drawerActiveBackgroundColor: Colors.orange,
          drawerActiveTintColor: Colors.white,
          drawerInactiveTintColor: Colors.white,
          drawerLabel: Translate("dictionary.title"),
          drawerIcon: ({ tintColor }) => (
            <DrawerIcon name="book-open-variant" tintColor={tintColor} />
          ),
        }}
      />
      <Drawer.Screen
        name="DeterminationDrawer"
        component={DeterminationStack}
        options={{
          drawerActiveTintColor: Colors.white,
          drawerInactiveTintColor: Colors.white,
          drawerActiveBackgroundColor: Colors.orange,
          drawerLabel: Translate("determination.title"),
          drawerIcon: ({ tintColor }) => (
            <DrawerIcon name="search" tintColor={tintColor} />
          ),
        }}
      />
      <Drawer.Screen
        name="LinksDrawer"
        component={LinksStack}
        options={{
          drawerActiveBackgroundColor: Colors.orange,
          drawerActiveTintColor: Colors.white,
          drawerInactiveTintColor: Colors.white,
          drawerLabel: Translate("info.links"),
          drawerIcon: ({ tintColor }) => (
            <DrawerIcon name="web" tintColor={tintColor} />
          ),
        }}
      />
      <Drawer.Screen
        name="InfoDrawer"
        component={InfoStack}
        options={{
          drawerActiveBackgroundColor: Colors.orange,
          drawerActiveTintColor: Colors.white,
          drawerInactiveTintColor: Colors.white,
          drawerLabel: Translate("info.title"),
          drawerIcon: ({ tintColor }) => (
            <DrawerIcon name="info-outline" tintColor={tintColor} />
          ),
        }}
      />
      <Drawer.Screen
        name="SettingsDrawer"
        component={SettingsStack}
        options={{
          drawerActiveBackgroundColor: Colors.orange,
          drawerActiveTintColor: Colors.white,
          drawerInactiveTintColor: Colors.white,
          drawerLabel: Translate("settings.title"),
          drawerIcon: ({ tintColor }) => (
            <DrawerIcon name="settings" tintColor={tintColor} />
          ),
        }}
      />
    </Drawer.Navigator>
  </NavigationContainer>
);

export default Navigator;

I created a menubutton that opens the drawer like this:

import React from "react";
import { Pressable } from "react-native";
import { MaterialIcons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";

export default function MenuButton(props) {
  const navigation = useNavigation();
  return (
      <Pressable
        onPress={() => navigation.openDrawer()}
      >
        <MaterialIcons name="menu" size={28} color="white" />
      </Pressable>
  );
}

I’ve added code to the pages to check if the drawer is open en it says closed after the first select.
I also tried changing the createNativeStackNavigator to createStackNavigator from “@react-navigation/stack but that made no difference.

Thiết kế website giá rẻ

Danh mục

React-navigation openDrawer() doesn’t close on item select