Skip to content

React Native Debugger - ERROR - TurboModuleRegistry.getEnforcing(...): 'NativeReanimated'  #1663

Closed

Description

@ionflow

Description

Running a basic example in an Expo client while running React Native Debugger on port 19000. Getting the following error:

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

Screenshots

image

Steps To Reproduce

Expected behavior

No errors

Actual behavior

Error (see above)

Snack or minimal code example

import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  Easing,
} from "react-native-reanimated";
import { View, Button } from "react-native";
import React from "react";

export default function AnimatedStyleUpdateExample(props) {
  const randomWidth = useSharedValue(10);

  const config = {
    duration: 500,
    easing: Easing.bezier(0.5, 0.01, 0, 1),
  };

  const style = useAnimatedStyle(() => {
    return {
      width: withTiming(randomWidth.value, config),
    };
  });

  return (
    <View>
      <Animated.View
        style={[
          { width: 100, height: 80, backgroundColor: "black", margin: 30 },
          style,
        ]}
      />
      <Button
        title="toggle"
        onPress={() => {
          randomWidth.value = Math.random() * 350;
        }}
      />
    </View>
  );
}

Package versions

{
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.13.3",
    "expo": "~40.0.0",
    "expo-status-bar": "~1.0.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-reanimated": "2.0.0-rc.0",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "babel-preset-expo": "8.3.0"
  },
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo web",
    "eject": "expo eject"
  },
  "private": true
}

