runOnUI cannot be called on the UI runtime.

[haleyngonadi]

Hi, Thank you for this package. Love it.

I just upgraded react-native-reanimated to ~3.6.0 and it crashes immediately in dev mode with the error:

ERROR ReanimatedError: [Reanimated] runOnUI cannot be called on the UI runtime. Please call the function synchronously or use queueMicrotask or requestAnimationFrame instead., js engine: reanimated

Related: software-mansion/react-native-reanimated#4477

[Paolo-Gambardella]

Hi @haleyngonadi !
I had the same issue as you but it is not properly a crash. It is not the best way to fix it but I just removed for now the error on reanimated to avoid this in dev mode.

diff --git a/node_modules/react-native-reanimated/src/reanimated2/threads.ts b/node_modules/react-native-reanimated/src/reanimated2/threads.ts
index dd8ff2f..c3b80a3 100644
--- a/node_modules/react-native-reanimated/src/reanimated2/threads.ts
+++ b/node_modules/react-native-reanimated/src/reanimated2/threads.ts
@@ -75,11 +75,11 @@ export function runOnUI<Args extends unknown[], ReturnValue>(
   worklet: WorkletFunction<Args, ReturnValue>
 ): (...args: Args) => void {
   'worklet';
-  if (__DEV__ && !SHOULD_BE_USE_WEB && _WORKLET) {
-    throw new Error(
-      '[Reanimated] `runOnUI` cannot be called on the UI runtime. Please call the function synchronously or use `queueMicrotask` or `requestAnimationFrame` instead.'
-    );
-  }
+  // if (__DEV__ && !SHOULD_BE_USE_WEB && _WORKLET) {
+  //   throw new Error(
+  //     '[Reanimated] `runOnUI` cannot be called on the UI runtime. Please call the function synchronously or use `queueMicrotask` or `requestAnimationFrame` instead.'
+  //   );
+  // }
   if (__DEV__ && !SHOULD_BE_USE_WEB && !isWorkletFunction(worklet)) {
     throw new Error('[Reanimated] `runOnUI` can only be used on worklets.');
   }

I also had to patch showtime-xyz/tab-view because an another error is triggered. Here is my patch:

diff --git a/node_modules/@showtime-xyz/tab-view/src/gesture-container.tsx b/node_modules/@showtime-xyz/tab-view/src/gesture-container.tsx
index 3098506..07493bb 100644
--- a/node_modules/@showtime-xyz/tab-view/src/gesture-container.tsx
+++ b/node_modules/@showtime-xyz/tab-view/src/gesture-container.tsx
@@ -308,7 +308,7 @@ export const GestureContainer = React.forwardRef<
     .activeOffsetX([-width, width])
     .activeOffsetY([-10, 10])
     .onBegin(() => {
-      runOnUI(stopAllAnimation)();
+      stopAllAnimation();
     })
     .onStart(() => {
       isPullEnough.value = false;

I hope it will be useful and allow you to keep coding your app 😉