Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'NativeReanimated' could not be found

Question

so this is the first time I used Reanimated 2 and unfortunately my App get crashed with the above message. Unable to view my app screen.

Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'NativeReanimated' could not be found. Verify that a module by this name is registered in the native binary.

I'm using reanimated here

import React from 'react'
import Item from '../../Common/Item'
import {View,Text,FlatList,StyleSheet , TouchableOpacity} from 'react-native'

import Animated, {useAnimatedStyle} from 'react-native-reanimated';
import {bin,mix,useTiming} from 'react-native-redash' 


const {interpolate,not}=Animated
const SectorItem=({sector,clients,index,opened,toggleSector})=> {
        const {name}=sector
        const ITEM_HEIGHT = 100
        const transition = useTiming(opened)
        const style = useAnimatedStyle(()=>({
          height: mix(transition,0,clients.length * ITEM_HEIGHT)
        }))
      
        //here we wll also have the clients of each sector 
        return <Item xStyle={styles.item}>
                <View>
                    <Text>{name}</Text>
                    <TouchableOpacity onPress={e=>toggleSector(index)}>
                      <Text>open</Text>
                    </TouchableOpacity>
                </View>
                <Animated.View style={style}>
                    <FlatList 
                       data   = {clients}
                       style  = {{...styles.Clientlist,display:opened?'flex':'none'}}
                       contentContainerStyle = {props =>(styles.flatList)}
                       showsVerticalScrollIndicator={false}
                       renderItem   = {({ item }) =><Item xStyle={{marginBottom:8}}> 
                         <TouchableOpacity>
                           {/* redirect to client  */}
                              <Text>{item.name} </Text>
                         </TouchableOpacity>
                       </Item> }
                       keyExtractor = {(item, index) => index.toString()}
                    />
                </Animated.View>
        </Item>
   
}

export default SectorItem
var styles = StyleSheet.create({
    list:{
        borderColor:'#fff',
        padding:16,
    },
    Clientlist:{
        borderColor:'#fff',
        padding:16,
    },
    flatList:{ 
        alignItems: 'center',
         justifyContent: 'center', 
         height:200,
         flex:1
    },
    item:{
        marginBottom:8
    }
  });

my package.json :

