Error: [Reanimated] UpdatePropsManager is not available on non-native platform.

[valery-lavrik]

Description

I just upgraded react-native from version 0.72.6 to 0.72.7 and got an error when launching the application:

there is a discussion of this problem elsewhere https://github.com/react-navigation/react-navigation/issues/11729

Steps to reproduce

I just upgraded react-native from version 0.72.6 to 0.72.7 and got an error when launching the application:

Reanimated version

"react-native-reanimated": "^3.5.4",

React Native version

"react-native": "0.72.7",

Platforms

Android

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[github-actions[bot]]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[memanoj]

(Fixed) Getting the same issue with Apple M2 iOS but I fixed it by making some changes just removing this (Issue with debugger only) You can also use patch package for this

    if (shouldBeUseWeb()) {
       
    } 
    
    in both files and just let's execute the code of the else part
   
    runOnUIImmediately
  

1st File

     node_modules/react-native- 
           reanimated/src/reanimated2/layoutReanimation/sharedTransitions/ProgressTransitionManager.ts
                
             runOnUIImmediately(() => {
            'worklet';
            global.UpdatePropsManager = createUpdatePropsManager();
          })();
           

2nd File

     node_modules/react-native-reanimated/src/reanimated2/UpdateProps.ts

Patch Code Here

https://jsbin.com/pecedilado/edit?js

   "react-native": "0.72.5",
   "react-native-reanimated": "^3.5.4",

[Aakash359]

Hello I am getting the same issues with same library version but in my case i am getting in other file in node module of react-native reanimated i have tried your solution it works for me amazing bro 👊

[tautastic]

I get a similar error on Android when I start the debugger using metro: Error: [Reanimated] ProgressTransitionRegister is not available on non-native platform.

I'm using:

"react": "18.2.0",
"react-dom": "^18.2.0",
"react-native": "0.71.14",
"react-native-reanimated": "3.6.0",
"react-native-vision-camera": "3.6.16"

When I upgrade reanimated to 3.6.1 I get issues with react-native-vision-camera and if I downgrade reanimated to 3.5.1 I get issues with @react-navigation/drawer.

[pabloLarios24]

Same issue

[flo-sch]

I am also facing that error when trying to use Reanimated >= 3.6.0 with React Native Debugger open:

[Reanimated] ProgressTransitionRegister is not available on non-native platform.

Library	Version
react-native	0.71.16
react-native-reanimated	3.6.1
react-native-gesture-handler	2.14.0

Seems like it was introduced by: https://github.com/software-mansion/react-native-reanimated/pull/5136

[flo-sch]

As suggested by @memanoj, a patch-package does the trick temporarily. If anyone is interested, I used the following meanwhile:

diff --git a/node_modules/react-native-reanimated/lib/module/reanimated2/UpdateProps.js b/node_modules/react-native-reanimated/lib/module/reanimated2/UpdateProps.js
index 723afbd..a9ebeb3 100644
--- a/node_modules/react-native-reanimated/lib/module/reanimated2/UpdateProps.js
+++ b/node_modules/react-native-reanimated/lib/module/reanimated2/UpdateProps.js
@@ -2,7 +2,7 @@
 
 import { processColorsInProps } from './Colors';
 import { _updatePropsJS } from './js-reanimated';
-import { isFabric, isJest, shouldBeUseWeb } from './PlatformChecker';
+import { isChromeDebugger, isFabric, isJest, shouldBeUseWeb } from './PlatformChecker';
 import { runOnUIImmediately } from './threads';
 let updateProps;
 if (shouldBeUseWeb()) {
@@ -87,7 +87,7 @@ if (shouldBeUseWeb()) {
   const maybeThrowError = () => {
     // Jest attempts to access a property of this object to check if it is a Jest mock
     // so we can't throw an error in the getter.
-    if (!isJest()) {
+    if (!isJest() && !isChromeDebugger()) {
       throw new Error('[Reanimated] `UpdatePropsManager` is not available on non-native platform.');
     }
   };
diff --git a/node_modules/react-native-reanimated/lib/module/reanimated2/layoutReanimation/sharedTransitions/ProgressTransitionManager.js b/node_modules/react-native-reanimated/lib/module/reanimated2/layoutReanimation/sharedTransitions/ProgressTransitionManager.js
index b9774ef..bf0251d 100644
--- a/node_modules/react-native-reanimated/lib/module/reanimated2/layoutReanimation/sharedTransitions/ProgressTransitionManager.js
+++ b/node_modules/react-native-reanimated/lib/module/reanimated2/layoutReanimation/sharedTransitions/ProgressTransitionManager.js
@@ -6,7 +6,7 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
 import { runOnUIImmediately } from '../../threads';
 import { registerEventHandler, unregisterEventHandler } from '../../core';
 import { Platform } from 'react-native';
-import { isJest, shouldBeUseWeb } from '../../PlatformChecker';
+import { isChromeDebugger, isJest, shouldBeUseWeb } from '../../PlatformChecker';
 const IS_ANDROID = Platform.OS === 'android';
 export class ProgressTransitionManager {
   constructor() {
@@ -191,7 +191,7 @@ if (shouldBeUseWeb()) {
   const maybeThrowError = () => {
     // Jest attempts to access a property of this object to check if it is a Jest mock
     // so we can't throw an error in the getter.
-    if (!isJest()) {
+    if (!isJest() && !isChromeDebugger()) {
       throw new Error('[Reanimated] `ProgressTransitionRegister` is not available on non-native platform.');
     }
   };

[chenop]

Any solution for that?

[tomekzaw]

Any solution for that?

Yes, don't use Chrome Debugger – use Chrome DevTools instead.

https://reactnative.dev/docs/hermes#debugging-js-on-hermes-using-google-chromes-devtools

[chenop]

Any solution for that?

Yes, don't use Chrome Debugger – use Chrome DevTools instead.

https://reactnative.dev/docs/hermes#debugging-js-on-hermes-using-google-chromes-devtools

Thanks, I'm not using Hermes since react-native-firebase does not support it. At least it didn't the last time Ive checked.