Tried to synchronously call anonymous function from a different thread

[jahglow]

Description

Just installed reanimated v2.4.1 and tried to use it with react-navigation/drawer (latest) and all I get is this error on both android and ios. Babel plugin is listed last. No idea what to change. RN version : latest. Hermes enabled. Stack navigator works flawlessly.

Tried to synchronously call anonymous function from a different thread.

Occurred in worklet location: /Users/johnarcher/mpi-rn/apps/mpi-mobile-wo/node_modules/react-native-reanimated/lib/reanimated2/core.js (127:0)

Possible solutions are:
a) If you want to synchronously execute this method, mark it as a Worklet
b) If you want to execute this method on the JS thread, wrap it using runOnJS


reanimated::REAIOSErrorHandler::raiseSpec()
    REAIOSErrorHandler.mm:18
reanimated::ErrorHandler::raise()::'lambda'()::operator()()
decltype(std::__1::forward<reanimated::ErrorHandler::raise()::'lambda'()&>(fp)()) std::__1::__invoke<reanimated::ErrorHandler::raise()::'lambda'()&>(reanimated::ErrorHandler::raise()::'lambda'()&)
void std::__1::__invoke_void_return_wrapper<void, true>::__call<reanimated::ErrorHandler::raise()::'lambda'()&>(reanimated::ErrorHandler::raise()::'lambda'()&)
std::__1::__function::__alloc_func<reanimated::ErrorHandler::raise()::'lambda'(), std::__1::allocator<reanimated::ErrorHandler::raise()::'lambda'()>, void ()>::operator()()
std::__1::__function::__func<reanimated::ErrorHandler::raise()::'lambda'(), std::__1::allocator<reanimated::ErrorHandler::raise()::'lambda'()>, void ()>::operator()()
std::__1::__function::__value_func<void ()>::operator()() const
std::__1::function<void ()>::operator()() const
reanimated::REAIOSScheduler::scheduleOnUI(std::__1::function<void ()>)
reanimated::ErrorHandler::raise()
reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const
decltype(std::__1::forward<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0&>(fp)(std::__1::forward<facebook::jsi::Runtime&>(fp0), std::__1::forward<facebook::jsi::Value const&>(fp0), std::__1::forward<facebook::jsi::Value const*>(fp0), std::__1::forward<unsigned long>(fp0))) std::__1::__invoke<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long>(reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
facebook::jsi::Value std::__1::__invoke_void_return_wrapper<facebook::jsi::Value, false>::__call<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long>(reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__alloc_func<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0, std::__1::allocator<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0>, facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__func<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0, std::__1::allocator<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_0>, facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
facebook::hermes::debugger::Debugger::jsiValueFromHermesValue(hermes::vm::HermesValue)
facebook::hermes::debugger::Debugger::jsiValueFromHermesValue(hermes::vm::HermesValue)
facebook::jsi::JSError::~JSError()
facebook::jsi::JSError::~JSError()
facebook::jsi::JSError::~JSError()
facebook::jsi::JSError::~JSError()
facebook::jsi::JSError::~JSError()
facebook::hermes::HermesRuntime::rootsListLength() const
facebook::jsi::Function::callWithThis(facebook::jsi::Runtime&, facebook::jsi::Object const&, facebook::jsi::Value const*, unsigned long) const
reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)
decltype(std::__1::forward<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&>(fp)(std::__1::forward<facebook::jsi::Runtime&>(fp0), std::__1::forward<facebook::jsi::Value const&>(fp0), std::__1::forward<facebook::jsi::Value const*>(fp0), std::__1::forward<unsigned long>(fp0))) std::__1::__invoke<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long>(reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
facebook::jsi::Value std::__1::__invoke_void_return_wrapper<facebook::jsi::Value, false>::__call<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long>(reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2&, facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__alloc_func<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2, std::__1::allocator<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2>, facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
std::__1::__function::__func<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2, std::__1::allocator<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_2>, facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)
facebook::hermes::debugger::Debugger::jsiValueFromHermesValue(hermes::vm::HermesValue)
facebook::hermes::debugger::Debugger::jsiValueFromHermesValue(hermes::vm::HermesValue)
facebook::jsi::JSError::~JSError()
facebook::hermes::HermesRuntime::rootsListLength() const
facebook::jsi::Function::callWithThis(facebook::jsi::Runtime&, facebook::jsi::Object const&, facebook::jsi::Value const*, unsigned long) const
facebook::jsi::Function::callWithThis(facebook::jsi::Runtime&, facebook::jsi::Object const&, std::initializer_list<facebook::jsi::Value>) const
facebook::jsi::Value facebook::jsi::Function::callWithThis<facebook::jsi::Value&>(facebook::jsi::Runtime&, facebook::jsi::Object const&, facebook::jsi::Value&) const
reanimated::MutableValue::set(facebook::jsi::Runtime&, facebook::jsi::PropNameID const&, facebook::jsi::Value const&)::$_2::operator()() const
decltype(std::__1::forward<reanimated::MutableValue::set(facebook::jsi::Runtime&, facebook::jsi::PropNameID const&, facebook::jsi::Value const&)::$_2&>(fp)()) std::__1::__invoke<reanimated::MutableValue::set(facebook::jsi::Runtime&, facebook::jsi::PropNameID const&, facebook::jsi::Value const&)::$_2&>(reanimated::MutableValue::set(facebook::jsi::Runtime&, facebook::jsi::PropNameID const&, facebook::jsi::Value const&)::$_2&)
void std::__1::__invoke_void_return_wrapper<void, true>::__call<reanimated::MutableValue::set(facebook::jsi::Runtime&, facebook::jsi::PropNameID const&, facebook::jsi::Value const&)::$_2&>(reanimated::MutableValue::set(facebook::jsi::Runtime&, facebook::jsi::PropNameID const&, facebook::jsi::Value const&)::$_2&)
std::__1::__function::__alloc_func<reanimated::MutableValue::set(facebook::jsi::Runtime&, facebook::jsi::PropNameID const&, facebook::jsi::Value const&)::$_2, std::__1::allocator<reanimated::MutableValue::set(facebook::jsi::Runtime&, facebook::jsi::PropNameID const&, facebook::jsi::Value const&)::$_2>, void ()>::operator()()
std::__1::__function::__func<reanimated::MutableValue::set(facebook::jsi::Runtime&, facebook::jsi::PropNameID const&, facebook::jsi::Value const&)::$_2, std::__1::allocator<reanimated::MutableValue::set(facebook::jsi::Runtime&, facebook::jsi::PropNameID const&, facebook::jsi::Value const&)::$_2>, void ()>::operator()()
std::__1::__function::__value_func<void ()>::operator()() const
std::__1::function<void ()>::operator()() const
reanimated::Scheduler::triggerUI()
invocation function for block in reanimated::REAIOSScheduler::scheduleOnUI(std::__1::function<void ()>)
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
main
start_sim
0x0
0x0

Expected behavior

Actual behavior & steps to reproduce

Snack or minimal code example

      <NavigationContainer>
<Drawer.Navigator initialRouteName="app">
   <Drawer.Screen name="app" component={AppContent} />
</Drawer.Navigator></NavigationContainer>

const AppContent = ()=>(<View style={{flex:1}><Text>Hello</Text></View>)

Package versions

name	version
react-native	0.67.2
react-native-reanimated	2.4.1
NodeJS	16.9.1
Xcode	13.2.1
NDK	21.4.7075529
Gradle	4.2.2
kotlin	1.5.31

Affected platforms

• [x] Android
• [x] iOS
• [ ] Web

[dan-fein]

I'm also getting this and have no idea what to do to fix it. I just upgraded to react native 0.67.3 and it started showing up. Have you been able to find any solution @jahglow?

It says it's occurring in a few different worklet locations like /hook/useAnimatedStyle.js and /core.js

I use react-navigation which requires reanimated so I don't really have a choice but to use it.

[ReganL]

I'm also getting this and have no idea what to do to fix it. I just upgraded to react native 0.67.3 and it started showing up. Have you been able to find any solution @jahglow?

It says it's occurring in a few different worklet locations like /hook/useAnimatedStyle.js and /core.js

I use react-navigation which requires reanimated so I don't really have a choice but to use it.

Downgrading to version @react-navigation/drawer 6.3.0 works for the time being

[gunnartorfis]

I'm following along with Williams (great) video on Snapchat stories. When I'm trying to let the shared elements handle the onEnd animation using navigation.goBack(), I receive the following error:

I have tried wrapping the call both with runOnJS and runOnUI without success.

Here's the snippet for reference:

onEnd: ({ velocityX, velocityY }) => {
  const goBack = snapPoint(translateY.value, velocityY, [0, WINDOW_HEIGHT]) === WINDOW_HEIGHT;

  if (goBack) {
    runOnJS(() => {
      navigation.goBack();
    });
  } else {
    translateX.value = withSpring(0, { velocity: velocityX });
    translateY.value = withSpring(0, { velocity: velocityY });
  }
},

[gunnartorfis]

Here's a reproducable demo: https://github.com/gunnartorfis/reanimated-3049-example Swipe down to drag & dismiss the "modal".

[gunnartorfis]

SOLVED: runOnJS(navigation.goBack)();

[agarwal-nitesh]

I found this solution stackoverflow. Setting useLegacyImplementation worked for me.

<Drawer.Navigator useLegacyImplementation={true}>
  <Drawer.Screen
    name={AppScreenName.home}
    component={HomeViewController}
  />
</Drawer.Navigator>

[jahglow]

Issue persists through "react-native-reanimated": "^2.6.0" & "@react-navigation/drawer": "6.4.1" Well, the useLegacyImplementation solves the app crash meaning either react-native-reanimated v2 has a flaw or the drawer is using it in a flawed way so Hermes v0.9 and v0.10 have no idea how to handle it. I have the DrawerNavigator as the root navigator thus it makes the app crash right after the splashscreen when using RNA v2 with it - as soon as it loads. I managed to get some info out of Sentry for that:

Tried to synchronously call anonymous function from a different thread.

Occurred in worklet location: /Users/johnarcher/mpi-rn/apps/mpi-mobile-wo/node_modules/react-native-reanimated/lib/reanimated2/core.js (127:0)

Possible solutions are: a) If you want to synchronously execute this method, mark it as a Worklet b) If you want to execute this method on the JS thread, wrap it using runOnJS

at com.swmansion.reanimated.AndroidErrorHandler.raise(AndroidErrorHandler.java:6)
    at com.swmansion.reanimated.Scheduler.triggerUI(Scheduler.java)
    at com.swmansion.reanimated.Scheduler$1.run(Scheduler.java:24)
    at com.swmansion.reanimated.Scheduler$2.runGuarded(Scheduler.java:43)
    at com.facebook.react.bridge.GuardedRunnable.run(GuardedRunnable.java:31)
    at android.os.Handler.handleCallback(Handler.java:873)
    at android.os.Handler.dispatchMessage(Handler.java:99)
    at android.os.Looper.loop(Looper.java:193)
    at android.app.ActivityThread.main(ActivityThread.java:6863)
    at java.lang.reflect.Method.invoke(Method.java)
    at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:537)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)

