global.performance.now is not a function

michaelknoch commented 2 years ago

Description

I run into the following type error when trying to attach a chrome debugger to the iOS simulator or physical device. global.performance.now is not a function

Expected behavior

The type error should not appear and chrome debugging should be possible

Actual behavior & steps to reproduce

So far I was not able to reproduce it in a minimal code example (still working on it), but I can fix it in my app by commenting out every import of react-native-reanimated

Snack or minimal code example

tbd soon

Package versions

React Native: 0.66.0 (also seen on 0.66.4)
React Native Reanimated: 2.3.0
NodeJS: v16.13.1
Xcode: 13.1
Chrome, Brave, react-native debugger with latest versions

Affected platforms

[x] Android
[x] iOS
[ ] Web

github-actions[bot] commented 2 years ago

Issue validator

The issue is valid!

enesozturk commented 2 years ago

Same here with v2.3.1 in Expo app. Trying to use it with Storybook RN. I have a basic stack:

<Stack.Navigator>
  <Stack.Screen name="Home" component={TabNavigator} />
  <Stack.Screen name="Storybook" component={Story} />
</Stack.Navigator>

When I navigate to Storybook page, it is ok but when press go back. I got the issue.

Packages:

{
  "expo": "^44.0.0",
  "react-native-reanimated": "~2.3.1",
}

Should I share any other details?

Edit: Looks like it has nothing to do with react navigation. When I try to unmount Storybook, it throws this error.

arealmaas commented 2 years ago

Is this going to be released in a version soon?

boles-tradepending commented 2 years ago

I think this issue has regressed with this line change https://github.com/software-mansion/react-native-reanimated/commit/9c441ac8050e7d389563b6281a533666cf70cc02#diff-78a1300914cdf4318497f5e74a0a44c4f5174ef2567339edeb0d646c1ddbfaf0L379

kennethlynne commented 2 years ago

If you're on 2.3.1 just use https://www.npmjs.com/package/patch-package

patches/react-native-reanimated+2.3.1.patch

diff --git a/node_modules/react-native-reanimated/src/reanimated2/core.ts b/node_modules/react-native-reanimated/src/reanimated2/core.ts
index 2e0c38a..e9ae28f 100644
--- a/node_modules/react-native-reanimated/src/reanimated2/core.ts
+++ b/node_modules/react-native-reanimated/src/reanimated2/core.ts
@@ -383,9 +383,11 @@ if (!NativeReanimatedModule.useOnlyV1) {
         info: runOnJS(capturableConsole.info),
       };
       _setGlobalConsole(console);
-      global.performance = {
-        now: global._chronoNow,
-      };
+      if (global.performance == null) {
+        global.performance = {
+          now: global._chronoNow,
+        };
+      }
     })();
   }
 }

boles-tradepending commented 2 years ago

@kennethlynne, I tested against the latest commit on the main branch and had to make this change to fix the issue for me using React Native Debugger. The changes above are already in the main branch. I think the !isChromeDebugger check was removed in the commit referenced above.

diff --git a/src/reanimated2/core.ts b/src/reanimated2/core.ts
index e9ae28f17..3b42f1094 100644
--- a/src/reanimated2/core.ts
+++ b/src/reanimated2/core.ts
@@ -1,7 +1,7 @@
 /* global _WORKLET _getCurrentTime _frameTimestamp _eventTimestamp, _setGlobalConsole */
 import NativeReanimatedModule from './NativeReanimated';
 import { Platform } from 'react-native';
-import { nativeShouldBeMock, shouldBeUseWeb, isWeb } from './PlatformChecker';
+import { nativeShouldBeMock, shouldBeUseWeb, isChromeDebugger, isWeb } from './PlatformChecker';
 import {
   BasicWorkletFunction,
   WorkletFunction,
@@ -371,7 +371,7 @@ if (!NativeReanimatedModule.useOnlyV1) {
       : (workletValueSetterJS as <T>(value: T) => void)
   );

-  if (!isWeb() && isConfigured()) {
+  if (!isWeb() && !isChromeDebugger() && isConfigured()) {
     const capturableConsole = console;
     runOnUI(() => {
       'worklet';