Why does @react-navigation/drawer crashes the chrome debugger in react-native and how can I fix this?

Question

I am using react-navigation version 6 with react-native version 0.68.

/* package.json */
"dependencies": {
    "@react-navigation/drawer": "^6.4.1",
    "@react-navigation/native": "^6.0.10",
    "react": "17.0.2",
    "react-native": "0.68.2",
    "react-native-gesture-handler": "^2.4.2",
    "react-native-reanimated": "^2.8.0",
    "react-native-safe-area-context": "^4.3.1",
    "react-native-screens": "^3.13.1"
  }

Following is the content of index.js file:

/* index.js */
import 'react-native-gesture-handler';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { AppScreens } from './app/AppScreens';

AppRegistry.registerComponent(appName, () => AppScreens);

And following is the content of AppScreens.tsx file:

/* AppScreen.tsx */
import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { FirstScreen } from './FirstScreen';
import { SecondScreen } from './SecondScreen';
import { NavigationContainer } from '@react-navigation/native';

const Drawer = createDrawerNavigator();

export const AppScreens = () => {

    return (
        <NavigationContainer>
            <Drawer.Navigator>
                <Drawer.Screen name="FirstScreen" component={FirstScreen} />
                <Drawer.Screen name="SecondScreen" component={SecondScreen} />
            </Drawer.Navigator>
        </NavigationContainer>
    )
}

Everything works fine in normal mode, But when I enable debugging I get the following error:

Calling synchronous methods on native modules is not supported in chrome

Consider providing alternative methods to expose this method in debug mode, e.g. by exposing constants ahead-of-time.

sometimes the error changes to the follwoing

Cannot read properties of undefined (reading 'AppScreens')

The problem seems to be from const Drawer = createDrawerNavigator(); line because the following code also gets the same error:

/* AppScreen.tsx */
import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { Text, View } from 'react-native';

const Drawer = createDrawerNavigator();

export const AppScreens = () => {

    return (
        <View>
            <Text>app-screens</Text>
        </View>
    )
}

But when I comment this line const Drawer = createDrawerNavigator(); everything works fine. What is the problem and how can I fix this?

Answer 1

react-navigation version 6 is using reanimated version 2.5.x, as the documentation for react-native-reanimated version 2.5.x states:

As the library uses JSI for synchronous native methods access, remote debugging is no longer possible

So I switched to flipper for debugging.