Can't be used with React Navigation/Drawer V6

Description

Can’t be used with Drawer Navigator in React Navigation.

Expected behavior

Able to create and use Drawer Navigator with no exception.

Actual behavior & steps to reproduce

Just trying to create Drawer object.

import {createDrawerNavigator} from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();

And it throws an error.

 ERROR  TypeError: null is not an object (evaluating '_ReanimatedModule.default.createNode')
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. 
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. 
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

Snack or minimal code example

// source: https://reactnavigation.org/docs/drawer-based-navigation

import * as React from 'react';
import {Button, View} from 'react-native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';

function HomeScreen({navigation}) {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Button
        onPress={() => navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    </View>
  );
}

function NotificationsScreen({navigation}) {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Button onPress={() => navigation.goBack()} title="Go back home" />
    </View>
  );
}

const Drawer = createDrawerNavigator(); // error

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Package versions

• React Native: 0.65.1
• React Native Reanimated: 2.2.0
• React Navigation Drawer: 6.1.4
• React Navigation Native: 6.0.2
• React Navigation Gesture Handler: 1.10.3
• NodeJS: v16.6.2
• Xcode:
• Java & Gradle: 11.0.12

Affected platforms

• Android
• iOS
• Web

Temporary Resolve Method

It works with "react-native-reanimated": "^1.13.2".

[piaskowyk]

Hey @efefurkankarakaya
We are working on a solution to this problem.

[Manil-SoftNEP]

This worked for me.

1. npm i react-native-reanimated
2. Add plugins: ['react-native-reanimated/plugin'], below presets in ‘<your_app_root_folder>/babel.config.js’.
3. Add import 'react-native-gesture-handler'; to the top of ‘<your_app_root_folder>/App.js’.
4. Reset the cache using npx react-native start --reset-cache.