{
  "name": "DistributionApp",
  "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.10",
    "@react-navigation/drawer": "^5.11.5",
    "@react-navigation/native": "^5.9.0",
    "@react-navigation/stack": "^5.13.0",
    "@rematch/core": "^2.0.0-next.10",
    "cross-fetch": "^3.0.6",
    "nanoid": "^3.1.20",
    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-native-elements": "^3.1.0",
    "react-native-fast-image": "^8.3.4",
    "react-native-gesture-handler": "^1.9.0",
    "react-native-reanimated": "^2.0.0-rc.2",
    "react-native-redash": "^16.0.8",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "^2.16.1",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "typescript": "^4.1.3"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/runtime": "^7.8.4",
    "@react-native-community/eslint-config": "^1.1.0",
    "babel-jest": "^25.1.0",
    "eslint": "^6.5.1",
    "jest": "^25.1.0",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

no matter whether Hermes is enabled or disabled, I am getting this error. What should I exactly do? what version of `reanimated` should I exactly use? — ThinkAndCode, Feb 22 '21 at 06:23
I have included `react-native-reanimated-plugin` in babel.config.js. But I am not sure about hermes engine plugin. Can you tell me what it is? — ThinkAndCode, Feb 23 '21 at 06:26
[Joshua Nwankwo](https://stackoverflow.com/users/11482122) wrote an [Answer](https://stackoverflow.com/a/66709376) saying "Please their official documentation, it solved mine https://docs.swmansion.com/react-native-reanimated/docs/installation/" — Scratte, Mar 19 '21 at 21:29

score 5 · Answer 1 · answered Mar 10 '21 at 04:40

5

reanimated package is not auto-linked in android, please follow the steps mentioned on the official documentation.

You need to make changes in android/app/build.gradle

project.ext.react = [
 enableHermes: true,  // clean and rebuild if changing
]

add following in babel.config.js

plugins: ['react-native-reanimated/plugin']

add following in MainApplication.java

    @Override
    protected JSIModulePackage getJSIModulePackage() {
      return new ReanimatedJSIModulePackage(); // <- add
    }

answered Mar 10 '21 at 04:40

Vikesh Yadav

101
5

1

follow the steps mentioned here https://docs.swmansion.com/react-native-reanimated/docs/installation/ – Vikesh Yadav Mar 10 '21 at 04:40
really is not auto linked ? that wasn't mentioned in the docs , is it ? – سعيد Mar 11 '21 at 14:17

Muhammad zubair · Answer 2 · 2021-03-26T05:50:45.257

2

I've downgrande "react-native-reanimated": "2.0.0" to "react-native-reanimated": "1.13.0",

Past in terminal yarn add react-native-reanimated@1.13.0 or npm install react-native-reanimated@1.13.0 --save

Fixed.

edited Mar 26 '21 at 05:50

answered Mar 23 '21 at 10:38

Muhammad zubair

106
1
7

score 0 · Answer 3 · answered Mar 22 '21 at 22:23

I had experienced the same issue with React Native ^0.64.0 and react-navigation 5.x

Reanimated dependency "react-native-reanimated": "^2.0.0" as stated in the official documentation requires some additional configs, including babel, Hermes, and MainApplication.java

Please follow the official documentation to resolve React Native Reanimated

requires additional steps apart from just adding a dependency to package.json

After making changes make sure to clear gradle and yarn( or npm ) caches

score 0 · Answer 4 · answered Mar 25 '21 at 07:19

0

following an official guid helped me doc

answered Mar 25 '21 at 07:19

wentris

463
4
10

score 0 · Answer 5 · answered Apr 12 '21 at 18:16

0

Running npx react-native link react-native-reanimated fixed the issue for me.

Appears that this added the following line to ios/Podfile:

pod 'RNReanimated', :path => '../node_modules/react-native-reanimated'

answered Apr 12 '21 at 18:16

ccheney

2,212
1
16
14

score 0 · Answer 6 · answered Aug 16 '22 at 08:42

For iOS

Notes: Im using Xcode Version 13.4.1 (13F100) and running the app in Mac M1.

I think this error is same like what i got, i got this error :

Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'ImageLoader' could not be found

And i fix the error with add arm64,amv7 at Exclude Architectures -> Debug -> Any SDK

score 0 · Answer 7 · answered May 12 '23 at 11:26

0

In my case, it was because I didn't installed pods.I solved it by moving to ios directory and running pods install

cd ./ios
pod install

answered May 12 '23 at 11:26

Dev Gaud

676
6
10

score 0 · Answer 8 · answered Aug 19 '23 at 15:59

iOS Fix:

If you are facing this issue while running for iOS device, try running pod install inside the ios folder It worked for me.

Inside your project root directory:

cd ios

pod install

After this cd .. back to your root directory and run your project, it should work fine.

score 0 · Answer 9 · answered Sep 02 '23 at 08:17

0

i had same experience using react-native-webview. just apply rebuild the application and re-run it.. the problem will be solved.

answered Sep 02 '23 at 08:17

Jobaer Hassan

1

score -1 · Answer 10 · edited Mar 18 '21 at 09:11

Error - TurboModuleRegistry.getEnforcing(...): 'NativeReanimated'
Cause - React Native Reanimated 2.0

I got this TurboModuleRegistry.getEnforcing(...): 'NativeReanimated' error and I found the solution:

Step 1 - Download react native project from github: https://github.com/software-mansion-labs/reanimated-2-playground

Step 2 - Then run command

npm install
react-native start
react-native run-android

and build app.

Step 3 - when it works, move your required project files and install your required npm pakages.

Step 4 - Then run commands

npm cache clean --force
cd android
gradlew clean    
gradle cleanBuildCache    
gradlew build --refresh-dependencies
cd..
npx react-native start --reset-cache
npx react-native run-android

Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'NativeReanimated' could not be found

10 Answers10

iOS Fix:

Linked