Screen freeze when navigate in react native navigation with Drawer navigation

Question

I have an issue with Drawer navigation in React Native Navigation.

The problem seems to be very simple.

I have 2 screens, on each screen I have a button that sends the user to the other one.

the problem is after sending the user from screen A to B and from B to A the button does not work anymore.

I can pull the drawer and go back to the B screen again, and the Button works there, but the button in the A screen is still frozen, the hole screen basically.

import React from "react";
import { createDrawerNavigator } from "@react-navigation/drawer";

import SettingScreen from "../screens/SettingScreen";
import ProfileScreen from "../screens/ProfileScreen";

const Drawer = createDrawerNavigator();

function MenuNavigation(props) {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Setting" component={SettingScreen} />
      <Drawer.Screen name="Profile" component={ProfileScreen} />
    </Drawer.Navigator>
  );
}

export default MenuNavigation;

this is one of the screens the other one is the same with exception of names

import React from "react";
import { Button, Text, View } from "react-native";

function SettingScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Hello world</Text>
      <Button
        title="Go to Profile Screen"
        onPress={() => navigation.navigate("Profile")}
      />
    </View>
  );
}

export default SettingScreen;

similar to Setting Screen I have a Profile Screen, which I didn't include.

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import MenuNavigation from "./MenuNavigation";

function MainNavigation(props) {
  return (
    <NavigationContainer>
      <MenuNavigation />
    </NavigationContainer>
  );
}

export default MainNavigation;

and finally, this is my package.json file and yes I'm using EXPO

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo-google-fonts/roboto": "^0.1.0",
    "@react-native-community/checkbox": "^0.5.7",
    "@react-native-community/datetimepicker": "3.0.4",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/bottom-tabs": "^5.11.2",
    "@react-navigation/drawer": "^5.12.2",
    "@react-navigation/native": "^5.8.10",
    "@react-navigation/stack": "^5.12.8",
    "expo": "~40.0.0",
    "expo-checkbox": "~1.0.0",
    "expo-font": "~8.4.0",
    "expo-status-bar": "~1.0.3",
    "moment": "^2.29.1",
    "native-base": "^2.15.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-hook-form": "^6.14.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-action-button": "^2.8.5",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-modals": "^0.22.3",
    "react-native-progress": "^4.1.2",
    "react-native-reanimated": "^1.13.2",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "^2.15.2",
    "react-native-web": "~0.13.12",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "redux-connect": "^10.0.0",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0"
  },
  "private": true
}

no Error no nothing, simply does not work.

If anyone needs more detail just ask me.

Answer 1

Seems like the newest version 5.12.2 of @react-navigation/drawer has this issue. So I tried with an older version 5.11.5 and it worked for me. I tested on an adroid mobile only though.

Command to install a specific npm packager version is:
yarn add @react-navigation/drawer@5.11.5