Schedule worklets via runOnJS

[tomekzaw]

Summary

Currently, it's impossible to pass functions directly to runOnJS:

runOnUI(() => {
   console.log(_WORKLET, 'Hello from UI thread');
  runOnJS(() => {
    console.log(_WORKLET, 'Hello from JS thread');
  })();
})();

The above example will fail with the following error:

The workaround is to define the function in outer scope so that it gets cloned via closure as a remote function:

const hello = () => {
  console.log(_WORKLET, 'Hello from JS thread');
};

runOnUI(() => {
  console.log(_WORKLET, 'Hello from UI thread');
  runOnJS(hello)();
})();

This is sufficient for most of the cases since you can always parametrize the behavior of the function by passing the additional arguments. However, our library users deserve better experience, so this PR adds support for passing worklets directly to runOnJS function:

runOnUI(() => {
   console.log(_WORKLET, 'Hello from UI thread');
  runOnJS(() => {
    'worklet';
    console.log(_WORKLET, 'Hello from JS thread');
  })();
})();

Test plan

This change requires the following PR:

• Experimental transpilation functionality for nested worklets #4332

You will also need to enable the flag in Example/babel.config.js:

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

App.tsx

import {Button, StyleSheet, View} from 'react-native';
import {runOnJS, runOnUI} from 'react-native-reanimated';

import React from 'react';

export default function App() {
  const handlePress = () => {
    runOnUI(() => {
      console.log(_WORKLET, 'Hello from UI thread');
      runOnJS(() => {
        'worklet';
        console.log(_WORKLET, 'Hello from JS thread');
      })();
    })();
  };

  return (
    <View style={styles.container}>
      <Button onPress={handlePress} title="Click me" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

[tomekzaw]

@tjzel Thanks for the hint with <A, R> here! :swiniok:

[tjzel]

                                                                                
                #&%#((((/            ...            ,/(((                       
                 ##%%%(///((,(((((((((((((((((((#(((///#.                       
                 ((#####(/##((((((((///////(((((((((/(#(.                       
                 //(((%##%######((((//////////(((((((#(/.                       
                  .%##%%%%%####((((##(///////(((#((###(#                        
                     %%%%%%##%%&@@%(##(((((/(((##(&&%%                          
                     .&%%%#((###((((###((((((((///////*        .                
                      #%###(((((((((########/////////((((     .                 
                  ,#,  ###(((((((((######%#/((##(//(((##((    .                 
                 ###*. .##((((((########%%/((@&%(/((((&&#(   .  *               
               /##%%%*,. ,### #########%%(((&&&%///(((&&%(/*. .*                
              #&%%%%%%(*,..,,.*######%%%%#//&&&//////((&&//..*.                 
                %%%%&%#((/*,/,.*%%%%%%%%&&%(/////////(((###,,                   
                %%%%%&%#(/((((*,...*#%%%&&&&&&#(((/((((***/*/.#,. .#            
               ,%%%%%&&&%%########((((((((&%####%%%%%#(((((((((////*%           
               (%%%%%%&&&&&&&&&%%%%%%%####%&%%###%%%%%%#((((((((((((.           
                  &%%%%&&&&&&&&&&&&&&&&%%%%%%%%%%%%&(  (%#((((((##*             
                   &%%&&&&&&&&&&&&&&&&&&&&&&&&&&&%&      %####%,                
                    &&&&&&&&&&&&&&&&&&&&&&&&&&&&%(        /#                    
                        %&&&&&&&&&&&&&&&&&&&&#                                  
                          &%&&&&&&&&&&&&&&%&                                    
                                &%%%%&