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

Viewed 2233

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.

3 Answers

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

I solved this issue by downgrading react-native-reanimated

If your using npm do this:

npm install react-native-reanimated@1.9.9

if your using yarn do this:

yarn upgrade react-native-reanimated@1.9.9

if you want to do it manually change the version react-native-reanimated to react-native-reanimated: ^1.9.9 in package.json then run npm install or yarn add

I got the same issue "Image Loader" in place of "NativeReanimated" I just stopped the debugger and did the Hard reload with an empty catch on the chrome browser. It works fine then

enter image description here

Related