Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot call another worklet from worklet #136

Open
mrousavy opened this issue Jan 11, 2024 · 5 comments
Open

Cannot call another worklet from worklet #136

mrousavy opened this issue Jan 11, 2024 · 5 comments

Comments

@mrousavy
Copy link
Member

Calling an inlined worklet from an existing worklet breaks, presumably because of some mistake in the babel plugin.

This code breaks:

const context1 = Worklets.createContext('context1')
const context2 = Worklets.createContext('context2')
const runAsync = Worklets.createRunInContextFn((func: () => void) => {
  'worklet'
  try {
    // Call long-running function
    func()
  } catch (e) {
    // Re-throw error on JS Thread
    throwJSError(e)
  }
}, context2)

const runNormalWorklet = Worklets.createRunInContextFn(() => {
  'worklet'
  
  console.log('running from context1!')
  runAsync(() => {
    'worklet'
    console.log('running from context2!')
  })
}, context1)

runNormalWorklet()

But when we lift out the nested worklet function outside from the existing worklet, it works:

+ const fn = () => {
+   'worklet'
+   console.log('running from context2')
+ }

 const runNormalWorklet = Worklets.createRunInContextFn(() => {
   'worklet'
  
   console.log('running from context1!')
-  runAsync(() => {
-    'worklet'
-   console.log('running from context2!')
-  })
+  runAsync(fn)
 }, context1)

I'm guessing this is an incompatibility with the Reanimated plugin again.

    "react-native-worklets-core": "0.2.4",
    "react-native-reanimated": "^3.5.4",
@MSchmidt
Copy link

Hey, just here to confirm that it's an incompatibility with Reanimated. I create a few test projects with and without expo, with and without Reanimated. It starts to fail as soon as the reanimated plugin is loaded in babel.config.js.

@mrousavy
Copy link
Member Author

You're right - you can fix this if you enabled processNestedWorklets in the Reanimated plugin! See software-mansion/react-native-reanimated#5576 (comment) for more info

@iamfat
Copy link

iamfat commented Apr 12, 2024

@mrousavy, i am still facing this issure currently. I'm not using reanimated, but i'm using tamagui which has reanimated as a dep. I tried add processNestedWorklets to babel.config.js but it did not work.

runAsync won't work in useFrameProcessor with [email protected], [email protected],[email protected] (deps of @tamagui/config)...

@mrousavy
Copy link
Member Author

Did you enable processNestedWorklets in reanimated babel plugin?

@iamfat
Copy link

iamfat commented Apr 12, 2024

I did it in babel.config.js of my project. Is that correct?

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants