Android || E/ReactNativeJS: Error: Failed to initialize react-native-reanimated library

[mantmartini]

Description

This is the error I obtained when I tried to upgrade react native from 0.64.2 to 0.68.2 and reanimated from 1.13.2 to 2.2.4:

2022-10-13 00:31:00.532 25215-25313/com.restlessnetwork E/ReactNativeJS: 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
2022-10-13 00:31:00.544 25215-25313/com.restlessnetwork E/ReactNativeJS: 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., js engine: hermes

    --------- beginning of crash
2022-10-13 00:31:00.562 25215-25314/com.restlessnetwork E/AndroidRuntime: FATAL EXCEPTION: mqt_native_modules
    Process: com.restlessnetwork, PID: 25215
    com.facebook.react.common.JavascriptException: 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, stack:
    s@1806:1564
    c@1806:2163
    v@1806:2321
    _@1806:2483
    k@1806:2457
    anonymous@1805:85
    h@2:1707
    d@2:1150
    i@2:496
    anonymous@1769:8094
    h@2:1707
    d@2:1150
    i@2:496
    anonymous@1768:988
    h@2:1707
    d@2:1150
    i@2:496
    anonymous@1767:571
    h@2:1707
    d@2:1150
    i@2:496
    anonymous@1741:386
    h@2:1707
    d@2:1150
    i@2:496
    anonymous@1739:602
    h@2:1707
    d@2:1150
    i@2:496
    anonymous@1738:1230
    h@2:1707
    d@2:1150
    i@2:496
    anonymous@1737:126
    h@2:1707
    d@2:1150
    i@2:496
    anonymous@383:641
    h@2:1707
    d@2:1150
    i@2:496
    anonymous@382:167
    h@2:1707
    d@2:1150
    i@2:496
    anonymous@6:57
    h@2:1707
    d@2:1080
    i@2:496
    global@3376:3

        at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.java:72)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
        at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:188)
        at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
        at android.os.Handler.handleCallback(Handler.java:938)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
        at android.os.Looper.loopOnce(Looper.java:201)
        at android.os.Looper.loop(Looper.java:288)
        at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:228)
        at java.lang.Thread.run(Thread.java:920)

Steps to reproduce

1. Add the new lines in MainApplication.java
2. Execute npx react-native run-android
3. The app is installed in emulator
4. The app closed itself.

This is my package.json:

"dependencies": { "@eva-design/eva": "^2.0.0", "@flyerhq/react-native-link-preview": "^1.6.0", "@ptomasroos/react-native-multi-slider": "^2.2.2", "@react-native-async-storage/async-storage": "^1.13.4", "@react-native-community/cli": "7.0.2", "@react-native-community/datetimepicker": "^3.4.3", "@react-native-community/masked-view": "^0.1.10", "@react-native-community/netinfo": "^6.2.1", "@react-native-community/push-notification-ios": "^1.10.1", "@react-native-firebase/app": "^11.1.0", "@react-native-firebase/auth": "^11.1.0", "@react-native-firebase/firestore": "^11.1.0", "@react-native-firebase/messaging": "^11.1.0", "@react-native-picker/picker": "^1.16.3", "@react-native-seoul/masonry-list": "^1.1.4", "@react-navigation/bottom-tabs": "^5.11.2", "@react-navigation/drawer": "6.1.0", "@react-navigation/material-top-tabs": "^5.3.10", "@react-navigation/native": "6.0.2", "@react-navigation/stack": "^5.12.8", "@ui-kitten/components": "^5.0.0", "add": "^2.0.6", "apollo3-cache-persist": "^0.9.1", "axios": "^0.21.1", "expo-linear-gradient": "^11.0.2", "global": "^4.4.0", "graphql": "^15.5.0", "i18next": "^19.8.7", "jwt-decode": "^3.1.2", "lodash": "^4.17.21", "lottie-ios": "3.2.3", "lottie-react-native": "^4.0.2", "markdown-it": "^12.0.6", "mixpanel": "^0.14.0", "mixpanel-react-native": "^1.3.7", "moment": "^2.29.1", "native-base": "^2.15.2", "react": "17.0.2", "react-hook-form": "^6.15.4", "react-i18next": "^11.8.6", "react-native": "0.68.2", "react-native-3dcube-navigation": "^1.0.4", "react-native-adapty": "^1.3.13", "react-native-animated-component": "^0.1.0", "react-native-background-timer": "^2.4.1", "react-native-calendars": "^1.1284.0", "react-native-camera": "4.2.0", "react-native-country-picker-modal": "^2.0.0", "react-native-create-thumbnail": "^1.4.1", "react-native-debugger": "^1.1.0", "react-native-device-info": "^8.1.3", "react-native-elements": "^3.3.1", "react-native-error-boundary": "^1.1.9", "react-native-fbsdk-next": "^10.1.0", "react-native-fit-image": "^1.5.5", "react-native-fs": "^2.16.6", "react-native-geolocation-service": "^5.3.0-beta.1", "react-native-gesture-handler": "1.10.3", "react-native-gifted-chat": "^0.16.3", "react-native-htmlview": "^0.16.0", "react-native-image-picker": "^4.1.1", "react-native-image-resizer": "^1.4.5", "react-native-in-app-review": "^3.2.3", "react-native-keyboard-manager": "^6.5.4-1", "react-native-linear-gradient": "^2.5.6", "react-native-localize": "^2.1.7", "react-native-marquee": "^0.4.0", "react-native-modalbox": "^2.0.2", "react-native-network-info": "^5.2.1", "react-native-pell-rich-editor": "^1.8.8", "react-native-percentage-circle": "^1.0.7", "react-native-phone-number-input": "^2.1.0", "react-native-ping": "^1.2.6", "react-native-push-notification": "^8.1.1", "react-native-ratings": "^8.1.0", "react-native-reanimated": "2.2.4", "react-native-safe-area-context": "^3.1.9", "react-native-screens": "3.5.0", "react-native-share": "^5.1.6", "react-native-skeleton-placeholder": "^4.0.0", "react-native-svg": "^12.1.0", "react-native-swipe-gestures": "^1.0.5", "react-native-tab-view": "^2.15.2", "react-native-thumbnail-video": "^0.1.2", "react-native-toast-message": "^1.4.7", "react-native-vector-icons": "^7.1.0", "react-native-video": "^5.1.1", "react-native-webview": "^11.17.1", "react-native-wheel-color-picker": "^1.2.0", "react-navigation": "^4.4.3", "react-redux": "^7.2.2", "redux": "^4.1.0", "redux-persist": "^6.0.0", "redux-thunk": "^2.3.0", "reselect": "^4.0.0", "sendbird": "^3.0.143" },

