feat: worklet example

Author: lukaszkurantdev

example/babel.config.js

@@ -8,7 +8,7 @@ module.exports = getConfig(
   {
     presets: ['module:@react-native/babel-preset'],
     plugins: [
-      // ['react-native-worklets-core/plugin'],
+      ['react-native-worklets-core/plugin'],
       'react-native-reanimated/plugin',
     ],
   },

example/ios/Podfile.lock

@@ -1257,40 +1257,6 @@ PODS:
     - ReactCommon/turbomodule/core
     - Yoga
   - SocketRocket (0.7.0)
-  - vision-camera-resize-plugin (3.1.0):
-    - DoubleConversion
-    - glog
-    - hermes-engine
-    - RCT-Folly (= 2024.01.01.00)
-    - RCTRequired
-    - RCTTypeSafety
-    - React-Codegen
-    - React-Core
-    - React-debug
-    - React-Fabric
-    - React-featureflags
-    - React-graphics
-    - React-ImageManager
-    - React-NativeModulesApple
-    - React-RCTFabric
-    - React-rendererdebug
-    - React-utils
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - VisionCamera
-    - Yoga
-  - VisionCamera (4.5.2):
-    - VisionCamera/Core (= 4.5.2)
-    - VisionCamera/FrameProcessors (= 4.5.2)
-    - VisionCamera/React (= 4.5.2)
-  - VisionCamera/Core (4.5.2)
-  - VisionCamera/FrameProcessors (4.5.2):
-    - React
-    - React-callinvoker
-    - react-native-worklets-core
-  - VisionCamera/React (4.5.2):
-    - React-Core
-    - VisionCamera/FrameProcessors
   - Yoga (0.0.0)
 
 DEPENDENCIES:
@@ -1354,8 +1320,6 @@ DEPENDENCIES:
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
-  - vision-camera-resize-plugin (from `../node_modules/vision-camera-resize-plugin`)
-  - VisionCamera (from `../node_modules/react-native-vision-camera`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -1481,10 +1445,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   RNReanimated:
     :path: "../node_modules/react-native-reanimated"
-  vision-camera-resize-plugin:
-    :path: "../node_modules/vision-camera-resize-plugin"
-  VisionCamera:
-    :path: "../node_modules/react-native-vision-camera"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -1549,8 +1509,6 @@ SPEC CHECKSUMS:
   ReactCommon: eebffb37a90138c6db6eb8b2d952e7e5c6bc083c
   RNReanimated: f4ff116e33e0afc3d127f70efe928847c7c66355
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
-  vision-camera-resize-plugin: 4306d5df9bce0e603bbe6ab04337f21a606f4ad1
-  VisionCamera: 057aff621f7801b7d99a00d157fa39244bbd4fd2
   Yoga: 6259f968a4fdf516d76a4432dead624d71aa0fb1
 
 PODFILE CHECKSUM: ded8a41f26047703e900afe99b8a72ca375b02ca

example/package.json

@@ -14,7 +14,8 @@
     "react": "18.2.0",
     "react-native": "0.74.4",
     "react-native-image-picker": "^7.1.2",
-    "react-native-reanimated": "^3.14.0"
+    "react-native-reanimated": "^3.14.0",
+    "react-native-worklets-core": "^1.3.3"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

example/src/ImageExample.tsx

@@ -10,6 +10,7 @@ import {
   type Rect,
 } from 'react-native-fast-opencv';
 import { launchImageLibrary, type Asset } from 'react-native-image-picker';
+import { useRunOnJS, useWorklet, Worklets } from 'react-native-worklets-core';
 
 export function ImageExample() {
   const [photo, setPhoto] = useState<Asset | null>(null);
@@ -28,12 +29,17 @@ export function ImageExample() {
       const src = OpenCV.base64ToMat(photo.base64);
       const dst = OpenCV.createObject(ObjectType.Mat, 0, 0, DataTypes.CV_8U);
 
-      OpenCV.invoke('cvtColor', src, dst, ColorConversionCodes.COLOR_BGR2HSV);
+      await OpenCV.invokeAsync(
+        'cvtColor',
+        src,
+        dst,
+        ColorConversionCodes.COLOR_BGR2HSV
+      );
 
       const lowerBound = OpenCV.createObject(ObjectType.Scalar, 40, 40, 40);
       const upperBound = OpenCV.createObject(ObjectType.Scalar, 100, 255, 255);
 
-      OpenCV.invoke('inRange', dst, lowerBound, upperBound, dst);
+      await OpenCV.invokeAsync('inRange', dst, lowerBound, upperBound, dst);
 
       // const channels = OpenCV.createObject(ObjectType.MatVector);
       // OpenCV.invoke('split', dst, channels);
@@ -65,20 +71,51 @@ export function ImageExample() {
 
       // console.log(rectangles);
 
-
-      const result = OpenCV.toJSValue(dst);
-      setB64(result.base64);
+      // const result = OpenCV.toJSValue(dst);
+      // setB64(result.base64);
       // console.log(array.length);
     }
   };
 
+  const test2 = useRunOnJS((data: string) => {
+    setB64(data);
+  }, []);
+
+  const worklet = useWorklet(
+    'default',
+    () => {
+      'worklet';
+      if (photo && photo.base64 && photo.width && photo.height) {
+        const src = OpenCV.base64ToMat(photo.base64);
+        const dst = OpenCV.createObject(ObjectType.Mat, 0, 0, DataTypes.CV_8U);
+
+        OpenCV.invoke('cvtColor', src, dst, ColorConversionCodes.COLOR_BGR2HSV);
+
+        const lowerBound = OpenCV.createObject(ObjectType.Scalar, 40, 40, 40);
+        const upperBound = OpenCV.createObject(
+          ObjectType.Scalar,
+          100,
+          255,
+          255
+        );
+
+        OpenCV.invoke('inRange', dst, lowerBound, upperBound, dst);
+
+        const result = OpenCV.toJSValue(dst);
+
+        test2(result.base64);
+      }
+    },
+    []
+  );
+
   return (
     <SafeAreaView style={{ backgroundColor: 'white', flex: 1 }}>
       <Button title="Select photo" onPress={test} />
       <Text>
         URI: {photo?.uri} {photo?.height} {photo?.width}
       </Text>
-      <Button title="Process" onPress={process} />
+      <Button title="Process" onPress={() => worklet()} />
       {photo?.base64 && photo?.width && photo?.height && (
         <Image
           source={{ uri: 'data:image/jpg;base64,' + photo.base64 }}

src/NativeFastOpencv.ts

@@ -7,8 +7,6 @@ export interface Spec extends TurboModule {
 
 const OpenCVInstaller = TurboModuleRegistry.getEnforcing<Spec>('FastOpencv');
 
-console.log('try to install', OpenCVInstaller);
-
 if (global.__loadOpenCV == null) {
   if (
     OpenCVInstaller == null ||

yarn.lock

@@ -10934,6 +10934,7 @@ __metadata:
     react-native-builder-bob: ^0.29.0
     react-native-image-picker: ^7.1.2
     react-native-reanimated: ^3.14.0
+    react-native-worklets-core: ^1.3.3
   languageName: unknown
   linkType: soft
 
@@ -11014,6 +11015,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-worklets-core@npm:^1.3.3":
+  version: 1.3.3
+  resolution: "react-native-worklets-core@npm:1.3.3"
+  dependencies:
+    string-hash-64: ^1.0.3
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: bf2f0eb5852ac1e4f58e20fd5912bed46c0f2bd5a671dadb596b7edf2aa5816874c694f472adaaefdb9ef19e5355c05ceb2877946bfaa0cd081c9cc0c95aa404
+  languageName: node
+  linkType: hard
+
 "react-native@npm:0.74.4":
   version: 0.74.4
   resolution: "react-native@npm:0.74.4"
@@ -12158,6 +12171,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"string-hash-64@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "string-hash-64@npm:1.0.3"
+  checksum: 79de8431b4fa3e85a2429cd52a34f7948221ff167b7a094e05d6bcfd0173474b232e0c9845c96f74b0d7b6b0c8bbe2c3532a4cacb21635293ef0cf3cc8e77f06
+  languageName: node
+  linkType: hard
+
 "string-length@npm:^4.0.1":
   version: 4.0.2
   resolution: "string-length@npm:4.0.2"