Error: Failed to initialize react-native-reanimated library

Question

I was working on a project on react native trying to create drawer navigation

• I installed a navigation drawer, gesture handler, and reanimated libraries

• and when I run I got an error 1st 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, js engine: hermes

so I did according to the suggestion in this error I added plugins:['react-native-reanimated/plugin' in the babel.config.js and started with npm start ----reset cache that gave me another error:

2nd error

error: index.js: Unknown option: .Plugins. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.

here is my package.json

{
  "name": "Train",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/drawer": "^6.5.0",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/stack": "^6.3.1",
    "react": "18.1.0",
    "react-native": "0.70.1",
    "react-native-gesture-handler": "^2.6.2",
    "react-native-reanimated": "^2.10.0",
    "react-native-safe-area-context": "^4.3.4",
    "react-native-screens": "^3.17.0",
    "react-navigation-stack": "^2.10.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.72.1",
    "react-test-renderer": "18.1.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

my index.js

import {AppRegistry} from 'react-native';
import App from './App';
import Login from './pages/Login';
import Home from './pages/Home';
import cart from './pages/Drawer/cart';
import items from './pages/Drawer/items';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

my babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  Plugins:['react-native-reanimated/plugin'],//I added this line because of the 1st error 
};

my app.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator} from '@react-navigation/stack';
import {createDrawerNavigator} from '@react-navigation/drawer';

//for stack
import Login from './pages/Login';
import Home from './pages/Home';
//for drawer
import cart from './pages/Drawer/cart';
import items from './pages/Drawer/items';
import wallet from './pages/Drawer/wallet';
import orders from './pages/Drawer/orders';


const stack = createStackNavigator();
const Drawer = createDrawerNavigator();

function MystackNav(){
  return(
    <stack.Navigator>
      <stack.Screen name='Login' component={Login} options={{headerShown:false}}/>
      <stack.Screen name='Home' component={Home} options={{headerShown:false}}/>
      <stack.Screen name='Drawer' component={MyDrawer}/>
    </stack.Navigator>
  )
}

function MyDrawer(){
  return(
    <Drawer.Navigator>
      <Drawer.Screen name='cart' component={cart}/>
    </Drawer.Navigator>
  )
}

export default function App(){
  return(
    <NavigationContainer>
      <MystackNav/>
    </NavigationContainer>
  )
}

Indented

lowercase 'p' (plugin) in babel.config.js? – Nipha

Yes as @JácintVarga says the second error will disappear with lowercase, but then you will return back to the first one most probably – Pillowcase

Did you find a way to resolve this? – Quadrangular

If you have other plugins defined/listed, ensure that you listed 'react-native-reanimated/plugin' last – Petrina

This issue on my end seems to have fixed itself. I did most of the changes suggested by this thread and others and after a few restarts it was suddenly fixed. Then I undid the changes one by one to see which one had been the fix, but nothing caused the error to come back and now I am at where I started before applying any fixes except the drawer navigator works. – Wirth

Answer 1

Mine is working the only diff is:

babel.config.js

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

package.json

{
  "name": "awesomeproject2",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-navigation/bottom-tabs": "^6.4.0",
    "@react-navigation/drawer": "^6.5.0",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/stack": "^6.3.2",
    "babel-preset-expo": "^9.2.0",
    "expo": "^46.0.16",
    "expo-status-bar": "^1.4.0",
    "react": "~18.1.0",
    "react-native": "^0.70.3",
    "react-native-gesture-handler": "^2.7.1",
    "react-native-reanimated": "^2.11.0",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.18.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
    "babel-preset-expo": "^9.2.0"
  },
  "private": true
}

Confess

Answer 2

1.Update babel.config.js

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

2.run expo start -c

references - https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/

Hild

Answer 3

tl/dr: suspect I resolved this by running npx expo start --clear instead off npm start --reset-cache after adding 'react-native-reanimated/plugin' to babel plugins