This is my babel.config.js

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

Snack or a link to a repository

-

Reanimated version

2.2.4

React Native version

0.68.2

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Android emulator

Device model

Pixel 4 API

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[github-actions[bot]]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[tomekzaw]

Hey! Did you run yarn start --reset-cache after modifying babel.config.js?

Also, 2.2.4 is like 11.5 months old. Try upgrading to 2.11.0 and re-open the issue if the problem persists.

[ardhendu12345]

This issue still exist react-native -0.70.3 react-native-reanimated-2.11.0 after modifying babel.config.js to module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ 'react-native-reanimated/plugin', ], };

Please help what to do to solve the issue

[tomekzaw]

1. Did you build the app again after upgrading to Reanimated 2.11.0?
2. Did you reset application cache with yarn start --reset-cache?

[ardhendu12345]

yes after it shows the error again..please help what to do ...

[ardhendu12345]

@tomekzaw Sir, its done it will working fine now ...

[lauraleonilla]

Did you do something that solved it? I can't get past this issue. @ardhendu12345

[scrapecoder]

facing the same issue, i tried everything but bad luck. @lauraleonilla @ardhendu12345 did you able to fix the issue.

[lauraleonilla]

Yeah I restarted my computer and it worked. But I'm not sure if what actually fixed it. 🥲

[ardhendu12345]

after following the instruction of react-native-reanimated .. i use npm start --reset-cache and then again run the command npx react-native run-android and it successfully built my project..nothing else to do .

[dumbsavant]

Restarting my computer did the trick as well. Thanks, @lauraleonilla !

[owen-flyxai]

@lauraleonilla restarting computer also fixed it. Thanks

[nasirkhansayyad132]

Restarting my laptop did not work 😔 Any further guide please?

[nasirkhansayyad132]

Restarting my laptop did not work 😔 Any further guide please?

Worked after resetting cache, thanks

[NoahSimajji]

Worked after running "yarn start --reset-cache", thanks

[huseyintamer]

Restarting computer fixed it 👍🏻

[jwhubert91]

Hey! Did you run yarn start --reset-cache after modifying babel.config.js?

Also, 2.2.4 is like 11.5 months old. Try upgrading to 2.11.0 and re-open the issue if the problem persists.

Following these 3 steps fixed it. To elaborate since this comment I quoted above is ambiguous in my opinion:

1. Update the npm package to the latest version
2. Add the following to your babel.config.js file in your project. If you have other plugins this one must be listed last: plugins: ["react-native-reanimated/plugin"],
3. Run yarn start --reset-cache or npm run start --reset-cache

These 3 steps worked for me :)