Activity

  1. github-actions commented on Jan 27, 2021

    @github-actions

    Issue validator

    The issue is valid!

  2. productdevbook commented on Feb 1, 2021

    @productdevbook

    The same problem happened with me.

  3. piaskowyk commented on Feb 1, 2021

    @piaskowyk
    Member

    Hey @ionflow
    My first association with this issue is a missing configuration Reanimated for android. Did you add a dependency to MainApplication.java, enabled Hermes, and added the babel plugin? It isn't added by default, unfortunately 😕
    Look at this instruction: https://docs.swmansion.com/react-native-reanimated/docs/installation
    Please let me know if it doesn't help then I will check this.

  4. productdevbook commented on Feb 1, 2021

    @productdevbook

    @piaskowyk

    My first association with this issue is a missing configuration Reanimated for android. Did you add a dependency to MainApplication.java, enabled Hermes, and added the babel plugin? It isn't added by default, unfortunately 😕
    Look at this instruction: https://docs.swmansion.com/react-native-reanimated/docs/installation
    Please let me know if it doesn't help then I will check this.

    These are all attached. I am having the same problem.
    Screen Shot 2021-02-01 at 13 34 53

    "dependencies": {
        "@react-native-async-storage/async-storage": "^1.13.4",
        "@react-native-community/cameraroll": "^4.0.2",
        "@react-native-community/masked-view": "^0.1.10",
        "@react-native-firebase/analytics": "^10.5.1",
        "@react-native-firebase/app": "^10.5.0",
        "@react-native-firebase/dynamic-links": "^10.5.1",
        "@react-native-firebase/messaging": "^10.5.1",
        "@react-navigation/bottom-tabs": "^5.11.7",
        "@react-navigation/native": "^5.9.2",
        "@react-navigation/stack": "^5.14.2",
        "@shopify/restyle": "^1.4.0",
        "formik": "^2.2.6",
        "lottie-ios": "3.1.8",
        "lottie-react-native": "^3.5.0",
        "react": "17.0.1",
        "react-native": "0.64.0-rc.2",
        "react-native-camera": "^3.42.0",
        "react-native-gesture-handler": "^1.9.0",
        "react-native-iphone-x-helper": "^1.3.1",
        "react-native-keyboard-aware-scroll-view": "^0.9.3",
        "react-native-purchases": "^4.0.0",
        "react-native-reanimated": "software-mansion/react-native-reanimated",
        "react-native-redash": "^16.0.8",
        "react-native-safe-area-context": "^3.1.9",
        "react-native-screens": "^2.17.0",
        "react-native-status-bar-height": "^2.6.0",
        "react-native-svg": "^12.1.0",
        "yup": "^0.32.8"
      },
      "devDependencies": {
        "@babel/core": "^7.12.9",
        "@babel/runtime": "^7.12.5",
        "@react-native-community/eslint-config": "^2.0.0",
        "@svgr/cli": "^5.5.0",
        "@types/jest": "^25.2.3",
        "@types/react-native": "^0.63.2",
        "@types/react-test-renderer": "^16.9.2",
        "@types/yup": "^0.29.11",
        "babel-jest": "^26.6.3",
        "babel-plugin-module-resolver": "^4.1.0",
        "eslint": "7.14.0",
        "jest": "^25.1.0",
        "metro-react-native-babel-preset": "^0.64.0",
        "react-native-codegen": "^0.0.6",
        "react-native-rename": "^2.7.0",
        "react-test-renderer": "17.0.1",
        "typescript": "^4.0.1"
      },
      
    
  5. dpyeates commented on Feb 1, 2021

    @dpyeates

    I see this on iOS. It ONLY happens when you turn on debugging. With debugging turned off it does not occur.

  6. jgonet commented on Feb 1, 2021

    @jgonet
    Member

    Have you tried using Flipper for debugging?
    Remote debugging in Chrome works by running JS code in Chrome's V8 and connecting to the Bridge. We use Turbomodules (which don't use Bridge at all) so Chrome can't connect with the native side – this error is expected but could be described better.
    AFAIK Flipper should work with Android without problems on any recent RN version and iOS should work after RN 0.64.

    EDIT: Seems like Flipper doesn't work with Expo yet. If you need a debugger functionality you probably should wait with the Reanimated upgrade.

  7. productdevbook commented on Feb 1, 2021

    @productdevbook

    @jakub-gonet hmm flipper used thank you.
    How to console.log() see flipper ?

  8. walterholohan commented on Feb 20, 2021

    @walterholohan

    @jakub-gonet when do you think a update will be pushed to fix this issue?

    We are using this library in a project however some of our developers use the chrome debugger to debug our app on a physical ios device. Flipper is sometimes difficult to get working on a real physical device.

  9. jgonet commented on Feb 20, 2021

    @jgonet
    Member

    It's not a matter of fixing this issue - chrome debugging works via running JS in the browser and establishing a tunnel to the native app via the bridge. Turbomodules doesn't use the bridge and they're C++ binaries without any means of communication so running their code through chrome is impossible. The only way to debug a component written with turbomodule integration is by using Flipper.

  10. eee9 commented on Mar 8, 2021

    @eee9

    The same error on react native cli project. react native reanimated 2.0.0.
    It doesn't matter device/emulator and Hermes on/off. Android version only checked.
    When I downgrade react native reanimated to 1.13.2 the error disappear.

  11. arled commented on Mar 27, 2021

    @arled

    This is still an issue. is there a fix for this?!!!!!!

  12. walterholohan commented on Mar 28, 2021

    @walterholohan

    @arled there is no fix. This is expected behaviour. Check out @jakub-gonet answer above. TLDR: use flipper to debug

  13. Dakuan commented on Mar 28, 2021

    @Dakuan

    Flipper doesn't work with expo...we have reluctantly refactored to remove all our renanimated code :( vote here: https://expo.canny.io/feature-requests/p/integrate-flipper

  14. range-of-motion commented on Apr 5, 2021

    @range-of-motion

    Same issue here, once you enable debugging shit hits the fan (same error as OP).

  15. fjaffrezic commented on Apr 29, 2021

    @fjaffrezic

    Same issue :-(

  16. devshorts commented on May 17, 2021

    @devshorts

    What does "use flipper to debug" even mean? Flipper doesn't have a way to connect to a debug port to set breakpoints. You still can't do performance profiling. If "debug" just means see "console.log" statements thats a poor statement of debugging, I can see that in the terminal now. What does flipper even give you?

  17. 1337mus commented on Nov 6, 2021

    @1337mus

    @jakub-gonet Any thoughts on @devshorts comment above? Thanks in advance.

  18. dj0024javia commented on Mar 16, 2022

    @dj0024javia

    Any Updates on this?

  19. AzeemSarwar1 commented on Jul 25, 2023

    @AzeemSarwar1

    No update till react-native-reanimated 3.3.0😩

  20. piaskowyk commented on Jul 25, 2023

    @piaskowyk
    Member

    Latest version of Reanimated 2 (2.17.0) and 3 (3.4.0). should supports remote debugger 🤔

  21. amadeus commented on Aug 15, 2023

    @amadeus
    Contributor

    When attempting to profile on the UI thread, I can start the profiler, but when I end it, the app crashes (both on ios and android) with the following error on Android:

    CleanShot 2023-08-15 at 15 18 04@2x
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions