CODEWITHSUNDEEP
javascriptreactjsreact-nativeexponavigation-drawer
Aman Garg
Aman Garg

Reputation: 21

Property '_measure' doesn't exist, js engine: hermes error while using react drawer navigator with EXPO react-native

Getting below error while integrating drawer navigator with EXPO react-native:

ERROR ReferenceError: Property '_measure' doesn't exist, js engine: hermes

ERROR Invariant Violation: "main" has not been registered. This can happen if:

* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.

* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes

package.json looks like this:

"dependencies": {
    "@expo/webpack-config": "^19.0.0",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/drawer": "^6.6.3",
    "@react-navigation/native-stack": "^6.9.13",
    "expo": "~49.0.8",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.4",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-web": "~0.19.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.0.14",
    "expo-router": "^2.0.5",
    "react-native-dotenv": "^3.4.9",
    "typescript": "^5.1.3"
  },

babel.config.js looks like this:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo", 'module:metro-react-native-babel-preset'],
    plugins: [
      "@babel/plugin-proposal-export-namespace-from",
      "react-native-reanimated/plugin", 'expo-router/babel',
      require.resolve("expo-router/babel"),
      ["module:react-native-dotenv", {
        "envName": "APP_ENV",
        "moduleName": "@env",
        "path": ".env",
        "safe": false,
        "allowUndefined": true,
        "verbose": false
      }]
    ],
  };
};

drawer navigator component looks like this:

import { createDrawerNavigator } from '@react-navigation/drawer';
import Settings from './settings';

const Drawer = createDrawerNavigator();

export default function DrawerNavigator() {
    return (
        <Drawer.Navigator initialRouteName="Settings">
            <Drawer.Screen name="Settings" component={Settings} />
            <Drawer.Screen name="Article" component={Settings} />
        </Drawer.Navigator>
    );
}

app.tsx looks like this:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import DrawerNavigator from './screens/drawer';

export default function App() {
  return (
    <NavigationContainer>
      <TabNavigator />
      <DrawerNavigator />
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

I have tried changing varios version of "react-native-reanimated" but didn't work

Upvotes: 2

Views: 3357

Answers (1)

Kristiyan
Kristiyan

Reputation: 411

I just resolved the same problem for me. I have a react native application with expo-router and I have downloaded the react-native-reanimated library from expo (this libraby is the cause of the error).

What I have done to solve the problem for me is:

  • Delete the node_modules folder
  • Remove the react-native-reanimated dependency from package.json file
  • Run npm i

After everything is downloaded:

  • Run npx expo install react-native-reanimated
  • Add react-native-reanimated/plugin as a plugin in babel.config.js:
module.exports = function(api) {
   api.cache(true);
   return {
      presets: ["babel-preset-expo"],
      plugins: ["react-native-reanimated/plugin"],
   };
};

!!! Keep in mind that the reanimated plugin should be at the end of the array as pointed in the documentation as it needs to be the last loaded plugin !!!

Then you need to clear all cache because babel caches all plugins:

  • Run npx expo start --clear

I hope this helps you as it did for me. You could read more here: https://docs.expo.dev/versions/latest/sdk/reanimated

Upvotes: 4

Related Questions