React native reanimated package is giving error on react-navigation/drawer

[Ho3ein-Boka]

React native is drawer is giving me errors, I don't think my code is wrong here because I am following the guidelines from react native official website link here

Here is my package json

    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/drawer": "^5.12.4",
    "@react-navigation/native": "^5.9.3",
    "@react-navigation/stack": "^5.14.3",
    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-paper": "^4.7.2",
    "react-native-reanimated": "^2.0.0",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-screens": "^2.18.1"

As you can see I think react-native-reanimated is upgraded to 2.0 not too long ago.

Here is my code from official website.

import 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();

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

export default App;

Since I am starting a new project there is no other files.

Whenever the app is involve with react native/drawer & and react-native-reanimated

This error log is given

Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'NativeReanimated' could not be found. Verify that a module by this name is registered in the native binary.

Is the package in the wrong here or am I in the wrong here. Can anyone help me verify this error?

[raajnadar]

#9389 use reanimated 1 until reanimated 2 is supported

[satya164]

Reanimated 2 is supported, the new APIs of Reanimated 2 are not used. This error is because Reanimated 2 requires extra configuration (which shouldn't be needed if we don't use the new APIs) and needs to be addressed in reanimated to not require extra configuration.

You can follow Reanimated docs to configure it properly until it's fixed https://docs.swmansion.com/react-native-reanimated/docs/installation

[satya164]

Closing in favor of software-mansion/react-native-reanimated#1798

[BraveEvidence]

@satya164 @raajnadar will v6 support reanimated v2 without we doing any extra configuration?

[raajnadar]

As @satya164 said the reanimated team will add an option to not throw error if we do not use reanimated 2 apis. By default react navigation 5 & 6 are compatible the error has to be addressed from reanimated side.