refactor(Worklets): always spin AnimationFrameQueue (#8900)

## Summary

I've decided to remove the optimization of the UI Runtime to request a
native animation frame only when it has JS animation frame queue
pending.

The optimization itself is marginal and on the other hand it lead to bad
patterns of calling `flushMicrotasks` imperatively. Because Shared Value
side-effects (running the input-outputs graph) are executed in the
microtask queue, changing a shared value via JSI without any animations
going wouldn't trigger any visible changes. For this reason i.e.
`useAnimatedSensor` called `flushMicrotasks` to make sure that the
sensor registers and is not held in the queue forever.

## Test plan

- Bokeh example works ✅ 
- Sensors on physical device work ✅ 
- Runtime run loop tests pass ✅

Author: tjzel

packages/react-native-reanimated/src/hook/useAnimatedSensor.ts

@@ -1,6 +1,5 @@
 'use strict';
 import { useEffect, useMemo, useRef } from 'react';
-import { callMicrotasks } from 'react-native-worklets';
 
 import type {
   AnimatedSensor,
@@ -154,7 +153,6 @@ export function useAnimatedSensor(
         }
       }
       sensorData.value = data;
-      callMicrotasks();
     });
 
     if (id !== -1) {

packages/react-native-reanimated/src/valueSetter.ts

@@ -45,16 +45,7 @@ export function valueSetter<Value>(
       global.__frameTimestamp || global._getAnimationTimestamp();
     initializeAnimation(currentTimestamp);
 
-    const step = (newTimestamp: number) => {
-      // Function `requestAnimationFrame` adds callback to an array, all the callbacks are flushed with function `__flushAnimationFrame`
-      // Usually we flush them inside function `nativeRequestAnimationFrame` and then the given timestamp is the timestamp of end of the current frame.
-      // However function `__flushAnimationFrame` may also be called inside `registerEventHandler` - then we get actual timestamp which is earlier than the end of the frame.
-
-      const timestamp =
-        newTimestamp < (animation.timestamp || 0)
-          ? animation.timestamp
-          : newTimestamp;
-
+    const step = (timestamp: number) => {
       if (animation.cancelled) {
         animation.callback?.(false /* finished */);
         return;

packages/react-native-worklets/src/deprecated.ts

@@ -30,3 +30,9 @@ export const isShareableRef = isSerializableRef;
 
 /** @deprecated Use {@link serializableMappingCache} instead. */
 export const shareableMappingCache = serializableMappingCache;
+
+/** @deprecated NOOP, don't use. */
+export function callMicrotasks(): void {
+  'worklet';
+  // NOOP for backwards compatibility.
+}

packages/react-native-worklets/src/index.ts

@@ -14,6 +14,7 @@ if (globalThis._ALWAYS_FALSE) {
 }
 
 export {
+  callMicrotasks,
   isShareableRef,
   makeShareable,
   type MakeShareableClone,
@@ -59,7 +60,6 @@ export {
   scheduleOnRuntime,
 } from './runtimes';
 export {
-  callMicrotasks,
   executeOnUIRuntimeSync,
   runOnJS,
   runOnUI,

packages/react-native-worklets/src/runLoop/uiRuntime/requestAnimationFrame.ts

@@ -1,10 +1,9 @@
 'use strict';
 
-import { callMicrotasks } from '../../threads';
-
 export function setupRequestAnimationFrame() {
   'worklet';
   const nativeRequestAnimationFrame = globalThis.requestAnimationFrame;
+  const callMicrotasks = globalThis.__callMicrotasks;
 
   let queuedCallbacks: ((timestamp: number) => void)[] = [];
   let queuedCallbacksBegin = 0;
@@ -14,9 +13,7 @@ export function setupRequestAnimationFrame() {
   let flushedCallbacksBegin = 0;
   let flushedCallbacksEnd = 0;
 
-  let flushRequested = false;
-
-  globalThis.__flushAnimationFrame = (timestamp: number) => {
+  function executeQueue(timestamp: number) {
     flushedCallbacks = queuedCallbacks;
     queuedCallbacks = [];
 
@@ -31,28 +28,17 @@ export function setupRequestAnimationFrame() {
     flushedCallbacksBegin = flushedCallbacksEnd;
 
     callMicrotasks();
-  };
+  }
 
-  globalThis.requestAnimationFrame = (
+  function requestAnimationFrame(
     callback: (timestamp: number) => void
-  ): number => {
+  ): number {
     const handle = queuedCallbacksEnd++;
-
     queuedCallbacks.push(callback);
-    if (!flushRequested) {
-      flushRequested = true;
-
-      nativeRequestAnimationFrame((timestamp) => {
-        flushRequested = false;
-        globalThis.__frameTimestamp = timestamp;
-        globalThis.__flushAnimationFrame(timestamp);
-        globalThis.__frameTimestamp = undefined;
-      });
-    }
     return handle;
-  };
+  }
 
-  globalThis.cancelAnimationFrame = (handle: number) => {
+  function cancelAnimationFrame(handle: number) {
     if (handle < flushedCallbacksBegin || handle >= queuedCallbacksEnd) {
       return;
     }
@@ -62,5 +48,23 @@ export function setupRequestAnimationFrame() {
     } else {
       queuedCallbacks[handle - queuedCallbacksBegin] = () => {};
     }
+  }
+
+  function flushQueue(timestamp: number) {
+    globalThis.__frameTimestamp = timestamp;
+    executeQueue(timestamp);
+    globalThis.__frameTimestamp = undefined;
+
+    /* Schedule next frame */
+    nativeRequestAnimationFrame(flushQueue);
+  }
+
+  globalThis.requestAnimationFrame = requestAnimationFrame;
+  globalThis.cancelAnimationFrame = cancelAnimationFrame;
+  globalThis.__flushAnimationFrame = () => {
+    // NOOP for backwards compatibility
   };
+
+  /* Start the loop */
+  nativeRequestAnimationFrame(flushQueue);
 }

packages/react-native-worklets/src/threads.native.ts

@@ -47,13 +47,6 @@ export function setupMicrotasks() {
   };
 }
 
-function callMicrotasksOnUIThread() {
-  'worklet';
-  globalThis.__callMicrotasks();
-}
-
-export const callMicrotasks = callMicrotasksOnUIThread;
-
 /**
  * Lets you schedule a function to be executed on the [UI
  * Runtime](https://docs.swmansion.com/react-native-worklets/docs/fundamentals/runtimeKinds#ui-runtime).
@@ -376,7 +369,7 @@ function flushUIQueue(): void {
             scheduleOnRN(jobResolve, result);
           }
         });
-        callMicrotasks();
+        globalThis.__callMicrotasks();
       })
     );
   });

packages/react-native-worklets/src/threads.ts

@@ -4,10 +4,6 @@ import { WorkletsError } from './debug/WorkletsError';
 import { IS_JEST } from './platformChecker';
 import { mockedRequestAnimationFrame } from './runLoop/uiRuntime/mockedRequestAnimationFrame';
 
-export function callMicrotasks(): void {
-  // on web flushing is a noop as immediates are handled by the browser
-}
-
 export function scheduleOnUI<Args extends unknown[], ReturnValue>(
   worklet: (...args: Args) => ReturnValue,
   ...args: Args