I had this error same error when trying to run my app using expo go on android:

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: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.

According to the guide I just needed update the babel.config.js as mentioned by multiple people above, though this did not work.

However it started working for me when I followed the section on the guide for updating for web support. https://docs.expo.dev/versions/latest/sdk/reanimated/#installation

plugins: [    
  '@babel/plugin-proposal-export-namespace-from',
  'react-native-reanimated/plugin',
],

Followed but running:

npx expo start --clear

I suspect what fixed it was using npx expo start --clear, as previously I had been using npm start --reset-cache instead.

Hollowell

Answer 4

1. Update babel.config.js

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

2. Update App.js

$import "react-native-gesture-handler"; add import top of the app.js

3. run $ npx expo start -c

Telemechanics

Answer 5

After adding the "plugins: ["react-native-reanimated/plugin"]," to the babel.config file

Save it and stop the server if running.

Then clear the cache.

Assuming you are using expo

type "npx expo start -c"

Then re-run the dev server and reload It should take sometime

That's how mine worked

Arnoldarnoldo

did you get a warning about not having the correct versions of react-native-pager-view and react-native-reanimated - see my answer – Panfish

I can't remember if there was a warning – Arnoldarnoldo

Is your issue sorted without my fix(es)? – Panfish

yes my issue has been sorted – Arnoldarnoldo

Nice one ))) <-- smile – Panfish

Answer 6

I had the same error after installing the react-native-reanimated and adding the babel plugin to my babel.config.js.

I solved it by stopping the server the run this command

npm start -- --clear

Arnica

Answer 7

Expo related

I followed the babel.config fixes mentioned on the reanimated installation guide which didn't fix the issue.

when I ran npx expo start --clear i received this message in the bash terminal

Starting project at C:\Users\****\development\******-**\frontend\****-**
Some dependencies are incompatible with the installed expo version:
  [email protected] - expected version: 6.1.2
  [email protected] - expected version: ~2.14.4     
Your project may not work correctly until you install the correct versions of the packages.
Install individual packages by running npx expo install [email protected] react-native-reanimated@~2.14.4

so then I ran yarn add [email protected] react-native-reanimated@~2.14.4 as I'm using yarn not npm ( npm version -> npm install [email protected] react-native-reanimated@~2.14.4) and this fixed my issue which was due to my version of Expo's dependency requirements/limitations.

After downgrading and with my babel config set up as such (a previous warning mentioned not having this plugin installed '@babel/plugin-transform-export-namespace-from' so I added it to the plugins array BEFORE reanimated - by the way there was a mention that the reanimated plugin has to be listed last too!)

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

};

KEY POINTS

• downgrade to correct versions - npx expo start can help
• install and use the @babel/plugin-transform-export-namespace-from if you see this error when tring to start your server
• list the reanimated plugin last in your babel config

Panfish

Answer 8

For react native bare project:

running yarn start --reset-cache or npx react-native start --reset-cache worked

Epode

Answer 9

1. Go inside the node modules and look for react-native-reanimated package.

2. Check the version of react-native used by the package inside package.json.

3. Switch to the same version of react native in your main project and do a cleanup by resetting the metro cache yarn start --reset-cache and android clean as well cd android && ./gradlew clean && cd..

4. yarn and then yarn android

Ullund

Answer 10

If you really are on the edge of despair, I have had this error many times in all sorts of (mostly obscure) forms (function not found, something is undefined, something is null, blah blah).

Systematically check whether you have different versions of the library in your entire code base (also node_modules, recursively). If so, it might help to put a resolution block in your package.json:

  "resolutions": {
    "@types/react": "17",
    "react-native-reanimated": "3.6.1"
  }

Good luck and stay positive...!

Psychographer

Answer 11

After spending an entire day dealing with this issue and trying out the solutions mentioned on this page, i managed to solve it by doing the following

1. removing the .gradle folder in /android/.gradle
2. and running npm run android

Defluxion