fix: Fix Skia build (#1582)

* Add Skia search path from `node_modules/`

* fix: Find `react-native-skia` from node_modules

* fix: Upgrade RN Skia to use includes fix

* Update FrameProcessorUtils.mm

VisionCamera.podspec

@@ -2,6 +2,11 @@ require "json"
 
 package = JSON.parse(File.read(File.join(__dir__, "package.json")))
 
+nodeModules = Dir.exist?(File.join(__dir__, "node_modules")) ? File.join(__dir__, "node_modules") : File.join(__dir__, "..")
+skiaPath = File.join(nodeModules, "@shopify", "react-native-skia")
+hasSkia = File.exist?(skiaPath)
+puts "VisionCamera: Skia integration #{hasSkia ? "enabled" : "disabled"}!"
+
 reactVersion = '0.0.0'
 begin
   reactVersion = JSON.parse(File.read(File.join(__dir__, "..", "react-native", "package.json")))["version"]
@@ -29,12 +34,12 @@ Pod::Spec.new do |s|
   s.pod_target_xcconfig = {
     "USE_HEADERMAP" => "YES",
     "GCC_PREPROCESSOR_DEFINITIONS" => '$(inherited) SK_GL=1 SK_METAL=1',
-    "HEADER_SEARCH_PATHS" => "\"$(PODS_TARGET_SRCROOT)/ReactCommon\" \"$(PODS_TARGET_SRCROOT)\" \"$(PODS_ROOT)/RCT-Folly\" \"$(PODS_ROOT)/boost\" \"$(PODS_ROOT)/boost-for-react-native\" \"$(PODS_ROOT)/Headers/Private/React-Core\" "
+    "HEADER_SEARCH_PATHS" => "\"$(PODS_TARGET_SRCROOT)/ReactCommon\" \"$(PODS_TARGET_SRCROOT)\" \"$(PODS_ROOT)/RCT-Folly\" \"$(PODS_ROOT)/boost\" \"$(PODS_ROOT)/boost-for-react-native\" \"$(PODS_ROOT)/Headers/Private/React-Core\" \"#{skiaPath}/cpp/skia/**\" "
   }
   s.compiler_flags = folly_compiler_flags + ' ' + boost_compiler_flags
   s.xcconfig = {
     "CLANG_CXX_LANGUAGE_STANDARD" => "c++17",
-    "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\" \"$(PODS_ROOT)/boost-for-react-native\" \"$(PODS_ROOT)/glog\" \"$(PODS_ROOT)/RCT-Folly\" \"${PODS_ROOT}/Headers/Public/React-hermes\" \"${PODS_ROOT}/Headers/Public/hermes-engine\"",
+    "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\" \"$(PODS_ROOT)/boost-for-react-native\" \"$(PODS_ROOT)/glog\" \"$(PODS_ROOT)/RCT-Folly\" \"${PODS_ROOT}/Headers/Public/React-hermes\" \"${PODS_ROOT}/Headers/Public/hermes-engine\" \"#{skiaPath}/cpp/skia/**\" ",
     "OTHER_CFLAGS" => "$(inherited)" + " " + folly_flags
   }
 

example/ios/Podfile.lock

@@ -276,7 +276,7 @@ PODS:
     - RCTTypeSafety
     - React-Core
     - ReactCommon/turbomodule/core
-  - react-native-skia (0.1.185):
+  - react-native-skia (0.1.186):
     - React
     - React-callinvoker
     - React-Core
@@ -597,7 +597,7 @@ SPEC CHECKSUMS:
   react-native-blur: 50c9feabacbc5f49b61337ebc32192c6be7ec3c3
   react-native-cameraroll: 5b25d0be40185d02e522bf2abf8a1ba4e8faa107
   react-native-safe-area-context: 39c2d8be3328df5d437ac1700f4f3a4f75716acc
-  react-native-skia: 8d65fa55196f437b475563b67b06a744f2ad4a0d
+  react-native-skia: 93857be5661fc3d81abcd3e7cb357a6662275778
   react-native-slider: 33b8d190b59d4f67a541061bb91775d53d617d9d
   react-native-video: c26780b224543c62d5e1b2a7244a5cd1b50e8253
   react-native-worklets: c7576ad4ad0f030ff41e8d74ad0077c96054a6c1
@@ -619,9 +619,9 @@ SPEC CHECKSUMS:
   RNScreens: 218801c16a2782546d30bd2026bb625c0302d70f
   RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8
   RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8
-  VisionCamera: a95841d7567ffb852e2765d3c00b7af72852e4ae
+  VisionCamera: 75445eda0090454f5a80786a001e4fb7793fbfe1
   Yoga: d56980c8914db0b51692f55533409e844b66133c
 
-PODFILE CHECKSUM: 36353989c3aed582cdc63facf0b9634408970898
+PODFILE CHECKSUM: bd58477b713db59422e816e017e3fbbdd8b7cf60
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.12.1

example/package.json

@@ -19,7 +19,7 @@
     "@react-native-community/slider": "^4.4.2",
     "@react-navigation/native": "^6.1.3",
     "@react-navigation/native-stack": "^6.9.9",
-    "@shopify/react-native-skia": "^0.1.185",
+    "@shopify/react-native-skia": "^0.1.186",
     "react": "^18.2.0",
     "react-native": "^0.71.7",
     "react-native-gesture-handler": "^2.9.0",

example/yarn.lock

@@ -1184,10 +1184,10 @@
   dependencies:
     nanoid "^3.1.23"
 
-"@shopify/react-native-skia@^0.1.185":
+"@shopify/react-native-skia@^0.1.186":
-  version "0.1.185"
+  version "0.1.186"
-  resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-0.1.185.tgz#ded3478bf4a7d380f3c64bf6b3f8ebbf4e8ecd21"
+  resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-0.1.186.tgz#5893e2f5b656b4117c99edd2fbe3b15b76be0098"
-  integrity sha512-RD/huxWgRRjZCHaJcpDiOHQ17tUWO2d/XDv59irpwEfWJRi4UNpxOhPvKso9uwt+MlXJnExJbItNt8e7/m/5GQ==
+  integrity sha512-YPXoujEt6HhtsjzG6mlWCx+KtkKY6HGaychW6qN/TQ0VB2v6K78QR+WNvR+X8mdcd/p9CdGR0nnrtfzoNyV+Yw==
   dependencies:
     "@types/pixelmatch" "^5.2.4"
     "@types/pngjs" "^6.0.1"

ios/Frame Processor/FrameProcessorUtils.mm

@@ -30,7 +30,12 @@ FrameProcessorCallback convertWorkletToFrameProcessorCallback(jsi::Runtime& runt
   auto workletInvoker = std::make_shared<RNWorklet::WorkletInvoker>(worklet);
   // Create cached Skia Canvas object
   auto callInvoker = RCTBridge.currentBridge.jsCallInvoker;
-  auto skiaPlatformContext = std::make_shared<RNSkia::RNSkiOSPlatformContext>(&runtime, callInvoker);
+  auto skiaPlatformContext = std::make_shared<RNSkia::RNSkiOSPlatformContext>(&runtime, callInvoker, [](std::function<void()>) {
+    // TODO: dispatch on main thread is stubbed for now :/
+  }, [](size_t viewTag) {
+    // TODO: screenshot is stubbed for now :/
+    return sk_sp<SkImage>(nullptr);
+  });
   auto canvasHostObject = std::make_shared<RNSkia::JsiSkCanvas>(skiaPlatformContext);
 
   // Converts a Worklet to a callable Objective-C block function

package.json

@@ -76,7 +76,7 @@
     "@react-native-community/eslint-config": "^3.2.0",
     "@react-native-community/eslint-plugin": "^1.3.0",
     "@release-it/conventional-changelog": "^5.1.1",
-    "@shopify/react-native-skia": "^0.1.185",
+    "@shopify/react-native-skia": "^0.1.186",
     "@types/react": "^18.0.27",
     "@types/react-native": "^0.71.6",
     "eslint": "^8.33.0",

yarn.lock

@@ -1690,10 +1690,10 @@
     conventional-recommended-bump "^6.1.0"
     semver "7.3.8"
 
-"@shopify/react-native-skia@^0.1.185":
+"@shopify/react-native-skia@^0.1.186":
-  version "0.1.185"
+  version "0.1.186"
-  resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-0.1.185.tgz#ded3478bf4a7d380f3c64bf6b3f8ebbf4e8ecd21"
+  resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-0.1.186.tgz#5893e2f5b656b4117c99edd2fbe3b15b76be0098"
-  integrity sha512-RD/huxWgRRjZCHaJcpDiOHQ17tUWO2d/XDv59irpwEfWJRi4UNpxOhPvKso9uwt+MlXJnExJbItNt8e7/m/5GQ==
+  integrity sha512-YPXoujEt6HhtsjzG6mlWCx+KtkKY6HGaychW6qN/TQ0VB2v6K78QR+WNvR+X8mdcd/p9CdGR0nnrtfzoNyV+Yw==
   dependencies:
     "@types/pixelmatch" "^5.2.4"
     "@types/pngjs" "^6.0.1"