Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using arrow function on JS thread gives JS worklet error

See original GitHub issue

Description

When I use arrow function and call it on JS thread inside useAnimatedGestureHandler then I get JS worklet error. However this issue doesn’t occur if I use function created using function keyword.

Expected behavior

Using arrow function in JS thread inside useAnimatedGestureHandler should work.

Actual behavior & steps to reproduce

Throws the following error:

Error 
Javascript worklet error
In file: /Users/sanjay/@thestrawhats/react-native-modules/packages/modal/node_modules/react-native-reanimated/src/reanimated2/core.ts (270:23)

reanimated::REAIOSErrorHandler::raiseSpec()
    REAIOSErrorHandler.mm:17
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>::__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&)::$_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>::__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::HermesRuntimeImpl::HFContext::finalize(void*)
facebook::hermes::HermesRuntimeImpl::HFContext::func(void*, hermes::vm::Runtime*, hermes::vm::NativeArgs)
facebook::jsi::JSError::~JSError()
facebook::jsi::JSError::~JSError()
facebook::jsi::JSError::~JSError()
facebook::jsi::JSError::~JSError()
facebook::jsi::JSError::~JSError()
facebook::hermes::HermesRuntimeImpl::call(facebook::jsi::Function const&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)
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>::__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::HermesRuntimeImpl::HFContext::finalize(void*)
facebook::hermes::HermesRuntimeImpl::HFContext::func(void*, hermes::vm::Runtime*, hermes::vm::NativeArgs)
facebook::jsi::JSError::~JSError()
facebook::jsi::JSError::~JSError()
facebook::jsi::JSError::~JSError()
facebook::jsi::JSError::~JSError()
facebook::jsi::JSError::~JSError()
facebook::hermes::HermesRuntimeImpl::call(facebook::jsi::Function const&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)
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>::__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::HermesRuntimeImpl::HFContext::finalize(void*)
facebook::hermes::HermesRuntimeImpl::HFContext::func(void*, hermes::vm::Runtime*, hermes::vm::NativeArgs)
facebook::jsi::JSError::~JSError()
facebook::hermes::HermesRuntimeImpl::call(facebook::jsi::Function const&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)
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::WorkletEventHandler::process(facebook::jsi::Runtime&, facebook::jsi::Value&)
reanimated::EventHandlerRegistry::processEvent(facebook::jsi::Runtime&, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)
reanimated::NativeReanimatedModule::onEvent(std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >, std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> >)
invocation function for block in reanimated::createReanimatedModule(std::__1::shared_ptr<facebook::react::CallInvoker>)
__33-[REANodesManager dispatchEvent:]_block_invoke
RCTExecuteOnMainQueue
-[REANodesManager dispatchEvent:]
-[REAModule eventDispatcherWillDispatchEvent:]
-[REAEventDispatcher sendEvent:]
-[RNGestureHandlerManager sendStateChangeEvent:]
-[RNGestureHandler sendEventsInState:forViewWithTag:withExtraData:]
-[RNGestureHandler handleGesture:]
-[UIGestureRecognizerTarget _sendActionWithGestureRecognizer:]
_UIGestureRecognizerSendTargetActions
_UIGestureRecognizerSendActions
-[UIGestureRecognizer _updateGestureForActiveEvents]
_UIGestureEnvironmentUpdate
-[UIGestureEnvironment _updateForEvent:window:]
-[UIWindow sendEvent:]
-[UIApplication sendEvent:]
__processEventQueue
__eventFetcherSourceCallback
__CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__
__CFRunLoopDoSource0
__CFRunLoopDoSources0
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
main
start
0x0

Snack or minimal code example

import React from "react"
import { PanGestureHandler } from "react-native-gesture-handler"
import Animated, {
    runOnJS,
    useAnimatedGestureHandler
} from "react-native-reanimated"

const Modal: React.FC = () => {
    const swipe = useAnimatedGestureHandler({
        onStart: () => {
            runOnJS(fn)()
        }
    })

    const fn = () => {
        console.log("Hello world")
    }

    return (
        <PanGestureHandler onGestureEvent={swipe}>
            <Animated.View
                style={{
                    height: 200,
                    width: 200,
                    backgroundColor: "red"
                }}></Animated.View>
        </PanGestureHandler>
    )
}

export default Modal

Package versions

  • React Native: 0.64.2
  • React Native Reanimated: ^2.2.0
  • NodeJS: 16.4.0
  • Xcode: 12.5
  • Java & Gradle: 8 & 4.1.0

Affected platforms

  • iOS (Tested on iPhone 12 - iOS 14.5)
  • Android
  • Web

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

4reactions
YogendraShelkecommented, Jul 24, 2021

Declare fn() above useAnimatedGestureHandler hook.

const fn = () => {
        console.log("Hello world")
 }

const swipe = useAnimatedGestureHandler({
        onStart: () => {
            runOnJS(fn)()
        }
})
1reaction
piaskowykcommented, Jul 1, 2021

Hey @sanjade thanks for the report 👍 This is the problem with babel transform probably. It should be fixed by https://github.com/software-mansion/react-native-reanimated/pull/2161 but we will check your example code.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Reanimated V2.0.0-rc.0 different thread error when using ...
i ran the code and works well, how did you installed and configured the reanimated ? show your package.json and your babel.config.js.
Read more >
Arrow function expressions - JavaScript - MDN Web Docs
Arrow functions cannot be used as constructors and will throw an error when called with new . They also do not have a...
Read more >
Let's Understand Hoisting in JavaScript | by Akshayacodified
When we use the arrow function, it behaves like a variable ... it gives an error because the getName function will behave as...
Read more >
Parcel 2 RC
Differential bundling using the module/nomodule pattern is now completely automated ... addModule(new URL('worklet.js', import.meta.url));.
Read more >
Worklet - run javascript code when UI thread gets updated in ...
What exactly happen under the hood is that, secondary JS thread is created, whose context is on the UI thread then it is...
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
Previous page

2.2.0 Fatal Exception: java.lang.UnsatisfiedLinkError: dlopen failed: library "libjsc.so" not found

Next page

useAnimatedStyle not setting backgroundColor on prop updates when element is conditionally outputted