feat: Replace Reanimated with RN Worklets (#1468)

* Setup RN Worklets

* Use RN Worklets on iOS

* Fix console

* Add `installFrameProcessorBindings()` function

* Add `FrameProcessorPlugins` proxy (BREAKING CHANGE)

* Clean up docs

* Update FRAME_PROCESSORS.mdx

* Use RN Worklets 0.2.5

* feat: Android build setup

* Rewrite Android Frame Processor Part

* Update CMakeLists.txt

* fix: Add react-native-worklets Gradle dependency

* Update Podfile.lock

* fix build

* gradle:7.4.1

* Init JSI Bindings in method on Android

* Fix Folly flags

* fix: Init `FrameProcessorRuntimeManager` later

* fix: Wrap in `<GestureHandlerRootView>`

* Refactor plugins

* fix: Remove enableFrameProcessors

* Install RN Worklets from current GH master

* Update babel.config.js

* Update CameraViewModule.kt

* Update ImageProxyUtils.java

* feat: Upgrade to Reanimated v3

* fix: Fix crash on Worklet init

* Update RN Worklets to latest master

* fix: Simplify FP Plugins Proxy

src/Camera.tsx

@@ -315,6 +315,14 @@ export class Camera extends React.PureComponent<CameraProps> {
   }
 
   //#region Static Functions (NativeModule)
+  /**
+   * Install JSI Bindings for Frame Processors
+   */
+  public static installFrameProcessorBindings(): void {
+    const result = CameraModule.installFrameProcessorBindings() as unknown;
+    if (result !== true) throw new Error('Failed to install Frame Processor JSI bindings!');
+  }
+
   /**
    * Get a list of all available camera devices on the current phone.
    *

src/FrameProcessorPlugins.ts

@@ -0,0 +1,13 @@
+import type { Frame } from './Frame';
+import { Camera } from './Camera';
+
+// Install VisionCamera Frame Processor JSI Bindings and Plugins
+Camera.installFrameProcessorBindings();
+
+type FrameProcessor = (frame: Frame, ...args: unknown[]) => unknown;
+type TFrameProcessorPlugins = Record<string, FrameProcessor>;
+
+/**
+ * All natively installed Frame Processor Plugins.
+ */
+export const FrameProcessorPlugins = global.FrameProcessorPlugins as TFrameProcessorPlugins;

src/globals.d.ts

@@ -1,24 +1,6 @@
 /* eslint-disable no-var */
 
 /**
- * `true` if currently running in a Frame Processor runtime
+ * The global Frame Processor plugins registry - will be initialized after the `installFrameProcessorBindings()` call
  */
-declare var _FRAME_PROCESSOR: true | undefined;
-/**
- * `true` if currently running in a reanimated UI runtime
- */
-declare var _UI: true | undefined;
-/**
- * `true` if currently running in a Worklet runtime (frame processor, multithreading, reanimated)
- */
-declare var _WORKLET: true | undefined;
-
-/**
- * A native logging function (outputs to Xcode console/Android Logcat)
- */
-declare var _log: (message: string) => void | undefined;
-
-/**
- * Set a Proxy for global.console in this Runtime
- */
-declare var _setGlobalConsole: (console: unknown) => void;
+declare var FrameProcessorPlugins: Record<string | symbol, unknown> | undefined;

src/hooks/useFrameProcessor.ts

@@ -1,12 +1,10 @@
-/* global _setGlobalConsole */
-
 import { DependencyList, useCallback } from 'react';
 import type { Frame } from '../Frame';
+// Install RN Worklets by importing it
+import 'react-native-worklets/src';
 
 type FrameProcessor = (frame: Frame) => void;
 
-const capturableConsole = console;
-
 /**
  * Returns a memoized Frame Processor function wich you can pass to the `<Camera>`. (See ["Frame Processors"](https://mrousavy.github.io/react-native-vision-camera/docs/guides/frame-processors))
  *
@@ -25,34 +23,6 @@ const capturableConsole = console;
  * ```
  */
 export function useFrameProcessor(frameProcessor: FrameProcessor, dependencies: DependencyList): FrameProcessor {
-  return useCallback((frame: Frame) => {
-    'worklet';
-
-    // @ts-expect-error
-    if (global.didSetConsole == null || global.didSetConsole === false) {
-      const console = {
-        // @ts-expect-error __callAsync is injected by native REA
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        debug: capturableConsole.debug.__callAsync,
-        // @ts-expect-error __callAsync is injected by native REA
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        log: capturableConsole.log.__callAsync,
-        // @ts-expect-error __callAsync is injected by native REA
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        warn: capturableConsole.warn.__callAsync,
-        // @ts-expect-error __callAsync is injected by native REA
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        error: capturableConsole.error.__callAsync,
-        // @ts-expect-error __callAsync is injected by native REA
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        info: capturableConsole.info.__callAsync,
-      };
-      _setGlobalConsole(console);
-      // @ts-expect-error
-      global.didSetConsole = true;
-    }
-
-    frameProcessor(frame);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, dependencies);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useCallback(frameProcessor, dependencies);
 }

src/index.ts

@@ -5,6 +5,7 @@ export * from './CameraPosition';
 export * from './CameraPreset';
 export * from './CameraProps';
 export * from './Frame';
+export * from './FrameProcessorPlugins';
 export * from './CameraProps';
 export * from './PhotoFile';
 export * from './Point';