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

[DeveloperTheExplorer]

Description

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

1. Using expo install react-native-reanimated
2. Adding react-native-reanimated/plugin to the plugins array for babel.config.js.
3. 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

1. Use expo install react-native-reanimated to install the library in an expo project
2. Add react-native-reanimated/plugin to the plugins array for babel.config.js.
3. 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

[DeveloperTheExplorer]

Anyone? Could I get some sort of assistance or at least some workaround in the meantime? I'm a bit tight on schedule. Thanks.

[DeveloperTheExplorer]

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'
        ]
    };
};

[dev-sumanaditya]

npx expo start --clear worked for me.

[pcsaunak]

Well this worked for me as well, I followed the documentation on the official website, and it mentioned the plugin as - ['react-native-reanimated/plugin'] this made be believe that it should be part of the plugins array. Thanks to this post, its now working. I am hoping the official documentation highlights this.

[Kleberson-Silva]

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

isso funcionou pra mim

[Veang-dev6]

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

[anthonybdev]

followed all steps as in expo docs, getting this error:

[stvncode]

If some are trying to see in the web, you have to install in your package.json the lib @babel/plugin-proposal-export-namespace-from and also put it in your babel.config plugins

[captainkidd5]

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'
        ]
    };
};

I could kiss you

[konjoinfinity]

npx expo start --clear worked for me.

This worked for me! Thanks.

[Usama-Saud]

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

[xMichaelRodriguez]

I have this error and I can't solve it, I have done everything recommended and nothing.

[xMichaelRodriguez]

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

This is my babel config,
And 
This is my app.tsx

