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

user_13999386 0
Viewed 9417

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"
  }
}
react-native-reanimated react-native node.js
7 Answers

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

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.

user_87714450

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

user_139487490

following an official guid helped me doc

user_142305110

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'

user_1703620

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

xcode config Exclude Architectures

user_132233540 
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
user_49981730
Related