Tried to synchronously call anonymous function from a different thread

See original GitHub issue

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

  • Android
  • iOS
  • Web

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:3
  • Comments:20 (1 by maintainers)

github_iconTop GitHub Comments

23reactions
agarwal-niteshcommented, Mar 22, 2022

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

<Drawer.Navigator useLegacyImplementation={true}>
  <Drawer.Screen
    name={AppScreenName.home}
    component={HomeViewController}
  />
</Drawer.Navigator>
8reactions
gunnartorfiscommented, Mar 11, 2022

SOLVED: runOnJS(navigation.goBack)();

Read more comments on GitHub >

github_iconTop Results From Across the Web

Tried to synchronously call anonymous function from a ...
React Navigation Drawer Navigator V6 is using react-native-reanimated V2 which employ special worklet function to synchronously run code for ...
Read more >
Tried to synchronously call function error #1571 - GitHub
Hey, In reanimated we use two threads: JS thread and UI thread. JS Thread is a React native thread where React Native JS...
Read more >
Tried to synchronously call anonymous function ... - YouTube
Tried to synchronously call anonymous function from a different thread. with DrawerNavigatorFound it helpful? Subscribe to my youtube ...
Read more >
runOnJS | React Native Reanimated - Software Mansion
When you call a function on the UI thread you can't be sure if you're calling a worklet or a callback from the...
Read more >
[Solved]-Tried to synchronously call anonymous function from ...
Coding example for the question Tried to synchronously call anonymous function from a different thread. with DrawerNavigator-React Native.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found