react-native-reanimated: Error: Requiring module "node_modules\react-native-reanimated\src\Animated.js", which threw an exception: Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?

Description

I am trying to use createDrawerNavigator from import { createDrawerNavigator } from ‘@react-navigation/drawer’; in react native. However, I am getting the error above

Expected behavior

The expected behavior is to work as described in the documentation however on the ground it is different.

Actual behavior & steps to reproduce

Add import ‘react-native-gesture-handler’; at the top of my App.js In babel.config.js add reanimated/plugin as below

module.exports = function(api) {
  api.cache(true);
  return {
    presets: [
      'babel-preset-expo',
      'module:metro-react-native-babel-preset'
    ],
    plugins: [
      'react-native-reanimated/plugin',
    ]
  };
};

Snack or minimal code example

Below is my Drawer.js file

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

export default function MyDrawer() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Package versions

React Native:
React Native Reanimated:

Affected platforms

Android
iOS
Web

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 29 (2 by maintainers)

Most upvoted comments

I had the same issue. Found this on Expo.

https://docs.expo.dev/versions/latest/sdk/reanimated/#installation

add the plugins line to your babel.config.js

module.exports = function (api) { api.cache(true) return { presets: [‘babel-preset-expo’], plugins: [‘react-native-reanimated/plugin’],
} }

+32

patrickdunagan on Dec 29, 2021

Run expo r -c After adding below code to babel.config.js

module.exports = function (api) { api.cache(true) return { presets: [‘babel-preset-expo’], plugins: [‘react-native-reanimated/plugin’], } }

+30

lewisMachilika on Dec 31, 2021

@lewisMachilika Try to reset metro bundler cache. yarn start --reset-cache.

+24

ammarahm-ed on Dec 30, 2021

If you can check

I had the same issue. Found this on Expo.

https://docs.expo.dev/versions/latest/sdk/reanimated/#installation

add the plugins line to your babel.config.js

module.exports = function (api) { api.cache(true) return { presets: [‘babel-preset-expo’], plugins: [‘react-native-reanimated/plugin’], } }

I have already added that code but its still not working

+15

lewisMachilika on Dec 30, 2021

Still an issue using SDK 45

+14

PeterAbdalla on May 9, 2022

@lewisMachilika Try to reset metro bundler cache. yarn start --reset-cache.

it worked through expo r -c

+10

lewisMachilika on Dec 31, 2021

Having the same issue here, using SDK 45 and can’t fix it 😦

mohashamoon on May 12, 2022

I created a brand new expo project…none of these solutions worked for me 😣

Pat-Gekoski on Apr 15, 2022

After edited the babel.config.js file, try with: expo start --clear It works for me

matteocollina on Jan 17, 2022

Did you try to clear cache according to @ammarahm-ed 's suggestions? yarn start --reset-cache It looks like a cache issue.

piaskowyk on Dec 30, 2021

I had this problem using SDK 44 and tried following steps I found online, nothing works. But then I solved it with this steps:

I just followed the documentation here https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/

after following that I run expo doctor --fix-dependencies to fix the compatibility issue.

I didn’t run expo r -c, but you might also need to run it.

saerdyey on May 25, 2022

I found a solution, which fixed the issue in my case. Stackoverflow: https://stackoverflow.com/questions/61067004/invariant-violation-calling-synchronous-methods-on-native-modules-is-not-suppor

This is temporary fix. This is working perfectly on my side. you have to edit this file

node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js

callNativeSyncHook(
    moduleID: number,
    methodID: number,
    params: any[],
    onFail: ?Function,
    onSucc: ?Function,
  ): any {
    const isDebuggingEnabled = (typeof atob !== 'undefined');
    this.processCallbacks(moduleID, methodID, params, onFail, onSucc);
    if(!isDebuggingEnabled)
    {
      return global.nativeCallSyncHook(moduleID, methodID, params);
    }
  }

teifler on Aug 12, 2022

Thanku so much it worked

please post the solution

problem is in react reanimated dependency which is used by drawer navigator and expo stored tat file so we have to reset expo cache and add plugin to babel.config which by default not installed while intalling dependencies

mohitjson on Feb 25, 2022

why this major issue is closed ? this issue still exist, wasting time on this bug from last one week

saqibkafeel on Feb 10, 2022