skip to Main Content

Trying to create a drawer navigator in React Native using VSCode.

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

const Drawer = createDrawerNavigator();

When I get this error:

Error: Failed to initialize react-native-reanimated library, make sure you followed installation steps here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/

  1. Make sure reanimated’s babel plugin is installed in your babel.config.js (you should have ‘react-native-reanimated/plugin’ listed there – also see the above link for details)
  2. Make sure you reset build cache after updating the config, run: yarn start –reset-cache, js engine: hermes

I made sure that everything in babel.config.js is correct:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

I added the following import to the top my root file (App.js):

import 'react-native-gesture-handler';

I reset my cache too using:

npm cache clean --force

Here are also all of my packages:

...
...
...

"dependencies": {
    "@react-navigation/drawer": "^6.5.5",
    "@react-navigation/native": "^6.1.1",
    "@react-navigation/native-stack": "^6.9.6",
    "react": "18.1.0",
    "react-native": "0.70.6",
    "react-native-gesture-handler": "^2.8.0",
    "react-native-reanimated": "^2.13.0",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.18.2"
  },

...
...
...

2

Answers


  1. Just ran into this issue, was fixed by running
    npm start -- --reset-cache

    Login or Signup to reply.
  2. Try installing preset by

    npm i metro-react-native-babel-preset --save-dev
    

    and then

    npm start -- --reset-cache
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search