react-native-reanimated icon indicating copy to clipboard operation
react-native-reanimated copied to clipboard
verified publisher icon software-mansion

Synchronously call function error when using useAnimatedStyle hook

Open Nast-ua opened this issue 4 years ago • 24 comments

Description

Hi guys! I am testing the example https://docs.swmansion.com/react-native-reanimated/docs/api/useAnimatedGestureHandler in my app. As soon as I load the screen, error pops up. If I comment useAnimatedStyle hook, no error is thrown.

Screenshots

Simulator Screen Shot - iPhone 11 - 2021-03-01 at 19 20 15

Steps To Reproduce

  1. React native project
  2. Install reanimated as described in the installation guide
  3. Test an example with useAnimatedGestureHandler

Expected behavior

As the example shows with no error thrown

Actual behavior

Error thrown:

Tried to synchronously call function {assign} from a different thread.

Occurred in worklet location: /Users/nasti/myApp/packages/native/node_modules/react-native-reanimated/src/reanimated2/Hooks.js (223: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: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&)::$_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>::__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&&)
std::__1::__function::__value_func<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&&) const
std::__1::function<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) const
facebook::jsc::JSCRuntime::createFunctionFromHostFunction(facebook::jsi::PropNameID const&, unsigned int, std::__1::function<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>)::HostFunctionMetadata::call(OpaqueJSContext const*, OpaqueJSValue*, OpaqueJSValue*, unsigned long, OpaqueJSValue const* const*, OpaqueJSValue const**)
JSC::JSCallbackObject<JSC::JSNonFinalObject>::call(JSC::JSGlobalObject*, JSC::CallFrame*)
JSC::LLInt::setUpCall(JSC::CallFrame*, JSC::CodeSpecializationKind, JSC::JSValue, JSC::LLIntCallLinkInfo*)
llint_entry
vmEntryToJavaScript
JSC::Interpreter::executeCall(JSC::JSGlobalObject*, JSC::JSObject*, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
JSC::profiledCall(JSC::JSGlobalObject*, JSC::ProfilingReason, JSC::JSValue, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
JSObjectCallAsFunction
facebook::jsc::JSCRuntime::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&&)
std::__1::__function::__value_func<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&&) const
std::__1::function<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) const
facebook::jsc::JSCRuntime::createFunctionFromHostFunction(facebook::jsi::PropNameID const&, unsigned int, std::__1::function<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>)::HostFunctionMetadata::call(OpaqueJSContext const*, OpaqueJSValue*, OpaqueJSValue*, unsigned long, OpaqueJSValue const* const*, OpaqueJSValue const**)
JSC::JSCallbackObject<JSC::JSNonFinalObject>::call(JSC::JSGlobalObject*, JSC::CallFrame*)
JSC::LLInt::setUpCall(JSC::CallFrame*, JSC::CodeSpecializationKind, JSC::JSValue, JSC::LLIntCallLinkInfo*)
llint_entry
vmEntryToJavaScript
JSC::Interpreter::executeCall(JSC::JSGlobalObject*, JSC::JSObject*, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
JSC::profiledCall(JSC::JSGlobalObject*, JSC::ProfilingReason, JSC::JSValue, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
JSObjectCallAsFunction
facebook::jsc::JSCRuntime::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&&)
std::__1::__function::__value_func<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&&) const
std::__1::function<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) const
facebook::jsc::JSCRuntime::createFunctionFromHostFunction(facebook::jsi::PropNameID const&, unsigned int, std::__1::function<facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>)::HostFunctionMetadata::call(OpaqueJSContext const*, OpaqueJSValue*, OpaqueJSValue*, unsigned long, OpaqueJSValue const* const*, OpaqueJSValue const**)
JSC::JSCallbackObject<JSC::JSNonFinalObject>::call(JSC::JSGlobalObject*, JSC::CallFrame*)
vmEntryToNative
JSC::Interpreter::executeCall(JSC::JSGlobalObject*, JSC::JSObject*, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
JSC::profiledCall(JSC::JSGlobalObject*, JSC::ProfilingReason, JSC::JSValue, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
JSObjectCallAsFunction
facebook::jsc::JSCRuntime::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::Runtime&, facebook::jsi::Object const&) const
reanimated::Mapper::execute(facebook::jsi::Runtime&)
reanimated::MapperRegistry::execute(facebook::jsi::Runtime&)
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:]
__createEventSetter_block_invoke_2
-[RNCSafeAreaProvider invalidateSafeAreaInsets]
-[RNCSafeAreaProvider safeAreaInsetsDidChange]
-[UIView _safeAreaInsetsDidChangeFromOldInsets:]
-[UIView _setSafeAreaInsets:updateSubviewsDuringNextLayoutPass:]
-[UIView _updateSafeAreaInsets]
-[UIView _updateCombinedInsetsIfNecessary]
-[UIView(Geometry) setBounds:]
-[UIView(React) reactSetFrame:]
-[RCTView reactSetFrame:]
__51-[RCTUIManager uiBlockWithLayoutUpdateForRootView:]_block_invoke.263
__44-[RCTUIManager flushUIBlocksWithCompletion:]_block_invoke
__44-[RCTUIManager flushUIBlocksWithCompletion:]_block_invoke.489
__RCTExecuteOnMainQueue_block_invoke
_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
0x0

