Error : Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'NativeReanimated' could not be found

Question

I followed this tutorial https://medium.com/@ritikjain1272/making-drawer-navigator-and-a-splash-screen-on-your-react-native-app-2fb561ee17f1 And I have been able to work on several Mobile Apps in the past. Which compiled to APK and uploaded to playstore, but this was in the past.

Trying since today and its been very impossible to get it to work as the very usual. I keep getting this Error

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

My code is looking like this for App.js

import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createDrawerNavigator} from 'react-navigation-drawer';
import Icon from 'react-native-vector-icons/SimpleLineIcons';

import Splash from './src/Splash';
import Login from './src/Login';
import Register from './src/Register';
import Dashboard from './src/Dashboard';
import InstantMessage from './src/InstantMessage';

const LoginNavigator = createStackNavigator({
  'Login': {
    screen: Login,
    navigationOptions: ({navigation}) => ({
      headerLeft: () => (
        <TouchableOpacity
          style={{marginLeft: 20}}
          onPress={() => navigation.toggleDrawer()}>
          <Icon name="menu" size={12} />
        </TouchableOpacity>
      ),
    }),
  },
});

const RegisterNavigator = createStackNavigator({
  'Register': {
    screen: Register,
    navigationOptions: ({navigation}) => ({
      headerLeft: () => (
        <TouchableOpacity
          style={{marginLeft: 20}}
          onPress={() => navigation.toggleDrawer()}>
          <Icon name="menu" size={12} />
        </TouchableOpacity>
      ),
    }),
  },
});

const DashboardNavigator = createStackNavigator({
  'Home': {
    screen: Dashboard,
    navigationOptions: ({navigation}) => ({
      headerLeft: () => (
        <TouchableOpacity
          style={{marginLeft: 20}}
          onPress={() => navigation.toggleDrawer()}>
          <Icon name="menu" size={12} />
        </TouchableOpacity>
      ),
    }),
  },
});

const InstantMessageNavigator = createStackNavigator({
  'Instant Message': {
    screen: InstantMessage,
    navigationOptions: ({navigation}) => ({
      headerLeft: () => (
        <TouchableOpacity
          style={{marginLeft: 20}}
          onPress={() => navigation.toggleDrawer()}>
          <Icon name="menu" size={12} />
        </TouchableOpacity>
      ),
    }),
  },
});


const DrawerNavigator = createDrawerNavigator({

  Dashboard: {
    navigationOptions: {
      drawerIcon: (
        <Image
          source={{uri: 'asset:/icons/megaphone.png'}}
          style={{width: 21, height: 21}}
        />
      ),
      drawerLabel: 'Home',
    },
    screen: DashboardNavigator,
  },

  InstantMessage: {
    navigationOptions: {
      drawerIcon: (
        <Image
          source={{uri: 'asset:/icons/megaphone.png'}}
          style={{width: 21, height: 21}}
        />
      ),
      drawerLabel: 'Messages',
    },
    screen: DashboardNavigator,
  },
});



const AppSwitchNavigator = createSwitchNavigator(
  {
    Splash: {screen: Splash},
    Login: {screen: Login},
    Drawer: {screen: DrawerNavigator},
  },
  {
    initialRouteName: 'Splash',
  },
);

const App = createAppContainer(AppSwitchNavigator);
export default App;

And package.json is looking like this

{
  "name": "xxxxxxxxx",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-picker/picker": "^1.9.8",
    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-native-gesture-handler": "^1.9.0",
    "react-native-hr": "^1.1.4",
    "react-native-hr-component": "^2.0.3",
    "react-native-picker-select": "^8.0.4",
    "react-native-reanimated": "^1.13.2",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "^2.16.1",
    "react-native-vector-icons": "^7.1.0",
    "react-navigation": "^4.4.3",
    "react-navigation-drawer": "^2.6.0",
    "react-navigation-stack": "^2.10.2"
  },
  "devDependencies": {
    "@babel/core": "7.12.10",
    "@babel/runtime": "7.12.5",
    "@react-native-community/eslint-config": "1.1.0",
    "babel-jest": "25.5.1",
    "eslint": "6.8.0",
    "jest": "25.5.4",
    "metro-react-native-babel-preset": "0.59.0",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

What Can I be possibly doing wrong? I honestly need help. This is a React Native CLI project.

Answer 1

I solved this issue.

You need to install both Libraries with these Versions

react-native-reanimated": "^1.13.2"
"@react-navigation/drawer": "^5.11.4"

This absolutely works for me