react-native-reanimated: [Expo] Error: Failed to initialize react-native-reanimated library

Description

After carefully following the steps of installing react-native-reanimated:

Using expo install react-native-reanimated
Adding react-native-reanimated/plugin to the plugins array for babel.config.js.
Running Expo again with npx expo start --clear to reset cache

I still get this error:

 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
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

Steps to reproduce

Use expo install react-native-reanimated to install the library in an expo project
Add react-native-reanimated/plugin to the plugins array for babel.config.js.
Run Expo again with npx expo start --clear to reset cache

Snack or a link to a repository

https://github.com/DeveloperTheExplorer/expo-reanimated-issue

Reanimated version

2.12.0

React Native version

0.70.5

Platforms

iOS & Android

JavaScript runtime

No response

Workflow

No response

Architecture

No response

Build type

No response

Device

iOS simulator & Android Emulator

Device model

iPhone 14 Pro Max

Acknowledgements

Yes

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 19
Comments: 23

Commits related to this issue

install Drawer Navigator https://reactnavigation.org/docs/drawer-navigator/ https://github.com/software-mansion/react-native-reanimated/issues/3796#issuecomment-1362237515 — committed to yodhcn/the-meals-app by yodhcn a year ago
install DrawerNavigator npm install @react-navigation/drawer npx expo install react-native-gesture-handler react-native-reanimated https://reactnavigation.org/docs/drawer-navigator/ https://github.c... — committed to yodhcn/the-shop-app by yodhcn a year ago

Most upvoted comments

Found the issue. It was totally my fault. Sorry…

Basically I had misplaced the 'react-native-reanimated/plugin' line. I had put it within the same [] of module-resolver, instead of it being in the root [] array of the plugins within bable.config.js.

Basically I had:

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

While I should have had:

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

+100

DeveloperTheExplorer on Nov 24, 2022

npx expo start --clear worked for me.

+42

dev-sumanaditya on Dec 22, 2022

Found the issue. It was totally my fault. Sorry…

Basically I had:

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

While I should have had:

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

I could kiss you

+11

captainkidd5 on Jan 25, 2023

Screenshot from 2023-01-12 10-41-39

I have met this problem during I run my react native. Could you help me to solve it?

+10

Veang-dev6 on Jan 12, 2023

You need to add the line : plugins:[[‘react-native-reanimated/plugin’],], within module.exports tag in Project’s babel.config.js file. The babel.config.js file should be like this :

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

anupsamanta on Feb 26, 2023

I was trying the mentioned steps in Reanimated Documentation Installation but it was not working for me.

1: I add the following code in my babel.config.js because I am using React-Native CLI

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

//…OR…(You can add any)

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

2: After that, I added this line at the top of my App.js:

import ‘react-native-gesture-handler’;

3: Reset the cache:

npx react-native start --reset-cache

Usama-Saud on Feb 1, 2023

Reanimated for Expo

Expo Router v2 (Drawer)

I had the same issue using reanimated and followed the recommendations given here!

Remove the node_modules dependencies

rm -rf node_modules/

Verify your packages to install and add a resolutions section with the version you’ve been asked to use if any errors were prompted when trying to run:

@react-navigation/drawer
react-native-gesture-handler
react-native-reanimated

In my case, v3.3.0 was asked as an Error of compatibility (line 30).

Ensure you’ve added the Reanimated plugin at the end of the plugins (it must be the last item in the plugins array):

Make sure you’ve set hermes engine:

Reinstall your packages and start again with the option to clean the cache:

npm i
npx expo start -c

da8ah on Nov 5, 2023