Snack or minimal code example

import React from 'react';
import {StyleSheet} from 'react-native';
import {PanGestureHandler} from 'react-native-gesture-handler';
import Animated, {
  useAnimatedGestureHandler,
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from 'react-native-reanimated';

export default function Example() {
  const x = useSharedValue(0);

  const gestureHandler = useAnimatedGestureHandler({
    onStart: (_, ctx) => {
      ctx.startX = x.value;
    },
    onActive: (event, ctx) => {
      x.value = ctx.startX + event.translationX;
    },
    onEnd: (_) => {
      x.value = withSpring(0);
    },
  });

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateX: x.value,
        },
      ],
    };
  });

  return (
    <PanGestureHandler onGestureEvent={gestureHandler}>
      <Animated.View style={[styles.box, animatedStyle]} />
    </PanGestureHandler>
  );
}

const styles = StyleSheet.create({
  box: {
    borderWidth: 2,
    width: 50,
    height: 50,
    backgroundColor: 'pink',
    marginTop: 100,
    marginLeft: 100,
  },
});

Package versions

  • React: 16.13.1
  • React Native: 0.63.3
  • React Native Reanimated: 2.0.0-rc.3
  • NodeJS: 14.5.0

Nast-ua avatar Mar 01 '21 19:03 Nast-ua

Issue validator

The issue is valid!

github-actions[bot] avatar Mar 01 '21 19:03 github-actions[bot]

@Nast-ua could it possibly be because you are missing the PanGestureHandler in the return?

lilasquared avatar Mar 01 '21 21:03 lilasquared

thanks for the comment! Actually, I have it, I forgot to edit the code as a code snippet, so it was not shown properly. My bad, sorry. I just updated the code, if you have any thoughts, will appreciate it!

Nast-ua avatar Mar 01 '21 22:03 Nast-ua

I just pulled down their playground repo and copied this example into the Screen.js file, and it seems to be working fine. Can you check your configurations against that repo? https://github.com/software-mansion-labs/reanimated-2-playground

lilasquared avatar Mar 01 '21 22:03 lilasquared

Many thanks for your reply! I just did the same and pulled the reanimated-2-playground repo and, unfortunately, the same error was thrown. But then at some point after reseting cache many times, it worked. Unfortunately, when I use the code example in my app, the error is still thrown. I checked the configurations and they are all good against the reanimated playground repo. Do you think it can be still sth wrong with configurations or maybe some dependencies incompatibility? Thanks!

Nast-ua avatar Mar 02 '21 09:03 Nast-ua

Do you use Expo by any chance?

jgonet avatar Mar 02 '21 15:03 jgonet

No, I don't use Expo. I just figured out, as soon as I don't clear the cache after reanimated-2-playground app has been run and just run my app with reanimated test example in it, everything works as expected and no error is thrown. If I do reset the cache, the error is thrown again. So I guess, there might be some dep incompatibilities or sth with configurations? Although the babel config and metro config between the apps are the same. Will appreciate any suggestions!

Nast-ua avatar Mar 02 '21 15:03 Nast-ua

Same issue here.(iOS for now did not test on android)

