app crashes if debugging mode is enabled

[Yandamuri]

Description

I am using react-native-reanimated as a dependency of react-native-draggable-flatlist. Since I started using reanimated, app crashes if debugging mode is enabled. Once I uninstall reanimated package then app runs in debugging mode perfectly.

Screenshots

Steps To Reproduce

1. Just install the react-native-reanimated as per docs and then enable debugging mode. You can encounter this error

Expected behavior

debugging mode should work as usual

Actual behavior

app crashes if debugging mode is enabled

Snack or minimal code example

No specific code is required. Just installing the package is sufficient.

Package versions

• React: "16.13.1"
• React Native: "0.63.2"
• React Native Reanimated:"2.0.0-rc.2"
• NodeJS: v10.16.2

[github-actions]

Issue validator

The issue is valid!

[kaioduarte]

It seems they don't support v2 yet, install v1 instead.

[Yandamuri]

@kaioduarte what do mean by "they" here? Can you please tell me clearly?

[kaioduarte]

@Yandamuri the maintainers of react-native-draggable-flatlist, there is an open issue asking for support reanimated v2.

[jakub-gonet]

Issue link: computerjazz/react-native-draggable-flatlist#247

There's not much we can do right now about that. Enabling turbomodules disables debugging by chrome, try using Flipper instead.

[Yandamuri]

@jakub-gonet Thank you for your response and suggestion.

I m not sure if it is appropriate to ask here. Can you please have a look at this Stack Overflow question regarding Flipper, if you have time?

[wodCZ]

@jakub-gonet is there something we could do to let user (developer) know that the debug mode causes crash?

I've spent longer than comfortable amount of time trying to find why the app is crashing with No source URL loaded, have you initialised the instance.

Found this thanks to mention in expo/expo#10383 (but I'm not using expo, so the fix isn't applicable in my case).

Maybe the ReanimatedJSIModulePackage could check whether it's running in remote debugging mode and log a message that the app can't be run in such way before crashing?

I know it's mentioned in known limitations that the debug mode is not supported, it's just easily overlooked (especially if someone else in the team does the setup for you).

[tuneerclixlogix]

I am also facing same issue of No source URL loaded, have you initialised the instance in debugging mode. Has anyone found any solution yet with the react native cli ?

[newfylox]

I've been looking for hours about this bug and now I found this issue on Github. I was using a new ejected Expo app to notice that react-native-reanimated was installed with v2. Using Flipper instead of Chrome DevTools or removing this package solved the problem.

I am using yarn start instead of expo start, probably that's why.

There should definitely have an another warning message to tell people that it can be the problem.

[yakmoon]

Apparently there is no solution for this atm. it's very frustrating to code without the debugger. and I can not uninstall reanimated just for this.

[wodCZ]

This is not related just to reanimated and the debugger support is not a thing reanimated can "fix", since it's because of react native architecture (or better, turbo modules).
While it's annoying that the app just crashes when you enable remote debugging, it doesn't seem that reanimated can do anything more than adding a huge warning box to the installation instructions.

• Like the box there says, you can use Flipper to debug your app.
• Some tips on how to debug were also mentioned in RN's Turbo Modules topic. You can try using Safari to debug iOS app.
• There are also special Hermes debugging instructions.
• With expo it's more complicated as you can find in their documentation. You can follow the feature request and try this workaround in the meanwhile.
• You can join the discussion at react native's proposal repo and propose a solution. Or just subscribe.

[farshidshahmoradi1996]

same problem .

[valery-lavrik]

a similar problem.
Do I understand correctly that react-native should solve the problem???

[ashishprasad2163]

++

[valery-lavrik]

it seems there is a commit with a solution to the problem. It remains to wait for the new release and you can check again

https://github.com/software-mansion/react-native-reanimated/pull/2795/files

[ashishprasad2163]

@valery-lavrik
Project/node_modules/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/ReanimatedProxyPackage.java
I'm finding only this file inside the specified path in the commit.
And looks like something is missing from the class. version:"react-native-reanimated": "^2.3.1"
Am I doing some mistake installing this package?

package com.swmansion.reanimated;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.Arrays;
import java.util.List;

import com.swmansion.reanimated.ReanimatedPackage;

public class ReanimatedPackage implements ReactPackage {
  // dummy package
}

[valery-lavrik]

Fixed in release https://www.npmjs.com/package/react-native-reanimated/v/2.4.0

[ashishprasad2163]

@valery-lavrik .This worked for me. Thanks a ton!

After installing react-native-reanimated 2.4.0, the application stopped crashing on debugging mode enabled.

After launching, the application became unresponsive with error:
Invariant Violation: Calling synchronous methods on native modules is not supported in Chrome.

I am on RN 0.65.0, so I found a link that states a temporary fix for the error.
Link

callNativeSyncHook(
    moduleID: number,
    methodID: number,
    params: any[],
    onFail: ?Function,
    onSucc: ?Function,
  ): any {
    const isDebuggingEnabled = (typeof atob !== 'undefined');
    this.processCallbacks(moduleID, methodID, params, onFail, onSucc);
    if(!isDebuggingEnabled)
    {
      return global.nativeCallSyncHook(moduleID, methodID, params);
    }
  }

make these changes in the given file: node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js

After making these changes, I'm to run the application in debug mode without any crashes.

Looking for some permanent fix.

[ZeeshanAhmadKhalil]

Thanks @valery-lavrik For me, it just worked by updating to react-native-reanimated 2.4.1

npm i react-native-reanimated@next

[sanjeevdhavala]

I was on react-native-reanimated version 2.3.1 and after upgrading it to 2.4.1, it worked. Thank you @valery-lavrik

[uzuntonev]

It was fixed for me after being updated to react-native-reanimated 2.4.0

[anutting]

It looks like this was only fixed on iOS, any word on a fix for Android?

[pierroo]

I can confirm this doesn't work on android, I am also getting the error "Invariant Violation: Calling synchronous methods on native modules is not supported in Chrome."
Using latest version 2.5.0

By any chance, did you find a solution @anutting?

[fadi-quader-mox]

the issue still exists on with version 2.6.0

[valery-lavrik]

the issue still exists on with version 2.6.0

https://docs.swmansion.com/react-native-reanimated/docs/

[fadi-quader-mox]

@valery-lavrik it should be fixed in version 2.4.0 https://github.com/software-mansion/react-native-reanimated/releases/tag/2.4.0