scheduleOnRN

scheduleOnRN lets you schedule a function to be executed on the RN Runtime from any Worklet Runtime.

To learn more about the different runtime kinds, check Runtime Kinds.

scheduleOnRN is commonly used to update React state from UI Runtime, e.g. when animation finishes or conditionally within a gesture.

Reference

import { scheduleOnRN } from 'react-native-worklets';

function App() {
  // While on the UI thread
  scheduleOnRN(navigation.goBack);
}

Type definitions

function scheduleOnRN<Args extends unknown[], ReturnValue>(
  fun:
    | ((...args: Args) => ReturnValue)
    | RemoteFunction<Args, ReturnValue>
    | WorkletFunction<Args, ReturnValue>,
  ...args: Args
): void

Arguments

fn

A reference to a function you want to execute on the RN Runtime.

args

Arguments to the function you want to execute on the RN Runtime.

Example

Loading...

Remarks

• Functions passed to scheduleOnRN must be defined in the RN Runtime scope, i.e. in the component body or the global scope. The code below won't work because myFunction is defined in the runOnUI callback, which is only executed in the UI Runtime:

import { runOnUI, scheduleOnRN } from 'react-native-worklets';

runOnUI(() => {
  // myFunction is defined on the UI thread 🚨
  const myFunction = () => {
    // ...
  };
  scheduleOnRN(myFunction)(); // 💥
})();

Implementation Details

• Scheduling function from the RN Runtime (we are already on RN Runtime) simply uses queueMicrotask.
• When functions need to be scheduled from the UI Runtime, first function and args are serialized and then the system passes the scheduling responsibility to the JSScheduler. The JSScheduler then uses the RN CallInvoker to schedule the function asynchronously on the JavaScript thread by calling jsCallInvoker_->invokeAsync().
• When called from a Worker Runtime, it uses the same JSScheduler mechanism.