OS Version: Android 9 (ONEPLUS A3010_28_191104)
Report Version: 104

Exception Type: Unknown (SIGABRT)

Application Specific Information:
Abort

Thread 0 Crashed:
0   libc.so                         0x78d77e44f0        abort
1   libart.so                       0x7852e5a080        art::Runtime::Abort
2   libbase.so                      0x78d75955a8        android::base::LogMessage::~LogMessage
3   libart.so                       0x7852cd5e6c        art::JavaVMExt::JniAbort
4   libart.so                       0x7852cd5fe8        art::JavaVMExt::JniAbortV
5   libart.so                       0x7852ae9884        <unknown> + 516783249540
6   libart.so                       0x7852ae8240        <unknown> + 516783243840
7   libart.so                       0x7852ae75a8        <unknown> + 516783240616
8   libart.so                       0x7852ae6c38        <unknown> + 516783238200
9   libfbjni.so                     0x78380e4098        facebook::jni::isObjectRefType
10  libreanimated.so                0x782f535ac0        facebook::jni::LocalReferenceAllocator::verifyReference
11  libreanimated.so                0x782f535b38        facebook::jni::LocalReferenceAllocator::deleteReference
12  libreanimated.so                0x782f535a80        facebook::jni::base_owned_ref<T>::reset
13  libreanimated.so                0x782f5359c8        facebook::jni::base_owned_ref<T>::reset