```TS
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import 'react-native-gesture-handler';
import {DefaultTheme, NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {InitialScreen} from './screens/InitialScreen';
import {SignInScreen} from './screens/SignInScreen';
import {adaptNavigationTheme} from 'react-native-paper';
import {SingUpScreen} from './screens/SignUpScreen';
import {ResetPasswordScreen} from './screens/ResetPasswordScreen';
import {isSigned} from './constants/auth';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {HomeScreen} from './screens/dashboard/HomeScreen';
import {ServicesScreen} from './screens/dashboard/ServicesScreen';
const {LightTheme} = adaptNavigationTheme({reactNavigationLight: DefaultTheme});
const Stack = createNativeStackNavigator();

const Drawer = createDrawerNavigator();

const DrawerComponent = () => {
  return (
    <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Services" component={ServicesScreen} />
    </Drawer.Navigator>
  );
};

function App() {
  return (
    <NavigationContainer theme={LightTheme}>
      <Stack.Navigator initialRouteName="InitialScreen">
        {isSigned() ? (
          <DrawerComponent />
        ) : (
          <Stack.Group>
            <Stack.Screen
              name="Auth"
              component={InitialScreen}
              options={{
                headerShown: false,
              }}
            />
            <Stack.Screen
              name="SignIn"
              component={SignInScreen}
              options={{headerShown: false}}
            />
            <Stack.Screen
              name="SignUp"
              component={SingUpScreen}
              options={{headerShown: false}}
            />
            <Stack.Screen
              name="ResetPasswordScreen"
              component={ResetPasswordScreen}
              options={{headerShown: false}}
            />
          </Stack.Group>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

[saadsaleem187]

@xMichaelRodriguez

1. Remove the app from a simulator and close the simulator.

2. Close xcode if opened.

3. Terminate metro bundler.

4. Run below command.

   npm start -- --reset-cache OR yarn start --reset-cache

5. Run your app.

[psychosoft]

App crashes on launch when running build. aab (Not bundled correctly) when tested in android play console.

Followed all the steps of installing the reanimated-library

App works fine in Expo Go.

eas-cli/3.6.0 darwin-x64 node-v14.17.1

Everything in this thread so far tried without success

babel.config.js:

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

metro.config.js:

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

module.exports = config;

package.json:

  "name": "spotify-sport-dj-remote",
  "version": "1.0.1",
  "keywords": [
    "react",
    "expo",
    "template",
    "typescript",
    "nativebase"
  ],
  "license": "MIT",
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
    "@babel/preset-env": "^7.20.2",
    "@expo-google-fonts/inter": "^0.2.0",
    "@expo-google-fonts/vt323": "^0.2.0",
    "@expo/config-plugins": "^5.0.2",
    "@miblanchard/react-native-slider": "^2.1.0",
    "@react-native-async-storage/async-storage": "~1.17.3",
    "@react-native-community/slider": "4.2.4",
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/drawer": "^6.1.8",
    "@react-navigation/material-top-tabs": "^6.0.6",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/native-stack": "^6.2.5",
    "@react-navigation/stack": "^6.3.2",
    "add": "^2.0.6",
    "axios": "^0.24.0",
    "babel": "^6.23.0",
    "babel-eslint": "^10.1.0",
    "babel-preset-expo": "~9.2.1",
    "expo": "~47.0.12",
    "expo-app-loading": "~2.1.1",
    "expo-auth-session": "~3.8.0",
    "expo-blur": "~12.0.1",
    "expo-crypto": "~12.0.0",
    "expo-font": "~11.0.1",
    "expo-haptics": "~12.0.1",
    "expo-modules-autolinking": "~1.0.0",
    "expo-random": "~13.0.0",
    "expo-screen-orientation": "~5.0.1",
    "expo-sensors": "~12.0.1",
    "expo-splash-screen": "~0.17.5",
    "expo-status-bar": "~1.4.2",
    "expo-updates": "~0.15.6",
    "expo-web-browser": "~12.0.0",
    "mobx": "^6.3.9",
    "mobx-react": "^7.2.1",
    "native-base": "3.2.1",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-native": "0.70.5",
    "react-native-app-link": "^1.0.1",
    "react-native-draggable": "^3.3.0",
    "react-native-draggable-flatlist": "^3.0.6",
    "react-native-gesture-handler": "~2.8.0",
    "react-native-pager-view": "6.0.1",
    "react-native-reanimated": "~2.12.0",
    "react-native-reanimated-carousel": "3.3.0",
    "react-native-safe-area-context": "4.4.1",
    "react-native-screens": "~3.18.0",
    "react-native-smooth-blink-view": "^1.0.3",
    "react-native-svg": "13.4.0",
    "react-native-tab-view": "^3.1.1",
    "react-native-text-ticker": "^1.14.0",
    "react-native-typewriter": "^0.7.0",
    "react-native-vector-icons": "^9.2.0",
    "react-native-web": "~0.18.7",
    "react-singleton-hook": "^4.0.0",
    "recoil": "^0.5.2",
    "styled-components": "^5.3.0",
    "styled-system": "^5.1.5",
    "tonal-key": "^2.2.2",
    "yarn": "^1.22.17"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@types/react": "~18.0.24",
    "@types/react-native": "~0.70.6",
    "@typescript-eslint/eslint-plugin": "^4.33.0",
    "@typescript-eslint/parser": "^4.33.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-cypress": "^2.12.1",
    "eslint-plugin-flowtype": "^5.9.1",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.26.1",
    "eslint-plugin-react-hooks": "^4.3.0",
    "jest-expo": "^47.0.0",
    "prettier": "^2.4.1",
    "react-test-renderer": "17.0.1",
    "typescript": "^4.6.3"
  },
  "bugs": {
    "url": "https://github.com/GeekyAnts/nativebase-templates/issues"
  },
  "homepage": "https://github.com/GeekyAnts/nativebase-templates#readme",
  "author": "Aditya Jamuar",
  "private": true
}

[MonchiLin]

If you are using Monorepo, please check yarn why react-native-reanimated.

[parth270]

App crashes on launch when running build. aab (Not bundled correctly) when tested in android play console.

Followed all the steps of installing the reanimated-library

App works fine in Expo Go.

eas-cli/3.6.0 darwin-x64 node-v14.17.1

Everything in this thread so far tried without success

babel.config.js:

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

metro.config.js:

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

module.exports = config;

package.json:

  "name": "spotify-sport-dj-remote",
  "version": "1.0.1",
  "keywords": [
    "react",
    "expo",
    "template",
    "typescript",
    "nativebase"
  ],
  "license": "MIT",
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
    "@babel/preset-env": "^7.20.2",
    "@expo-google-fonts/inter": "^0.2.0",
    "@expo-google-fonts/vt323": "^0.2.0",
    "@expo/config-plugins": "^5.0.2",
    "@miblanchard/react-native-slider": "^2.1.0",
    "@react-native-async-storage/async-storage": "~1.17.3",
    "@react-native-community/slider": "4.2.4",
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/drawer": "^6.1.8",
    "@react-navigation/material-top-tabs": "^6.0.6",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/native-stack": "^6.2.5",
    "@react-navigation/stack": "^6.3.2",
    "add": "^2.0.6",
    "axios": "^0.24.0",
    "babel": "^6.23.0",
    "babel-eslint": "^10.1.0",
    "babel-preset-expo": "~9.2.1",
    "expo": "~47.0.12",
    "expo-app-loading": "~2.1.1",
    "expo-auth-session": "~3.8.0",
    "expo-blur": "~12.0.1",
    "expo-crypto": "~12.0.0",
    "expo-font": "~11.0.1",
    "expo-haptics": "~12.0.1",
    "expo-modules-autolinking": "~1.0.0",
    "expo-random": "~13.0.0",
    "expo-screen-orientation": "~5.0.1",
    "expo-sensors": "~12.0.1",
    "expo-splash-screen": "~0.17.5",
    "expo-status-bar": "~1.4.2",
    "expo-updates": "~0.15.6",
    "expo-web-browser": "~12.0.0",
    "mobx": "^6.3.9",
    "mobx-react": "^7.2.1",
    "native-base": "3.2.1",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-native": "0.70.5",
    "react-native-app-link": "^1.0.1",
    "react-native-draggable": "^3.3.0",
    "react-native-draggable-flatlist": "^3.0.6",
    "react-native-gesture-handler": "~2.8.0",
    "react-native-pager-view": "6.0.1",
    "react-native-reanimated": "~2.12.0",
    "react-native-reanimated-carousel": "3.3.0",
    "react-native-safe-area-context": "4.4.1",
    "react-native-screens": "~3.18.0",
    "react-native-smooth-blink-view": "^1.0.3",
    "react-native-svg": "13.4.0",
    "react-native-tab-view": "^3.1.1",
    "react-native-text-ticker": "^1.14.0",
    "react-native-typewriter": "^0.7.0",
    "react-native-vector-icons": "^9.2.0",
    "react-native-web": "~0.18.7",
    "react-singleton-hook": "^4.0.0",
    "recoil": "^0.5.2",
    "styled-components": "^5.3.0",
    "styled-system": "^5.1.5",
    "tonal-key": "^2.2.2",
    "yarn": "^1.22.17"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@types/react": "~18.0.24",
    "@types/react-native": "~0.70.6",
    "@typescript-eslint/eslint-plugin": "^4.33.0",
    "@typescript-eslint/parser": "^4.33.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-cypress": "^2.12.1",
    "eslint-plugin-flowtype": "^5.9.1",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.26.1",
    "eslint-plugin-react-hooks": "^4.3.0",
    "jest-expo": "^47.0.0",
    "prettier": "^2.4.1",
    "react-test-renderer": "17.0.1",
    "typescript": "^4.6.3"
  },
  "bugs": {
    "url": "https://github.com/GeekyAnts/nativebase-templates/issues"
  },
  "homepage": "https://github.com/GeekyAnts/nativebase-templates#readme",
  "author": "Aditya Jamuar",
  "private": true
}

Hey @psychosoft ! How are you? were you able to solve this issue, I am still struck on it! Thanks

[anupsamanta]

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

[sebastien-f]

ound 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.

I owe you one. I made the same mistake.

[sahilkashyap64]

i was struggling with same issue Did npm install and pod install again.

Error: `Unable to find a specification for React-hermes depended upon by RNReanimated after update 3.3.0 found solution here

I followed these instructions paste ENV['USE_HERMES'] = '0' at the beginning of your Podfile.

cd ios
rm -rf Pods Podfile.lock build
pod install

[belloshehu]

The following worked for me:

1. Adding 'react-native-reanimated/plugin' to the plugins array in the babel.config.js file like so :

  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-reanimated/plugin"],
  };
};

2. running npx expo start --clear in the terminal

[mintutraizine]

if u are using react native cli then add this inside build.config.js module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'], // Add this line }; and start server using npx react-native start --reset-cache and then run app error will gone

[da8ah]

Reanimated for Expo

Expo Router v2 (Drawer)

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

1. Remove the node_modules dependencies

   rm -rf node_modules/

2. 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).

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

5. Make sure you've set hermes engine:

6. Reinstall your packages and start again with the option to clean the cache:
   • npm i
   • npx expo start -c