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"
  }
}

Franklynfrankness

getting same error...did you find any solution? – Announcer

yeah did you enabke Hermes ? – Parlor

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? – Announcer

did you include hermes plugin in ``` babel.config.js``` – Parlor

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? – Announcer

Joshua Nwankwo wrote an Answer saying "Please their official documentation, it solved mine docs.swmansion.com/react-native-reanimated/docs/installation" – Skillern

Answer 1

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
    }

Mexicali

follow the steps mentioned here docs.swmansion.com/react-native-reanimated/docs/installation – Mexicali

really is not auto linked ? that wasn't mentioned in the docs , is it ? – Parlor

Answer 2

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

Past in terminal yarn add [email protected] or npm install [email protected] --save

Fixed.

Calceolaria

Answer 3

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

Cabob

Also works for macos. You could update your answer – Hylozoism

Answer 4

android

npm install react-native-gesture-handler
npx react-native link react-native-gesture-handler
npx react-native run-android

ios

npm install react-native-gesture-handler
npx react-native link react-native-gesture-handler
cd ios && pod install && cd ..
npx react-native run-ios

Competent

installing the npm install react-native-gesture-handler fixed the error for me – Aiden

Answer 5

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

Stovepipe

Answer 6

following an official guid helped me doc

Attaway

Answer 7

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'

Chagrin

Answer 8

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

Prehension

Answer 9

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.

Lucie

Answer 10

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

Ramsay

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Sorrel

Answer 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

Spickandspan