Throw error when calling runOnUI on the UI runtime

[tomekzaw]

Summary

This PR adds a check that throws an error with a developer-friendly message when trying to call runOnUI function from a worklet which is already running on the UI runtime.

Motivation

It's difficult to decide what's the expected behavior of runOnUI in such case:

• If the function should be scheduled for the current animation frame, use queueMicrotask.
• If the function should be scheduled for the next animation frame, use requestAnimationFrame.
• If the function should be executed immediately, simply call it synchronously.

Note that neither setTimeout nor setInterval are implemented on the UI runtime. Also, setImmediate is not available as well as it's not a part of the standard.

Implementation

Currently, calling runOnUI on the UI thread throws an error "Tried to synchronously call..." because runOnUI is not marked as a worklet. Adding 'worklet'; directive causes "cannot add new property" error because _runOnUIQueue gets frozen while cloning the worklet to the UI runtime. This PR adds _runOnUIQueue to the whitelisted identifiers in Reanimated Babel plugin so it doesn't get captured into the closure, thus doesn't need to be cloned and frozen.

Alternatives

We could replace all occurrences of _runOnUIQueue with global._runOnUIQueue so that the queue isn't captured into worklet closure and thus doesn't get frozen. Another option would be simply to whitelist runOnUI function but it wouldn't work properly when aliased.

Test plan

App.tsx

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

import React from 'react';
import { runOnUI } from 'react-native-reanimated';

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

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

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

runOnUI(() => {
  'worklet';
  console.log(_WORKLET, 'Hello from the UI thread!');
  runOnUI(() => {
    'worklet';
    console.log(_WORKLET, 'Hello from the UI thread again!');
  })();
})();

Your beautiful eyes should see the following error:

[tjzel]

👏