[dipankurXT]

I found this solution stackoverflow. Setting useLegacyImplementation worked for me.

<Drawer.Navigator useLegacyImplementation={true}>
  <Drawer.Screen
    name={AppScreenName.home}
    component={HomeViewController}
  />
</Drawer.Navigator>

This worked for me too. Thanks a lot. 🥳

[jahglow]

@dipankurXT check out a temporary solution that worked for me by @ReganL

[jahglow]

I finally made it work with the latest versions of libraries that used RNR v2 under the hood and it was... importing them from source rather than compiled library. I tried to research it, there are workletHash-es in the compiled code but something made them not propagate to the call when importing the libs from lib rather than src. Added a paths resolution to tsconfig that forwarded the import to src instead of lib.

[hhhminme]

I found this solution stackoverflow. Setting useLegacyImplementation worked for me.

<Drawer.Navigator useLegacyImplementation={true}>
  <Drawer.Screen
    name={AppScreenName.home}
    component={HomeViewController}
  />
</Drawer.Navigator>

After checking the dependency in expo, I had a hard time because of this error. thanks!

[pvinis]

I finally made it work with the latest versions of libraries that used RNR v2 under the hood and it was... importing them from source rather than compiled library. I tried to research it, there are workletHash-es in the compiled code but something made them not propagate to the call when importing the libs from lib rather than src. Added a paths resolution to tsconfig that forwarded the import to src instead of lib.