I am doing some test(aka having fun with the v2 version) on real app case. Converting existing v1 to v2

  • workspace repository
  • using unimodule (not expo)

Playground is working

React: 16.13.1 React Native: 0.63.4 React Native Reanimated: 2.0.0-rc.3 react-native-gesture-handler: "^1.10.3", (1.9 run playground, will try it) NodeJS: 12.19.0

trying a simple PanView

  const translationX = useSharedValue(0)
  const translationY = useSharedValue(0)

  const handlePan = useAnimatedGestureHandler<
    PanGestureHandlerGestureEvent,
    {
      offsetX: number
      offsetY: number
    }
  >({
    onStart: (_event, ctx) => {
      ctx.offsetX = translationX.value
      ctx.offsetY = translationY.value
    },
    onActive: (event, ctx) => {
      translationX.value = ctx.offsetX + event.translationX
      translationY.value = ctx.offsetY + event.translationY
    }
    /* onEnd: ({ velocityX, velocityY }) => {
      translateX.value = withDecay({
        velocity: velocityX,
        clamp: [0, boundX],
      });
      translateY.value = withDecay({
        velocity: velocityY,
        clamp: [0, boundY],
      });
    }, */
  })
  const stylePan = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: translationX.value }, { translateY: translationY.value }]
    }
  })

  return (
    <PanGestureHandler onGestureEvent={handlePan} onHandlerStateChange={handlePan}>
      <Animated.View style={stylePan}>{children}</Animated.View>
    </PanGestureHandler>
  )
}```

batical avatar Mar 03 '21 09:03 batical

can't manage to make it work(event with 2.0.0 final)

  • My project is based on workspaces
  • I removed ALL the packages inside except mobile.

Project -package.json --mobile/ ----package.json

in the projet package.json

"dependencies": {
    "react": "16.13.1",
    "react-native": "0.63.4"
  },
  "devDependencies": {
    "@strictsoftware/typedoc-plugin-monorepo": "^0.3.1",
    "@types/react-native": "0.63.20",
    "git-branch-is": "^3.1.0",
    "husky": "^4.3.0",
    "lint-staged": "^10.5.1",
    "patch-package": "^6.2.2",
    "postinstall-postinstall": "^2.1.0",
    "react-docgen-typescript": "^1.20.5",
    "react-dom": "16.13.1",
    "typedoc": "^0.19.2"
  }

in the mobile package.json

"dependencies": {
    "@gorhom/bottom-sheet": "3.4.0",
    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-native-reanimated": "2.0.0",
    "react-native-gesture-handler": "1.10.3"
  },
  "devDependencies": {
    "@babel/core": "7.10.5",
    "@babel/plugin-external-helpers": "^7.10.4",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-proposal-decorators": "^7.8.3",
    "@babel/runtime": "7.10.5",
    "@react-native-community/cli": "^4.14.0",
    "@react-native-community/cli-platform-android": "^4.13.0",
    "@react-native-community/cli-platform-ios": "^4.13.0",
    "@react-native-community/eslint-config": "^2.0.0",
    "@testing-library/react-hooks": "^5.1.0",
    "@testing-library/react-native": "^7.2.0",
    "@types/jest": "^26.0.14",
    "@types/react-native": "0.63.20",
    "@typescript-eslint/eslint-plugin": "2.27.0",
    "@typescript-eslint/parser": "^3.3.0",
    "babel-jest": "^24.9.0",
    "babel-plugin-import": "^1.13.0",
    "babel-plugin-module-resolver": "^3.2.0",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "eslint": "^6.5.1",
    "eslint-config-airbnb-typescript": "^8.0.2",
    "eslint-config-prettier": "^6.5.0",
    "eslint-config-react": "^1.1.7"
    "jest": "^24.9.0",
    "metro": "0.59.0",
    "metro-react-native-babel-preset": "^0.64.0",
    "prettier": "^1.19.1",
    "react-docgen-typescript-loader": "^3.2.0",
    "react-dom": "16.13.1",
    "react-native-typescript-transformer": "^1.2.12",
    "react-test-renderer": "16.13.1",
    "ts-jest": "^26.4.4",
    "typescript": "4.2.3"
  }

I have only one babel.config.js

module.exports = {
  presets: [  'module:metro-react-native-babel-preset' ],
  plugins: [   'react-native-reanimated/plugin']
}

If anyone has any idea ?

batical avatar Mar 09 '21 17:03 batical

same problem here, I also get the Synchronously call function error and the project is also part of a mono repo with workspaces

kaoDev avatar Mar 13 '21 13:03 kaoDev

this solution helped https://github.com/software-mansion/react-native-reanimated/issues/1720#issuecomment-789287795

The important bit is to replace the projectRoot in the metro.config with watchFolders = [projectRoot]

kaoDev avatar Mar 13 '21 13:03 kaoDev

thanks; My workspace is not using the watchfolder, but some hoisting with the react native cli installed as dev dependency.

I will try to update my workspace setting and configure the watchFolders

thanks

batical avatar Mar 13 '21 18:03 batical

@kaoDev I can confirm this is working now. Lots of works to upgrading my "old" workspace way

thanks

batical avatar Mar 14 '21 12:03 batical

I had the same issue, tried everything until I removed 'babel-preset-expo' from my babel.config.js. Then it worked.

keplerbb01 avatar Apr 02 '21 10:04 keplerbb01

I'm using nx react-native where there is a custom metro bundler file resolver.

And none of suggestions are working. Using "watchFolders" instead of "projectRoot" breaks the metro resolver.

birkir avatar May 10 '21 10:05 birkir

hi @birkir I'm also using the nx toolchain. it works for me with the following config:

const { withNxMetro } = require('@nrwl/react-native');
const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  const { projectRoot, ...cfg } = withNxMetro(
    {
      transformer: {
        babelTransformerPath: require.resolve('react-native-svg-transformer'),
        getTransformOptions: async () => ({
          transform: {
            experimentalImportSupport: true,
            inlineRequires: true,
          },
        }),
      },
      resolver: {
        assetExts: assetExts.filter((ext) => ext !== 'svg'),
        sourceExts: [...sourceExts, 'svg'],
      },
    },
    {
      // Change this to true to see debugging info.
      // Useful if you have issues resolving modules
      debug: true,
    },
  );

  cfg.watchFolders = [projectRoot]; // <- using the projectRoot for watchFolders

  return cfg;
})();

But I also had to do some changes for android and ios:

app/build.gradle:

ext {
    react = [
        entryFile: "src/main.tsx",
        root: "../../",
    ]
}

MainApplication.java:

        @Override
        protected String getJSMainModuleName() {
          return "src/main";
        }

        @Override
        protected JSIModulePackage getJSIModulePackage() {
          return new ReanimatedJSIModulePackage();
        }

AppDelegate.m

  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"src/main" fallbackResource:nil];

kaoDev avatar May 10 '21 11:05 kaoDev 

module.exports = function (api) {
  api.cache(false);
    return {
      presets: ["babel-preset-expo", "module:metro-react-native-babel-preset"],
      plugins: [
        "react-native-reanimated/plugin",
    };
};

I had to remove module:metro-react-native-babel-preset to get it to work.

jamesallain avatar May 26 '21 13:05 jamesallain

hi @birkir I'm also using the nx toolchain. it works for me with the following config:

24 hours of pulling my hair out trying to get this to work with NX and you rode is like a boss level knight and saved me from giving up on reanimated in an NX project!

Thanks @kaoDev !

dwamianm avatar Jan 23 '22 17:01 dwamianm

Is there anything more that we could help with this issue?

Recent comments relate to configuration problems rather than the error itself.

kacperkapusciak avatar Jan 28 '22 11:01 kacperkapusciak

I think this issue is specific to mono repo usage and to the nx toolchain. So perhaps it could be worth add a hint to the readme, but not sure if it's worth it for this specific issue

kaoDev avatar Jan 31 '22 18:01 kaoDev

@kaoDev I've followed all your steps, but still I'm getting this error - Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?,

Can you please share, If I've missed anything..

Here's my package.json

{
  "name": "app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "start": "nx serve",
    "build": "nx build",
    "test": "nx test",
    "start-web:dev": "npx env-cmd -f .env.development nx serve web-app",
    "start-web:prod": "npx env-cmd -f .env.production nx serve web-app"
  },
  "private": true,
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.15.17",
    "@react-native-clipboard/clipboard": "^1.8.5",
    "@react-native-community/blur": "^3.6.0",
    "@react-native-community/clipboard": "^1.5.1",
    "@react-native-masked-view/masked-view": "^0.2.6",
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/drawer": "^6.4.1",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/native-stack": "^6.2.5",
    "@react-navigation/stack": "^6.0.11",
    "@reduxjs/toolkit": "https://pkg.csb.dev/reduxjs/redux-toolkit/commit/4b389bff/@reduxjs/toolkit",
    "@twotalltotems/react-native-otp-input": "^1.3.11",
    "@types/react-native-vector-icons": "^6.4.10",
    "core-js": "^3.6.5",
    "localforage": "^1.10.0",
    "lodash": "^4.17.21",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-gradient-text": "^0.1.0",
    "react-localization": "^1.0.17",
    "react-native": "0.66.2",
    "react-native-config": "^1.4.5",
    "react-native-confirmation-code-field": "^7.3.0",
    "react-native-countdown-component": "^2.7.1",
    "react-native-gesture-handler": "^2.3.2",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-localization": "^2.1.7",
    "react-native-masked-text": "^1.13.0",
    "react-native-paper": "^4.11.1",
    "react-native-pg-react-native-sdk": "^2.1.7",
    "react-native-reanimated": "^2.6.0",
    "react-native-responsive-screen": "^1.4.2",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.2",
    "react-native-shimmer-placeholder": "^2.0.8",
    "react-native-vector-icons": "^9.0.0",
    "react-native-web": "^0.17.5",
    "react-native-web-linear-gradient": "^1.1.2",
    "react-otp-input": "^2.4.0",
    "react-redux": "7.2.5",
    "react-router-dom": "6",
    "redux-persist": "^6.0.0",
    "regenerator-runtime": "0.13.7",
    "tslib": "^2.0.0"
  },
  "devDependencies": {
    "@babel/core": "7.12.13",
    "@babel/plugin-proposal-class-properties": "^7.16.7",
    "@babel/plugin-proposal-object-rest-spread": "^7.16.7",
    "@babel/preset-env": "^7.16.8",
    "@babel/preset-flow": "^7.16.7",
    "@babel/preset-react": "^7.16.7",
    "@babel/preset-typescript": "^7.16.7",
    "@nrwl/cli": "13.4.4",
    "@nrwl/cypress": "13.4.4",
    "@nrwl/detox": "13.4.4",
    "@nrwl/eslint-plugin-nx": "13.4.4",
    "@nrwl/jest": "13.4.4",
    "@nrwl/linter": "13.4.4",
    "@nrwl/nx-cloud": "latest",
    "@nrwl/react": "13.4.4",
    "@nrwl/react-native": "^13.4.4",
    "@nrwl/storybook": "^13.4.4",
    "@nrwl/tao": "13.4.4",
    "@nrwl/web": "13.4.4",
    "@nrwl/workspace": "13.4.4",
    "@react-native-community/cli": "6.1.0",
    "@react-native-community/cli-platform-android": "6.1.0",
    "@react-native-community/cli-platform-ios": "6.1.0",
    "@storybook/addon-essentials": "~6.4.5",
    "@storybook/builder-webpack5": "~6.4.5",
    "@storybook/manager-webpack5": "~6.4.5",
    "@storybook/react": "~6.4.5",
    "@svgr/webpack": "^6.2.1",
    "@testing-library/jest-dom": "5.15.0",
    "@testing-library/jest-native": "4.0.4",
    "@testing-library/react": "12.1.2",
    "@testing-library/react-hooks": "7.0.2",
    "@testing-library/react-native": "8.0.0",
    "@types/detox": "17.14.3",
    "@types/jest": "27.0.2",
    "@types/lodash": "^4.14.178",
    "@types/node": "14.14.33",
    "@types/react": "17.0.30",
    "@types/react-dom": "17.0.9",
    "@types/react-native": "0.66.2",
    "@types/react-native-countdown-component": "^2.7.0",
    "@typescript-eslint/eslint-plugin": "~5.3.0",
    "@typescript-eslint/parser": "~5.3.0",
    "babel-jest": "27.2.3",
    "babel-loader": "^8.2.3",
    "babel-plugin-module-resolver": "^4.1.0",
    "babel-plugin-react-native-web": "^0.17.5",
    "cypress": "^9.1.0",
    "detox": "19.0.0",
    "eslint": "8.2.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "eslint-plugin-import": "2.25.2",
    "eslint-plugin-jsx-a11y": "6.5.1",
    "eslint-plugin-react": "7.27.0",
    "eslint-plugin-react-hooks": "4.2.0",
    "jest": "27.2.3",
    "jest-circus": "27.2.3",
    "jest-react-native": "18.0.0",
    "metro": "0.66.2",
    "metro-react-native-babel-preset": "0.66.2",
    "metro-resolver": "0.66.2",
    "patch-package": "^6.4.7",
    "postinstall-postinstall": "^2.1.0",
    "prettier": "^2.3.1",
    "react-native-svg": "12.1.1",
    "react-native-svg-transformer": "0.14.3",
    "react-test-renderer": "17.0.2",
    "ts-jest": "27.0.5",
    "typescript": "~4.4.3",
    "url-loader": "^3.0.0"
  }
}

quicksilverr avatar Apr 06 '22 05:04 quicksilverr

After doing the above suggested babel changes you need to make sure you've cleared your metro cache. Run the nx command you use to open the app on iOS simulator followed with --reset-cache and it should work.

MikeSpitz avatar Jun 22 '22 14:06 MikeSpitz

The metro config change works, but has anyone encountered this issue?

Display error 
Error invoking callback 309

Maximum call stack size exceeded (native stack depth)

RangeError: Maximum call stack size exceeded (native stack depth)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    ... skipping 100 frames
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at call (native)
    at call (native)
    at slice (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:228573:76)
    at nonPromiseMethodWrapper (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:5164:33)
    at createTimer (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:30772:38)
    at setTimeout (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:30587:18)
    at anonymous (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:30754:35)
    at forEach (native)
    at callReactNativeMicrotasks (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:30753:21)
    at __callReactNativeMicrotasks (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:5593:46)
    at anonymous (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:5371:45)
    at __guard (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:5576:15)
    at flushedQueue (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:5370:21)
    at invokeCallbackAndReturnFlushedQueue (http://localhost:8081/src/main.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=app.id:5363:33)

RCTFatal
-[RCTCxxBridge handleError:]
__34-[RCTCxxBridge _initializeBridge:]_block_invoke
facebook::react::RCTMessageThread::tryFunc(std::__1::function<void ()> const&)
facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1::operator()() const
decltype(static_cast<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1&>(fp)()) std::__1::__invoke<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1&>(facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1&)
void std::__1::__invoke_void_return_wrapper<void, true>::__call<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1&>(facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1&)
std::__1::__function::__alloc_func<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1, std::__1::allocator<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1>, void ()>::operator()()
std::__1::__function::__func<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1, std::__1::allocator<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1>, void ()>::operator()()
std::__1::__function::__value_func<void ()>::operator()() const
std::__1::function<void ()>::operator()() const
invocation function for block in facebook::react::RCTMessageThread::runAsync(std::__1::function<void ()>)
__CFRUNLOOP_IS_CALLING_OUT_TO_A_BLOCK__
__CFRunLoopDoBlocks
__CFRunLoopRun
CFRunLoopRunSpecific
+[RCTCxxBridge runRunLoop]
__NSThread__start__
_pthread_start
thread_start

_

The error occurs when I add storybook to the app. Specifically when I use App from storybook and not directly.

Anybody has any ideas why this config change from @kaoDev would break this?

aqos156 avatar Aug 23 '22 10:08 aqos156

I've got the same problem, i use expo , with reanimated v2 and if i try to use the hook useAnimatedStyle it throws :Synchronously call function error.

Example code directly inside the App.tsx

    const opacity = useSharedValue(100);

    const styleContainer = useAnimatedStyle(() => {
        return {
            opacity: withTiming(opacity.value , {
                duration: 100,
                easing: Easing.linear
            })
        };
    });
    
    return (
        <Animated.View style={[styleContainer]}>
        </Animated.View>
    )

Versions: "react-native-reanimated": "~2.12.0", "expo": "~47.0.12", "react-native": "0.70.5"

calinvasileandrei avatar Mar 15 '23 22:03 calinvasileandrei