Cannot call another worklet from worklet

[mrousavy]

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]

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]

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]

@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]

Did you enable processNestedWorklets in reanimated babel plugin?

[iamfat]

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 }],
    ],
};