Expose worklet runtime

[tomekzaw]

Details

When you write to a shared value in the RN runtime using sv.value = 42; or sv.value(42); syntax, the call is scheduled to be run on the UI runtime. This means that the shared value doesn't update its value on other worklet runtimes.

As a workaround, instead of calling sv.value = 42 in the RN runtime which simply calls runOnUI under the hood, you can call runOnRuntime on your own like this:

runOnRuntime(workletRuntime, () => {
  'worklet';
  sv.value = 42;
})();

However, currently there's no way to obtain workletRuntime. This PR exposes workletRuntime used by MarkdownTextInput component using getWorkletRuntime() function.

Because worklet runtime creation is lazy (since we really shouldn't call native/turbo modules in the top-level scope so we delay the creation till MarkdownTextInput is first rendered), please make sure to call getWorkletRuntime() function only when the worklet runtime has already been initialized. This means you cannot call getWorkletRuntime() in top-level scope of your code. Also, please make sure not to memoize or even store its result since since this affects the lifetime of WorkletRuntime instance which should be managed only by react-native-live-markdown. Finally, please do not call getWorkletRuntime() on web where parsers are run directly on the same JS runtime and there's no concept of worklet runtimes.

As for runOnRuntime, this function is sadly not available on web. Also, keep in mind that runOnRuntime(worklet) itself doesn't schedule the worklet to be run; it just creates a JS function that, when called, will schedule the call. So if you want to immediately schedule the worklet, please use the following syntax: runOnRuntime(() => { ... }))(); with () at the end of the line.

Related Issues

GH_LINK

Manual Tests

App.tsx

import * as React from 'react';
import {Button, StyleSheet, View} from 'react-native';
import {runOnRuntime, useSharedValue} from 'react-native-reanimated';

import {
  getWorkletRuntime,
  MarkdownTextInput,
  parseExpensiMark,
} from '@expensify/react-native-live-markdown';

export default function App() {
  const sv = useSharedValue('before');

  React.useEffect(() => {
    runOnRuntime(getWorkletRuntime(), () => {
      'worklet';
      sv.value = 'after';
    })();
  }, [sv]);

  return (
    <View style={styles.container}>
      <MarkdownTextInput parser={parseExpensiMark} />
      <Button
        title="Press me"
        onPress={() => {
          runOnRuntime(getWorkletRuntime(), () => {
            'worklet';
            console.log(sv.value);
          })();
        }}
      />
    </View>
  );
}

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

Linked PRs

[Kicu]

This fixes a real life problem when using workletized parser in LiveMarkdown and I saw it working 👍

I have one question though. In your examples we pass an anonymous function onPress like this:

() => {runOnRuntime(workletRuntime, () => {
  'worklet';
  sv.value = 42;
})()
};

But runOnRuntime already returns a function, so in onPress could we also write code like this?

onPress={runOnRuntime(workletRuntime, () => {
  'worklet';
  sv.value = 42;
})}

I think in useEffect we might still need the outer wrapper because React likes it that way (though I'm a bit unsure 🤔) but in onPress it should be ok

[tomekzaw]

But runOnRuntime already returns a function, so in onPress could we also write code like this?

@Kicu I often ask myself this question. onPress callback accepts event argument so if we pass runOnRuntime(...) directly to onPress then we will actually call runOnRuntime(...)(event) which will result in serializing event. That's why event handlers are usually lambdas with no arguments.

[Kicu]

Totally makes sense 👍

[Skalakid]

LGTM

[Kicu]

LGTM

[os-botify]

🚀 Published to npm in 0.1.222 🎉