From deb8beb688be8245c6aa1e50747462db7a321436 Mon Sep 17 00:00:00 2001 From: Marc Rousavy Date: Thu, 27 May 2021 11:08:57 +0200 Subject: [PATCH] chore: Bump reanimated requirements (#149) * Bump the reanimated requirement to 2.2.0 and above * bump versions podfile * Simplify Frame Processor * Add `'worklet'` note --- docs/docs/guides/FRAME_PROCESSORS.mdx | 2 +- docs/docs/guides/SETUP.mdx | 2 +- example/ios/Podfile.lock | 8 +++--- example/package.json | 2 +- example/yarn.lock | 8 +++--- .../FrameProcessorRuntimeManager.mm | 26 +++++++++---------- package.json | 5 ++-- src/Camera.tsx | 2 +- src/hooks/useFrameProcessor.ts | 12 +++------ yarn.lock | 8 +++--- 10 files changed, 35 insertions(+), 40 deletions(-) diff --git a/docs/docs/guides/FRAME_PROCESSORS.mdx b/docs/docs/guides/FRAME_PROCESSORS.mdx index c35d343..e6f6195 100644 --- a/docs/docs/guides/FRAME_PROCESSORS.mdx +++ b/docs/docs/guides/FRAME_PROCESSORS.mdx @@ -56,7 +56,7 @@ Because of the Frame Processor API's extensibility, you can even create your **c
:::note -Frame Processors require [**react-native-reanimated**](https://github.com/software-mansion/react-native-reanimated) 2.1.0 or higher. +Frame Processors require [**react-native-reanimated**](https://github.com/software-mansion/react-native-reanimated) 2.2.0 or higher. ::: ### Interacting with Frame Processors diff --git a/docs/docs/guides/SETUP.mdx b/docs/docs/guides/SETUP.mdx index a3d3e5e..443f431 100644 --- a/docs/docs/guides/SETUP.mdx +++ b/docs/docs/guides/SETUP.mdx @@ -22,7 +22,7 @@ npx pod-install VisionCamera requires **iOS 11 or higher**, and **Android-SDK version 21 or higher**. See [Troubleshooting](/docs/guides/troubleshooting) if you're having installation issues. -> **(Optional)** If you want to use [**Frame Processors**](/docs/guides/frame-processors), you need to install [**react-native-reanimated**](https://github.com/software-mansion/react-native-reanimated) 2.1.0 or higher. +> **(Optional)** If you want to use [**Frame Processors**](/docs/guides/frame-processors), you need to install [**react-native-reanimated**](https://github.com/software-mansion/react-native-reanimated) 2.2.0 or higher. ## Updating manifests diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index 66832b0..7ef9e3b 100644 --- a/example/ios/Podfile.lock +++ b/example/ios/Podfile.lock @@ -289,7 +289,7 @@ PODS: - React-RCTText - RNGestureHandler (1.10.3): - React-Core - - RNReanimated (2.1.0): + - RNReanimated (2.2.0): - DoubleConversion - FBLazyVector - FBReactNativeSpec @@ -322,7 +322,7 @@ PODS: - React - RNVectorIcons (8.1.0): - React-Core - - VisionCamera (2.0.0): + - VisionCamera (2.0.1): - React - React-callinvoker - React-Core @@ -487,10 +487,10 @@ SPEC CHECKSUMS: ReactCommon: cfe2b7fd20e0dbd2d1185cd7d8f99633fbc5ff05 ReactNativeNavigation: 63321d37e8172bdcc1fbb93e77cffc74a0ba6d20 RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211 - RNReanimated: b8c8004b43446e3c2709fe64b2b41072f87428ad + RNReanimated: 9c13c86454bfd54dab7505c1a054470bfecd2563 RNStaticSafeAreaInsets: 6103cf09647fa427186d30f67b0f5163c1ae8252 RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4 - VisionCamera: 05d7d5d8df6513e61f6b6ad94d6c6befc73b780d + VisionCamera: 117cb3364d4f23fb786a60a8942031ba34bb039a Yoga: 8c8436d4171c87504c648ae23b1d81242bdf3bbf PODFILE CHECKSUM: 4b093c1d474775c2eac3268011e4b0b80929d3a2 diff --git a/example/package.json b/example/package.json index 042724a..a07530d 100644 --- a/example/package.json +++ b/example/package.json @@ -19,7 +19,7 @@ "react-native-gesture-handler": "^1.10.3", "react-native-navigation": "7.8.4-snapshot.1439", "react-native-pressable-opacity": "^1.0.4", - "react-native-reanimated": "^2.1.0", + "react-native-reanimated": "^2.2.0", "react-native-static-safe-area-insets": "^2.1.1", "react-native-vector-icons": "^8.0.0", "react-native-video": "^5.1.1" diff --git a/example/yarn.lock b/example/yarn.lock index 6f512ad..1c56f44 100644 --- a/example/yarn.lock +++ b/example/yarn.lock @@ -4783,10 +4783,10 @@ react-native-pressable-opacity@^1.0.4: resolved "https://registry.yarnpkg.com/react-native-pressable-opacity/-/react-native-pressable-opacity-1.0.4.tgz#391f33fdc25cb84551f2743a25eced892b9f30f7" integrity sha512-DBIg7UoRiuBYiFEvx+XNMqH0OEx64WrSksXhT6Kq9XuyyKsThMNDqZ9G5QV7vfu7dU2/IctwIz5c0Xwkp4K3tA== -react-native-reanimated@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.1.0.tgz#b9ad04aee490e1e030d0a6cdaa43a14895d9a54d" - integrity sha512-tlPvvcdf+X7HGQ7g/7npBFhwMznfdk7MHUc9gUB/kp2abSscXNe/kOVKlrNEOO4DS11rNOXc+llFxVFMuNk0zA== +react-native-reanimated@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.2.0.tgz#a6412c56b4e591d1f00fac949f62d0c72c357c78" + integrity sha512-lOJDd+5w1gY6DHGXG2jD1dsjzQmXQ2699HUc3IztvI2WP4zUT+UAA+zSG+5JiBS5DUnTL8YhhkmUQmr1KNGO5w== dependencies: "@babel/plugin-transform-object-assign" "^7.10.4" fbjs "^3.0.0" diff --git a/ios/Frame Processor/FrameProcessorRuntimeManager.mm b/ios/Frame Processor/FrameProcessorRuntimeManager.mm index 06bbbb6..3deaa0b 100644 --- a/ios/Frame Processor/FrameProcessorRuntimeManager.mm +++ b/ios/Frame Processor/FrameProcessorRuntimeManager.mm @@ -29,7 +29,7 @@ #define ENABLE_FRAME_PROCESSORS #endif #else - #warning Your react-native-reanimated version is not compatible with VisionCamera, Frame Processors are disabled. Make sure you're using reanimated 2.1.0 or above! + #warning Your react-native-reanimated version is not compatible with VisionCamera, Frame Processors are disabled. Make sure you're using reanimated 2.2.0 or above! #endif #else #warning The NativeReanimatedModule.h header could not be found, Frame Processors are disabled. If you want to use Frame Processors, make sure you install react-native-reanimated! @@ -72,16 +72,16 @@ __attribute__((objc_runtime_name("_TtC12VisionCamera10CameraView"))) std::make_shared(scheduler), scheduler); NSLog(@"FrameProcessorBindings: Runtime Manager created!"); - + NSLog(@"FrameProcessorBindings: Installing Frame Processor plugins..."); auto& visionRuntime = *runtimeManager->runtime; auto visionGlobal = visionRuntime.global(); for (NSString* pluginKey in [FrameProcessorPluginRegistry frameProcessorPlugins]) { auto pluginName = [pluginKey UTF8String]; - + NSLog(@"FrameProcessorBindings: Installing Frame Processor plugin \"%s\"...", pluginName); FrameProcessorPlugin callback = [[FrameProcessorPluginRegistry frameProcessorPlugins] valueForKey:pluginKey]; - + auto function = [callback, callInvoker](jsi::Runtime& runtime, const jsi::Value& thisValue, const jsi::Value* arguments, size_t count) -> jsi::Value { auto frameHostObject = arguments[0].asObject(runtime).asHostObject(runtime); auto frame = static_cast(frameHostObject.get()); @@ -92,7 +92,7 @@ __attribute__((objc_runtime_name("_TtC12VisionCamera10CameraView"))) id result = callback(frame->buffer, args); return convertObjCObjectToJSIValue(runtime, result); }; - + visionGlobal.setProperty(visionRuntime, pluginName, jsi::Function::createFromHostFunction(visionRuntime, jsi::PropNameID::forAscii(visionRuntime, pluginName), 1, // frame @@ -120,24 +120,24 @@ __attribute__((objc_runtime_name("_TtC12VisionCamera10CameraView"))) } jsi::Runtime& jsiRuntime = *(jsi::Runtime*)cxxBridge.runtime; NSLog(@"FrameProcessorBindings: Installing global functions..."); - + // setFrameProcessor(viewTag: number, frameProcessor: (frame: Frame) => void) auto setFrameProcessor = [self](jsi::Runtime& runtime, const jsi::Value& thisValue, const jsi::Value* arguments, size_t count) -> jsi::Value { NSLog(@"FrameProcessorBindings: Setting new frame processor..."); if (!arguments[0].isNumber()) throw jsi::JSError(runtime, "Camera::setFrameProcessor: First argument ('viewTag') must be a number!"); if (!arguments[1].isObject()) throw jsi::JSError(runtime, "Camera::setFrameProcessor: Second argument ('frameProcessor') must be a function!"); if (!runtimeManager || !runtimeManager->runtime) throw jsi::JSError(runtime, "Camera::setFrameProcessor: The RuntimeManager is not yet initialized!"); - + auto viewTag = arguments[0].asNumber(); NSLog(@"FrameProcessorBindings: Adapting Shareable value from function (conversion to worklet)..."); auto worklet = reanimated::ShareableValue::adapt(runtime, arguments[1], runtimeManager.get()); NSLog(@"FrameProcessorBindings: Successfully created worklet!"); - + RCTExecuteOnMainQueue([worklet, viewTag, self]() -> void { auto currentBridge = [RCTBridge currentBridge]; auto anonymousView = [currentBridge.uiManager viewForReactTag:[NSNumber numberWithDouble:viewTag]]; auto view = static_cast(anonymousView); - + dispatch_async(CameraQueues.videoQueue, [worklet, view, self]() -> void { NSLog(@"FrameProcessorBindings: Converting worklet to Objective-C callback..."); auto& rt = *runtimeManager->runtime; @@ -146,20 +146,20 @@ __attribute__((objc_runtime_name("_TtC12VisionCamera10CameraView"))) NSLog(@"FrameProcessorBindings: Frame processor set!"); }); }); - + return jsi::Value::undefined(); }; jsiRuntime.global().setProperty(jsiRuntime, "setFrameProcessor", jsi::Function::createFromHostFunction(jsiRuntime, jsi::PropNameID::forAscii(jsiRuntime, "setFrameProcessor"), 2, // viewTag, frameProcessor setFrameProcessor)); - + // unsetFrameProcessor(viewTag: number) auto unsetFrameProcessor = [](jsi::Runtime& runtime, const jsi::Value& thisValue, const jsi::Value* arguments, size_t count) -> jsi::Value { NSLog(@"FrameProcessorBindings: Removing frame processor..."); if (!arguments[0].isNumber()) throw jsi::JSError(runtime, "Camera::unsetFrameProcessor: First argument ('viewTag') must be a number!"); auto viewTag = arguments[0].asNumber(); - + RCTExecuteOnMainQueue(^{ auto currentBridge = [RCTBridge currentBridge]; if (!currentBridge) return; @@ -169,7 +169,7 @@ __attribute__((objc_runtime_name("_TtC12VisionCamera10CameraView"))) view.frameProcessorCallback = nil; NSLog(@"FrameProcessorBindings: Frame processor removed!"); }); - + return jsi::Value::undefined(); }; jsiRuntime.global().setProperty(jsiRuntime, "unsetFrameProcessor", jsi::Function::createFromHostFunction(jsiRuntime, diff --git a/package.json b/package.json index ddb4b88..1ad7615 100644 --- a/package.json +++ b/package.json @@ -89,14 +89,13 @@ "react": "17.0.2", "react-native": "0.64.0", "react-native-builder-bob": "^0.18.1", - "react-native-reanimated": "^2.1.0", + "react-native-reanimated": "^2.2.0", "release-it": "^14.6.1", "typescript": "^4.2.4" }, "peerDependencies": { "react": "*", - "react-native": "*", - "react-native-reanimated": ">=2.1.0" + "react-native": "*" }, "jest": { "preset": "react-native", diff --git a/src/Camera.tsx b/src/Camera.tsx index 9c1e938..43c79f2 100644 --- a/src/Camera.tsx +++ b/src/Camera.tsx @@ -336,7 +336,7 @@ export class Camera extends React.PureComponent { private assertFrameProcessorsEnabled(): void { // @ts-expect-error JSI functions aren't typed if (global.setFrameProcessor == null || global.unsetFrameProcessor == null) - throw new Error('Frame Processors are not enabled. Make sure you install react-native-reanimated 2.1.0 or above!'); + throw new Error('Frame Processors are not enabled. Make sure you install react-native-reanimated 2.2.0 or above!'); } /** diff --git a/src/hooks/useFrameProcessor.ts b/src/hooks/useFrameProcessor.ts index 6a25886..c73c710 100644 --- a/src/hooks/useFrameProcessor.ts +++ b/src/hooks/useFrameProcessor.ts @@ -1,10 +1,12 @@ import { DependencyList, useCallback } from 'react'; import type { Frame } from 'src/Frame'; +type FrameProcessor = (frame: Frame) => void; + /** * Returns a memoized Frame Processor function wich you can pass to the ``. (See ["Frame Processors"](https://cuvent.github.io/react-native-vision-camera/docs/guides/frame-processors)) * - * > If you are using the [react-hooks ESLint plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks), make sure to add `useFrameProcessor` to `additionalHooks` inside your ESLint config. (See ["advanced configuration"](https://www.npmjs.com/package/eslint-plugin-react-hooks#advanced-configuration)) + * Make sure to add the `'worklet'` directive to the top of the Frame Processor function, otherwise it will not get compiled into a worklet. * * @param frameProcessor The Frame Processor * @param dependencies The React dependencies which will be copied into the VisionCamera JS-Runtime. @@ -18,10 +20,4 @@ import type { Frame } from 'src/Frame'; * }, []) * ``` */ -export function useFrameProcessor(frameProcessor: (frame: Frame) => void, dependencies: DependencyList): (frame: Frame) => void { - return useCallback((frame: Frame) => { - 'worklet'; - return frameProcessor(frame); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, dependencies); -} +export const useFrameProcessor: (frameProcessor: FrameProcessor, dependencies: DependencyList) => FrameProcessor = useCallback; diff --git a/yarn.lock b/yarn.lock index e1e7070..febdd3f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7408,10 +7408,10 @@ react-native-codegen@^0.0.6: jscodeshift "^0.11.0" nullthrows "^1.1.1" -react-native-reanimated@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.1.0.tgz#b9ad04aee490e1e030d0a6cdaa43a14895d9a54d" - integrity sha512-tlPvvcdf+X7HGQ7g/7npBFhwMznfdk7MHUc9gUB/kp2abSscXNe/kOVKlrNEOO4DS11rNOXc+llFxVFMuNk0zA== +react-native-reanimated@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.2.0.tgz#a6412c56b4e591d1f00fac949f62d0c72c357c78" + integrity sha512-lOJDd+5w1gY6DHGXG2jD1dsjzQmXQ2699HUc3IztvI2WP4zUT+UAA+zSG+5JiBS5DUnTL8YhhkmUQmr1KNGO5w== dependencies: "@babel/plugin-transform-object-assign" "^7.10.4" fbjs "^3.0.0"