Tried to synchronously call anonymous function from a different thread

[aqos156]

Environment

Library version: 1.0.0-rc.6 OS version: iPhone 13, iOS 15.5

{
      "@react-hook/debounce": "^4.0.0",
      "@react-native-firebase/app": "^14.1.1",
      "@react-native-firebase/messaging": "^14.1.1",
      "@react-navigation/native": "^6.0.11",
      "@react-navigation/native-stack": "^6.7.0",
      "@reduxjs/toolkit": "^1.8.3",
      "@rneui/base": "^4.0.0-rc.5",
      "@rneui/themed": "^4.0.0-rc.5",
      "native-base": "^3.4.9",
      "react": "18.2.0",
      "react-native": "0.68.2",
      "react-native-gesture-handler": "^2.5.0",
      "react-native-reanimated": "^2.9.1",
      "react-native-safe-area-context": "^4.3.1",
      "react-native-screens": "^3.15.0",
      "react-native-sticky-parallax-header": "^1.0.0-rc.6",
      "react-native-vector-icons": "^9.2.0",
      "react-redux": "^7.2.8",
      "redux": "^4.2.0",
      "redux-logger": "^3.0.6",
      "redux-persist": "^6.0.0",
      "tslib": "^2.3.0"
   }

Affected platforms

• [X] Android
• [X] iOS

Current behavior

When in NX workspace, on iOS the app opens with the given error and on Android app crashes (doesn't even start) and the same error is in logcat. No error is displayed in metro.

Code:

function Base() {
   return (
      <DetailsHeaderScrollView backgroundColor="green" tag="Details type" title="Details title">
         <Text>axd</Text>
      </DetailsHeaderScrollView>
   )
}

Expected behavior

To work without errors.

Reproduction

1. Create react native nx mono repo https://nx.dev/guides/react-native
2. Add this library

[aqos156]

maybe connected with https://github.com/software-mansion/react-native-reanimated/issues/3049 ?

[mateusz1913]

@aqos156 can you provide minimal reproducible repo, so I can clone it, launch it and reproduce the issue?

[aqos156]

@mateusz1913 https://github.com/aqos156/paralax-demo here is the demo.

To start the app run the following in the root of the project. The app and all setup regarding it is inside apps/example. Package version can be changed via the root package.json file. If you want to add another dependency, yarn add it and make sure it is present also in the apps/example/package.json file.

npx nx run-ios
npx nx run-android

npx nx start  # runs only packager

[mateusz1913]

@aqos156

Ok, so I reproduced the issue, however, it seems to be related to nx workspaces setup.

On the error screenshot you provided, worklet location is <root>/node_modules/react-native-reanimated/lib/hook/useAnimatedStyle.js - this indicates that the useAnimatedStyle hook is not correctly "auto-workletized" (reanimated does it here)

I tried to manually annotate 'worklet'; in each place where useAnimatedStyle & useAnimatedReaction are used for DetailsHeaderScrollView and issue was eliminated, however when I tried to start dragging, the same error popped up for useAnimatedScrollHandler hook. Again, this indicates that it's specific to nx tool and reanimated library not workletizing its built-in hooks when added as a package to nx workspaces.

I also tried to add the reanimated babel plugin to root babel.config.json - no effect.

Closing as it has nothing to do with the sticky parallax header library

[mikehuebner]

I'm still seeing this issue but only with this library and not any other animations I'm doing. Which is very confusing. Using Nx myself inside a monorepo.

[thidasapankaja]

I'm also having the same issue with nx monorepo. Did you figure out the issue @mikehuebner , @aqos156 ?