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

example/src/App.tsx

@@ -6,6 +6,7 @@ import { MediaPage } from './MediaPage';
 import { CameraPage } from './CameraPage';
 import type { Routes } from './Routes';
 import { Camera, CameraPermissionStatus } from 'react-native-vision-camera';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 const Stack = createNativeStackNavigator<Routes>();
 
@@ -28,24 +29,26 @@ export function App(): React.ReactElement | null {
   const showPermissionsPage = cameraPermission !== 'authorized' || microphonePermission === 'not-determined';
   return (
     <NavigationContainer>
-      <Stack.Navigator
-        screenOptions={{
-          headerShown: false,
-          statusBarStyle: 'dark',
-          animationTypeForReplace: 'push',
-        }}
-        initialRouteName={showPermissionsPage ? 'PermissionsPage' : 'CameraPage'}>
-        <Stack.Screen name="PermissionsPage" component={PermissionsPage} />
-        <Stack.Screen name="CameraPage" component={CameraPage} />
-        <Stack.Screen
-          name="MediaPage"
-          component={MediaPage}
-          options={{
-            animation: 'none',
-            presentation: 'transparentModal',
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <Stack.Navigator
+          screenOptions={{
+            headerShown: false,
+            statusBarStyle: 'dark',
+            animationTypeForReplace: 'push',
           }}
-        />
-      </Stack.Navigator>
+          initialRouteName={showPermissionsPage ? 'PermissionsPage' : 'CameraPage'}>
+          <Stack.Screen name="PermissionsPage" component={PermissionsPage} />
+          <Stack.Screen name="CameraPage" component={CameraPage} />
+          <Stack.Screen
+            name="MediaPage"
+            component={MediaPage}
+            options={{
+              animation: 'none',
+              presentation: 'transparentModal',
+            }}
+          />
+        </Stack.Navigator>
+      </GestureHandlerRootView>
     </NavigationContainer>
   );
 }

example/src/frame-processors/ExamplePlugin.ts

@@ -1,20 +1,16 @@
-/* global __example_plugin __example_plugin_swift */
-import type { Frame } from 'react-native-vision-camera';
-
-declare let _WORKLET: true | undefined;
+import { FrameProcessorPlugins, Frame } from 'react-native-vision-camera';
 
 export function examplePluginSwift(frame: Frame): string[] {
   'worklet';
-  if (!_WORKLET) throw new Error('examplePluginSwift must be called from a frame processor!');
-
   // @ts-expect-error because this function is dynamically injected by VisionCamera
-  return __example_plugin_swift(frame, 'hello!', 'parameter2', true, 42, { test: 0, second: 'test' }, ['another test', 5]);
+  return FrameProcessorPlugins.example_plugin_swift(frame, 'hello!', 'parameter2', true, 42, { test: 0, second: 'test' }, [
+    'another test',
+    5,
+  ]);
 }
 
 export function examplePlugin(frame: Frame): string[] {
   'worklet';
-  if (!_WORKLET) throw new Error('examplePlugin must be called from a frame processor!');
-
   // @ts-expect-error because this function is dynamically injected by VisionCamera
-  return __example_plugin(frame, 'hello!', 'parameter2', true, 42, { test: 0, second: 'test' }, ['another test', 5]);
+  return FrameProcessorPlugins.example_plugin(frame, 'hello!', 'parameter2', true, 42, { test: 0, second: 'test' }, ['another test', 5]);
 }