[zalo003]

I am using expo to build my react-native app and none of the above solutions seems to work. I have cleared cache and restarted my system; all to no avail please

[SurajTopal]

restart my laptop worked ☺️

[bbuchanan]

can't believe it, resetting my computer literally worked too! Is it 1998 again? :)

[burman-work]

I also ran the steps above with pnpm prune store, yarn clear cache and npm cache clean –force and this fixed this for me - possibly avoiding a machine reformat :)

[nkat2112]

Hello, everyone.

If you're still getting this issue, despite all the recommendations listed here and in the official instructions, please check one more thing:

It appears the "babel.config.js" file has to be in your project root folder.

(Not neatly tucked away in a "source/" or "src/" subfolder...)

I was naive and made that mistake. And I don't want anyone else to suffer.

[MohammadAzimi]

I have this issue after upgrading from 2.9.1 to 2.11.0. event after upgrading to 2.14.3

In development I run the command yarn start --reset-cache and everything works fine. BUT when I'm trying to run my app in iOS Release mode, my app crashes and throws the error: Terminating app due to uncaught exception 'RCTFatalException: Unhandled JS Exception: Error: Requiring module "414", which threw an exception: Error: Failed to initialize react-native-reanimated library

Now how can I force it to run it's release command with --reset-cache? Or anything to solve this issue in release mode?

[KajG]

To anyone still having this problem (specifically on android), after trying everything above and not having it work I tried deleting my index.android.bundle and rebuilding it again, after I did that it finally worked. Here's a thread about how to do build/rebuild your bundle: https://stackoverflow.com/questions/44446523/unable-to-load-script-from-assets-index-android-bundle-on-windows.

Hope this fixes the issue for some people.

[dr1verrr]

https://github.com/facebook/react-native/issues/32952#issuecomment-1426154598

[MohammadAzimi]

I have this issue after upgrading from 2.9.1 to 2.11.0. event after upgrading to 2.14.3

In development I run the command yarn start --reset-cache and everything works fine. BUT when I'm trying to run my app in iOS Release mode, my app crashes and throws the error: Terminating app due to uncaught exception 'RCTFatalException: Unhandled JS Exception: Error: Requiring module "414", which threw an exception: Error: Failed to initialize react-native-reanimated library

Now how can I force it to run it's release command with --reset-cache? Or anything to solve this issue in release mode?

In my case, the issue was not related to reanimated! This happened because, in my monorepo, the starter package gets executed and run in the wrong path. so I wrote a patch in react native

[betomoedano]

Hey! Did you run yarn start --reset-cache after modifying babel.config.js?

Also, 2.2.4 is like 11.5 months old. Try upgrading to 2.11.0 and re-open the issue if the problem persists.

This worked for me!

[psychosoft]

I am seriously thinking to give up the reanimated library, been having this problem for a month now. Nothing seems to fix it. Runs good in Expo GO, but all native builds fail to execute with fatal crash on app start. been clearing chaches, been including the babel plugin, been adding import lines at the top of entry files, nothing seems to fix the issue. Anyone can explain to me why reanimated has this issues ?

[betomoedano]

@psychosoft Try deleting the app and run it again

[tomekzaw]

Anyone can explain to me why reanimated has this issues ?

@psychosoft In most of the cases, such errors or crashes are actually caused by invalid configuration of the app itself rather than Reanimated. Can you please provide more details as a new issue so we can investigate your problem?

[jedsada-jed]

I try both --reset-cache and rebuild but not work. finally before I will restart my laptop I do restart ios simulator and worked for me.

[chrisribal]

I've had the same problem. Running npm run start --reset-cache didn't do anything.

Running npx react-native start --reset-cache did finally reset the transform cache and the error disappeared.

[tomekzaw]

I've had the same problem. Running npm run start --reset-cache didn't do anything.

You missed -- in the command, the actual command is npm run start -- --reset-cache.

[mealCode]

after you do yarn start --reset-cache , you still have to do yarn ios and/or yarn android

[oscaradev]

I've had the same problem. Running npm run start --reset-cache didn't do anything.

Running npx react-native start --reset-cache did finally reset the transform cache and the error disappeared.

thanks... chrisribal, its work for me too

[pagman77]

I've had the same problem. Running npm run start --reset-cache didn't do anything.

Running npx react-native start --reset-cache did finally reset the transform cache and the error disappeared.

The npx command did it for me too, wild!

[wy1024]

I couldn't get it to work even all the above methods. But figured out it was simply because my react-native-reanimated/plugin was misplaced too. It needs to be in the outside array in babel.config.js

See https://github.com/software-mansion/react-native-reanimated/issues/3796#issuecomment-1325782665