@jahglow would you mind giving us some code for what you added? 🤔

[jahglow]

@pvinis well, a regular import is:

import {
  DrawerNavigationOptions,
  createDrawerNavigator,
} from '@react-navigation/drawer';

the new is:

import {
  DrawerNavigationOptions,
  createDrawerNavigator,
} from '~@react-navigation/drawer';

whereas the tsconfig for resolution is:

{
  ...
"compilerOptions":{
  "paths":{
    ...
      "~@gorhom/bottom-sheet": ["node_modules/@gorhom/bottom-sheet/src"],
      "~@react-navigation/drawer": ["node_modules/@react-navigation/drawer/src"]

  }
}
} 

you can do without tsconfig and import from src folder straight away. Well, it might give you typechecking errors cause your rules might be stricter than those of the libraries, so you may use patch-package to create patches of the modified node_modules of these libs, that look like below e.g. when you add a // @ts-nocheck to the erroring file in node_modules creates a patch file patches/@react-navigation+drawer+6.4.1.patch

ignores errors at typechecking (we have stricter rules) in internal method of the component
diff --git a/node_modules/@react-navigation/drawer/src/views/DrawerItem.tsx b/node_modules/@react-navigation/drawer/src/views/DrawerItem.tsx
index 5d44203..23b5d86 100644
--- a/node_modules/@react-navigation/drawer/src/views/DrawerItem.tsx
+++ b/node_modules/@react-navigation/drawer/src/views/DrawerItem.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { PlatformPressable } from '@react-navigation/elements';
 import { Link, useTheme } from '@react-navigation/native';
 import Color from 'color';

[AliHaidar110]

had the same issue with a custom build animation component but works fine when enabling chrome debuger "react-native-draggable-flatlist": "^3.1.1" crashes when enabling chrome debuger

[ChristianSauer]

I have the same problem

[redhawk5200]

Cannot read properties of undefined (reading 'configurations').

Can anybody please help me with this error, I am getting this everytime I run react-native run-android.

[ggchicote]

I found this solution stackoverflow. Setting useLegacyImplementation worked for me.

<Drawer.Navigator useLegacyImplementation={true}>
  <Drawer.Screen
    name={AppScreenName.home}
    component={HomeViewController}
  />
</Drawer.Navigator>

It works for me! Thanks a lot!

[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?

[BliiTzZ]

Bonjour, j'ai eu le même soucis, et il suffit de supprimer le cache en faisant yarn start --reset-cache ou npm start -- --reset-cache (ou expo start -c si vous utilisez expo)

[mirzahayat]

Actually javascript functions that will be executed on the UI Thread. Consequently if you have functions that can only be executed on the javascript thread and need to be launched from a worklet it must always be specified with runOnJS. try ti use this flow hope so it will helpfull

import Animated, { runOnJS, } from 'react-native-reanimated'; const progress = useSharedValue(0); const AnimatedProgress = () => { progress.value = withTiming(1, {duration: 1000 * 5}, () => { progress.value = 0; runOnJS(jsRenderFun)(); }); }; const jsRenderFun=()=>{ console.log("JS render"); }

jsRenderFun this function will be render when the animation complete.

[tomekzaw]

Problem: Tried to synchronously call anonymous function from a different thread

Solution: https://github.com/software-mansion/react-native-reanimated/issues/3049#issuecomment-1065626833

-runOnJS(() => {
-  navigation.goBack();
-});
+runOnJS(navigation.goBack)();

[tomekzaw]

Re https://github.com/software-mansion/react-native-reanimated/issues/3049#issuecomment-1074873091

Problem: useLegacyImplementation is no longer available with Reanimated 3:

Solution: Remove useLegacyImplementation prop

-<Drawer.Navigator useLegacyImplementation={true}>
+<Drawer.Navigator>
   <Drawer.Screen {...props} />
 </Drawer.Navigator>

[tomekzaw]

Closing this issue since it has been solved in https://github.com/software-mansion/react-native-reanimated/issues/3049#issuecomment-1065626833.