@shopify/react-native-skia 0.1.175 → 0.1.176

package/android/build.gradle

@@ -266,8 +266,9 @@ task extractJNIFiles {
 extractJNIFiles.mustRunAfter extractAARHeaders
 
 if (ENABLE_PREFAB) {
+    // Package everything with the original file structure
     task prepareHeaders(type: Copy) {
-        from fileTree('../cpp').filter { it.isFile() }
+        from('./cpp')
         into "${project.buildDir}/headers/rnskia/"
         includeEmptyDirs = false
     }

package/cpp/rnskia/RNSkJsView.cpp

@@ -8,7 +8,7 @@ RNSkJsRenderer::RNSkJsRenderer(std::function<void()> requestRedraw,
                                std::shared_ptr<RNSkPlatformContext> context)
     : RNSkRenderer(requestRedraw),
       _jsiCanvas(std::make_shared<JsiSkCanvas>(context)),
-      _platformContext(std::move(context)),
+      _platformContext(context),
       _infoObject(std::make_shared<RNSkInfoObject>()),
       _jsDrawingLock(std::make_shared<std::timed_mutex>()),
       _gpuDrawingLock(std::make_shared<std::timed_mutex>()),

package/ios/RNSkia-iOS/RNSkMetalCanvasProvider.mm

@@ -73,14 +73,18 @@ void RNSkMetalCanvasProvider::renderToCanvas(
   // background or inactive. This will cause an error that might clear the
   // CAMetalLayer so that the canvas is empty when the app receives focus again.
   // Reference: https://github.com/Shopify/react-native-skia/issues/1257
-  auto state = UIApplication.sharedApplication.applicationState;
-  if (state == UIApplicationStateBackground ||
-      state == UIApplicationStateInactive) {
-    // Request a redraw in the next run loop callback
-    _requestRedraw();
-    // and don't draw now since it might cause errors in the metal renderer if
-    // we try to render while in the background. (see above issue)
-    return;
+  // NOTE: UIApplication.sharedApplication.applicationState can only be
+  // accessed from the main thread so we need to check here.
+  if ([[NSThread currentThread] isMainThread]) {
+    auto state = UIApplication.sharedApplication.applicationState;
+    if (state == UIApplicationStateBackground ||
+        state == UIApplicationStateInactive) {
+      // Request a redraw in the next run loop callback
+      _requestRedraw();
+      // and don't draw now since it might cause errors in the metal renderer if
+      // we try to render while in the background. (see above issue)
+      return;
+    }
   }
 
   // Get render context for current thread

package/lib/commonjs/skia/web/JsiSkSurfaceFactory.js

@@ -34,7 +34,14 @@ class JsiSkSurfaceFactory extends _Host.Host {
       surface = this.CanvasKit.MakeSurface(width, height);
     } else {
       const offscreen = new OC(width, height);
-      surface = this.CanvasKit.MakeWebGLCanvasSurface(offscreen);
+      const webglContext = this.CanvasKit.GetWebGLContext(offscreen);
+      const grContext = this.CanvasKit.MakeWebGLContext(webglContext);
+
+      if (!grContext) {
+        throw new Error("Could not make a graphics context");
+      }
+
+      surface = this.CanvasKit.MakeRenderTarget(grContext, width, height);
     }
 
     if (!surface) {

package/lib/commonjs/skia/web/JsiSkSurfaceFactory.js.map

@@ -1 +1 @@
-{"version":3,"names":["JsiSkSurfaceFactory","Host","constructor","CanvasKit","Make","width","height","surface","MakeSurface","JsiSkSurface","MakeOffscreen","OC","globalThis","OffscreenCanvas","undefined","offscreen","MakeWebGLCanvasSurface"],"sources":["JsiSkSurfaceFactory.ts"],"sourcesContent":["import type { CanvasKit, Surface } from \"canvaskit-wasm\";\n\nimport type { SurfaceFactory } from \"../types\";\n\nimport { Host } from \"./Host\";\nimport { JsiSkSurface } from \"./JsiSkSurface\";\n\nexport class JsiSkSurfaceFactory extends Host implements SurfaceFactory {\n  constructor(CanvasKit: CanvasKit) {\n    super(CanvasKit);\n  }\n\n  Make(width: number, height: number) {\n    const surface = this.CanvasKit.MakeSurface(width, height);\n    if (!surface) {\n      return null;\n    }\n    return new JsiSkSurface(this.CanvasKit, surface);\n  }\n\n  MakeOffscreen(width: number, height: number) {\n    // OffscreenCanvas may be unvailable in some environments.\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const OC = (globalThis as any).OffscreenCanvas;\n    let surface: Surface | null;\n    if (OC === undefined) {\n      surface = this.CanvasKit.MakeSurface(width, height);\n    } else {\n      const offscreen = new OC(width, height);\n      surface = this.CanvasKit.MakeWebGLCanvasSurface(\n        offscreen as unknown as HTMLCanvasElement\n      );\n    }\n    if (!surface) {\n      return null;\n    }\n    return new JsiSkSurface(this.CanvasKit, surface);\n  }\n}\n"],"mappings":";;;;;;;AAIA;;AACA;;AAEO,MAAMA,mBAAN,SAAkCC,UAAlC,CAAiE;EACtEC,WAAW,CAACC,SAAD,EAAuB;IAChC,MAAMA,SAAN;EACD;;EAEDC,IAAI,CAACC,KAAD,EAAgBC,MAAhB,EAAgC;IAClC,MAAMC,OAAO,GAAG,KAAKJ,SAAL,CAAeK,WAAf,CAA2BH,KAA3B,EAAkCC,MAAlC,CAAhB;;IACA,IAAI,CAACC,OAAL,EAAc;MACZ,OAAO,IAAP;IACD;;IACD,OAAO,IAAIE,0BAAJ,CAAiB,KAAKN,SAAtB,EAAiCI,OAAjC,CAAP;EACD;;EAEDG,aAAa,CAACL,KAAD,EAAgBC,MAAhB,EAAgC;IAC3C;IACA;IACA,MAAMK,EAAE,GAAIC,UAAD,CAAoBC,eAA/B;IACA,IAAIN,OAAJ;;IACA,IAAII,EAAE,KAAKG,SAAX,EAAsB;MACpBP,OAAO,GAAG,KAAKJ,SAAL,CAAeK,WAAf,CAA2BH,KAA3B,EAAkCC,MAAlC,CAAV;IACD,CAFD,MAEO;MACL,MAAMS,SAAS,GAAG,IAAIJ,EAAJ,CAAON,KAAP,EAAcC,MAAd,CAAlB;MACAC,OAAO,GAAG,KAAKJ,SAAL,CAAea,sBAAf,CACRD,SADQ,CAAV;IAGD;;IACD,IAAI,CAACR,OAAL,EAAc;MACZ,OAAO,IAAP;IACD;;IACD,OAAO,IAAIE,0BAAJ,CAAiB,KAAKN,SAAtB,EAAiCI,OAAjC,CAAP;EACD;;AA9BqE"}
+{"version":3,"names":["JsiSkSurfaceFactory","Host","constructor","CanvasKit","Make","width","height","surface","MakeSurface","JsiSkSurface","MakeOffscreen","OC","globalThis","OffscreenCanvas","undefined","offscreen","webglContext","GetWebGLContext","grContext","MakeWebGLContext","Error","MakeRenderTarget"],"sources":["JsiSkSurfaceFactory.ts"],"sourcesContent":["import type { CanvasKit, Surface } from \"canvaskit-wasm\";\n\nimport type { SurfaceFactory } from \"../types\";\n\nimport { Host } from \"./Host\";\nimport { JsiSkSurface } from \"./JsiSkSurface\";\n\nexport class JsiSkSurfaceFactory extends Host implements SurfaceFactory {\n  constructor(CanvasKit: CanvasKit) {\n    super(CanvasKit);\n  }\n\n  Make(width: number, height: number) {\n    const surface = this.CanvasKit.MakeSurface(width, height);\n    if (!surface) {\n      return null;\n    }\n    return new JsiSkSurface(this.CanvasKit, surface);\n  }\n\n  MakeOffscreen(width: number, height: number) {\n    // OffscreenCanvas may be unvailable in some environments.\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const OC = (globalThis as any).OffscreenCanvas;\n    let surface: Surface | null;\n    if (OC === undefined) {\n      surface = this.CanvasKit.MakeSurface(width, height);\n    } else {\n      const offscreen = new OC(width, height);\n      const webglContext = this.CanvasKit.GetWebGLContext(offscreen);\n      const grContext = this.CanvasKit.MakeWebGLContext(webglContext);\n      if (!grContext) {\n        throw new Error(\"Could not make a graphics context\");\n      }\n      surface = this.CanvasKit.MakeRenderTarget(grContext, width, height);\n    }\n    if (!surface) {\n      return null;\n    }\n    return new JsiSkSurface(this.CanvasKit, surface);\n  }\n}\n"],"mappings":";;;;;;;AAIA;;AACA;;AAEO,MAAMA,mBAAN,SAAkCC,UAAlC,CAAiE;EACtEC,WAAW,CAACC,SAAD,EAAuB;IAChC,MAAMA,SAAN;EACD;;EAEDC,IAAI,CAACC,KAAD,EAAgBC,MAAhB,EAAgC;IAClC,MAAMC,OAAO,GAAG,KAAKJ,SAAL,CAAeK,WAAf,CAA2BH,KAA3B,EAAkCC,MAAlC,CAAhB;;IACA,IAAI,CAACC,OAAL,EAAc;MACZ,OAAO,IAAP;IACD;;IACD,OAAO,IAAIE,0BAAJ,CAAiB,KAAKN,SAAtB,EAAiCI,OAAjC,CAAP;EACD;;EAEDG,aAAa,CAACL,KAAD,EAAgBC,MAAhB,EAAgC;IAC3C;IACA;IACA,MAAMK,EAAE,GAAIC,UAAD,CAAoBC,eAA/B;IACA,IAAIN,OAAJ;;IACA,IAAII,EAAE,KAAKG,SAAX,EAAsB;MACpBP,OAAO,GAAG,KAAKJ,SAAL,CAAeK,WAAf,CAA2BH,KAA3B,EAAkCC,MAAlC,CAAV;IACD,CAFD,MAEO;MACL,MAAMS,SAAS,GAAG,IAAIJ,EAAJ,CAAON,KAAP,EAAcC,MAAd,CAAlB;MACA,MAAMU,YAAY,GAAG,KAAKb,SAAL,CAAec,eAAf,CAA+BF,SAA/B,CAArB;MACA,MAAMG,SAAS,GAAG,KAAKf,SAAL,CAAegB,gBAAf,CAAgCH,YAAhC,CAAlB;;MACA,IAAI,CAACE,SAAL,EAAgB;QACd,MAAM,IAAIE,KAAJ,CAAU,mCAAV,CAAN;MACD;;MACDb,OAAO,GAAG,KAAKJ,SAAL,CAAekB,gBAAf,CAAgCH,SAAhC,EAA2Cb,KAA3C,EAAkDC,MAAlD,CAAV;IACD;;IACD,IAAI,CAACC,OAAL,EAAc;MACZ,OAAO,IAAP;IACD;;IACD,OAAO,IAAIE,0BAAJ,CAAiB,KAAKN,SAAtB,EAAiCI,OAAjC,CAAP;EACD;;AAjCqE"}

package/lib/module/skia/web/JsiSkSurfaceFactory.js

@@ -25,7 +25,14 @@ export class JsiSkSurfaceFactory extends Host {
       surface = this.CanvasKit.MakeSurface(width, height);
     } else {
       const offscreen = new OC(width, height);
-      surface = this.CanvasKit.MakeWebGLCanvasSurface(offscreen);
+      const webglContext = this.CanvasKit.GetWebGLContext(offscreen);
+      const grContext = this.CanvasKit.MakeWebGLContext(webglContext);
+
+      if (!grContext) {
+        throw new Error("Could not make a graphics context");
+      }
+
+      surface = this.CanvasKit.MakeRenderTarget(grContext, width, height);
     }
 
     if (!surface) {

package/lib/module/skia/web/JsiSkSurfaceFactory.js.map

@@ -1 +1 @@
-{"version":3,"names":["Host","JsiSkSurface","JsiSkSurfaceFactory","constructor","CanvasKit","Make","width","height","surface","MakeSurface","MakeOffscreen","OC","globalThis","OffscreenCanvas","undefined","offscreen","MakeWebGLCanvasSurface"],"sources":["JsiSkSurfaceFactory.ts"],"sourcesContent":["import type { CanvasKit, Surface } from \"canvaskit-wasm\";\n\nimport type { SurfaceFactory } from \"../types\";\n\nimport { Host } from \"./Host\";\nimport { JsiSkSurface } from \"./JsiSkSurface\";\n\nexport class JsiSkSurfaceFactory extends Host implements SurfaceFactory {\n  constructor(CanvasKit: CanvasKit) {\n    super(CanvasKit);\n  }\n\n  Make(width: number, height: number) {\n    const surface = this.CanvasKit.MakeSurface(width, height);\n    if (!surface) {\n      return null;\n    }\n    return new JsiSkSurface(this.CanvasKit, surface);\n  }\n\n  MakeOffscreen(width: number, height: number) {\n    // OffscreenCanvas may be unvailable in some environments.\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const OC = (globalThis as any).OffscreenCanvas;\n    let surface: Surface | null;\n    if (OC === undefined) {\n      surface = this.CanvasKit.MakeSurface(width, height);\n    } else {\n      const offscreen = new OC(width, height);\n      surface = this.CanvasKit.MakeWebGLCanvasSurface(\n        offscreen as unknown as HTMLCanvasElement\n      );\n    }\n    if (!surface) {\n      return null;\n    }\n    return new JsiSkSurface(this.CanvasKit, surface);\n  }\n}\n"],"mappings":"AAIA,SAASA,IAAT,QAAqB,QAArB;AACA,SAASC,YAAT,QAA6B,gBAA7B;AAEA,OAAO,MAAMC,mBAAN,SAAkCF,IAAlC,CAAiE;EACtEG,WAAW,CAACC,SAAD,EAAuB;IAChC,MAAMA,SAAN;EACD;;EAEDC,IAAI,CAACC,KAAD,EAAgBC,MAAhB,EAAgC;IAClC,MAAMC,OAAO,GAAG,KAAKJ,SAAL,CAAeK,WAAf,CAA2BH,KAA3B,EAAkCC,MAAlC,CAAhB;;IACA,IAAI,CAACC,OAAL,EAAc;MACZ,OAAO,IAAP;IACD;;IACD,OAAO,IAAIP,YAAJ,CAAiB,KAAKG,SAAtB,EAAiCI,OAAjC,CAAP;EACD;;EAEDE,aAAa,CAACJ,KAAD,EAAgBC,MAAhB,EAAgC;IAC3C;IACA;IACA,MAAMI,EAAE,GAAIC,UAAD,CAAoBC,eAA/B;IACA,IAAIL,OAAJ;;IACA,IAAIG,EAAE,KAAKG,SAAX,EAAsB;MACpBN,OAAO,GAAG,KAAKJ,SAAL,CAAeK,WAAf,CAA2BH,KAA3B,EAAkCC,MAAlC,CAAV;IACD,CAFD,MAEO;MACL,MAAMQ,SAAS,GAAG,IAAIJ,EAAJ,CAAOL,KAAP,EAAcC,MAAd,CAAlB;MACAC,OAAO,GAAG,KAAKJ,SAAL,CAAeY,sBAAf,CACRD,SADQ,CAAV;IAGD;;IACD,IAAI,CAACP,OAAL,EAAc;MACZ,OAAO,IAAP;IACD;;IACD,OAAO,IAAIP,YAAJ,CAAiB,KAAKG,SAAtB,EAAiCI,OAAjC,CAAP;EACD;;AA9BqE"}
+{"version":3,"names":["Host","JsiSkSurface","JsiSkSurfaceFactory","constructor","CanvasKit","Make","width","height","surface","MakeSurface","MakeOffscreen","OC","globalThis","OffscreenCanvas","undefined","offscreen","webglContext","GetWebGLContext","grContext","MakeWebGLContext","Error","MakeRenderTarget"],"sources":["JsiSkSurfaceFactory.ts"],"sourcesContent":["import type { CanvasKit, Surface } from \"canvaskit-wasm\";\n\nimport type { SurfaceFactory } from \"../types\";\n\nimport { Host } from \"./Host\";\nimport { JsiSkSurface } from \"./JsiSkSurface\";\n\nexport class JsiSkSurfaceFactory extends Host implements SurfaceFactory {\n  constructor(CanvasKit: CanvasKit) {\n    super(CanvasKit);\n  }\n\n  Make(width: number, height: number) {\n    const surface = this.CanvasKit.MakeSurface(width, height);\n    if (!surface) {\n      return null;\n    }\n    return new JsiSkSurface(this.CanvasKit, surface);\n  }\n\n  MakeOffscreen(width: number, height: number) {\n    // OffscreenCanvas may be unvailable in some environments.\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const OC = (globalThis as any).OffscreenCanvas;\n    let surface: Surface | null;\n    if (OC === undefined) {\n      surface = this.CanvasKit.MakeSurface(width, height);\n    } else {\n      const offscreen = new OC(width, height);\n      const webglContext = this.CanvasKit.GetWebGLContext(offscreen);\n      const grContext = this.CanvasKit.MakeWebGLContext(webglContext);\n      if (!grContext) {\n        throw new Error(\"Could not make a graphics context\");\n      }\n      surface = this.CanvasKit.MakeRenderTarget(grContext, width, height);\n    }\n    if (!surface) {\n      return null;\n    }\n    return new JsiSkSurface(this.CanvasKit, surface);\n  }\n}\n"],"mappings":"AAIA,SAASA,IAAT,QAAqB,QAArB;AACA,SAASC,YAAT,QAA6B,gBAA7B;AAEA,OAAO,MAAMC,mBAAN,SAAkCF,IAAlC,CAAiE;EACtEG,WAAW,CAACC,SAAD,EAAuB;IAChC,MAAMA,SAAN;EACD;;EAEDC,IAAI,CAACC,KAAD,EAAgBC,MAAhB,EAAgC;IAClC,MAAMC,OAAO,GAAG,KAAKJ,SAAL,CAAeK,WAAf,CAA2BH,KAA3B,EAAkCC,MAAlC,CAAhB;;IACA,IAAI,CAACC,OAAL,EAAc;MACZ,OAAO,IAAP;IACD;;IACD,OAAO,IAAIP,YAAJ,CAAiB,KAAKG,SAAtB,EAAiCI,OAAjC,CAAP;EACD;;EAEDE,aAAa,CAACJ,KAAD,EAAgBC,MAAhB,EAAgC;IAC3C;IACA;IACA,MAAMI,EAAE,GAAIC,UAAD,CAAoBC,eAA/B;IACA,IAAIL,OAAJ;;IACA,IAAIG,EAAE,KAAKG,SAAX,EAAsB;MACpBN,OAAO,GAAG,KAAKJ,SAAL,CAAeK,WAAf,CAA2BH,KAA3B,EAAkCC,MAAlC,CAAV;IACD,CAFD,MAEO;MACL,MAAMQ,SAAS,GAAG,IAAIJ,EAAJ,CAAOL,KAAP,EAAcC,MAAd,CAAlB;MACA,MAAMS,YAAY,GAAG,KAAKZ,SAAL,CAAea,eAAf,CAA+BF,SAA/B,CAArB;MACA,MAAMG,SAAS,GAAG,KAAKd,SAAL,CAAee,gBAAf,CAAgCH,YAAhC,CAAlB;;MACA,IAAI,CAACE,SAAL,EAAgB;QACd,MAAM,IAAIE,KAAJ,CAAU,mCAAV,CAAN;MACD;;MACDZ,OAAO,GAAG,KAAKJ,SAAL,CAAeiB,gBAAf,CAAgCH,SAAhC,EAA2CZ,KAA3C,EAAkDC,MAAlD,CAAV;IACD;;IACD,IAAI,CAACC,OAAL,EAAc;MACZ,OAAO,IAAP;IACD;;IACD,OAAO,IAAIP,YAAJ,CAAiB,KAAKG,SAAtB,EAAiCI,OAAjC,CAAP;EACD;;AAjCqE"}

package/libs/ios/libskia.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libskia.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libskia.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/libs/ios/libskottie.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libskottie.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libskottie.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/libs/ios/libsksg.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libsksg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libsksg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.175",
+  "version": "0.1.176",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [

package/react-native-skia.podspec

@@ -24,7 +24,12 @@ Pod::Spec.new do |s|
   s.pod_target_xcconfig = {
     'GCC_PREPROCESSOR_DEFINITIONS' => '$(inherited) SK_GL=1 SK_METAL=1',
     'CLANG_CXX_LANGUAGE_STANDARD' => 'c++17',
-    'DEFINES_MODULE' => 'YES'
+    'DEFINES_MODULE' => 'YES',
+    "HEADER_SEARCH_PATHS" => '"$(PODS_ROOT)/../../node_modules/@shopify/react-native-skia/cpp/" ' + 
+                             '"$(PODS_ROOT)/../../node_modules/@shopify/react-native-skia/cpp/api/" ' + 
+                             '"$(PODS_ROOT)/../../node_modules/@shopify/react-native-skia/cpp/rnskia/" ' + 
+                             '"$(PODS_ROOT)/../../node_modules/@shopify/react-native-skia/cpp/rnskia/dom/" ' + 
+                             '"$(PODS_ROOT)/../../node_modules/@shopify/react-native-skia/cpp/skia/"'
   }
 
   s.frameworks = 'GLKit', 'MetalKit'
@@ -40,33 +45,9 @@ Pod::Spec.new do |s|
   # All iOS cpp/h files
   s.source_files = [
     "ios/**/*.{h,c,cc,cpp,m,mm,swift}",  
+    "cpp/**/*.{h,cpp}"    
   ]
 
-  s.subspec 'SkiaHeaders' do |ss|
-    ss.header_mappings_dir = 'cpp/skia'
-    ss.source_files = "cpp/skia/**/*.{h,cpp}"
-  end
-
-  s.subspec 'Utils' do |ss|
-    ss.header_mappings_dir = 'cpp/utils'
-    ss.source_files = "cpp/utils/**/*.{h,cpp}"
-  end
-
-  s.subspec 'Jsi' do |ss|
-    ss.header_mappings_dir = 'cpp/jsi'
-    ss.source_files = "cpp/jsi/**/*.{h,cpp}"
-  end
-
-  s.subspec 'Api' do |ss|
-    ss.header_mappings_dir = 'cpp/api'
-    ss.source_files = "cpp/api/**/*.{h,cpp}"
-  end
-
-  s.subspec 'RNSkia' do |ss|
-    ss.header_mappings_dir = 'cpp/rnskia'
-    ss.source_files = "cpp/rnskia/**/*.{h,cpp}"
-  end
-
   s.dependency "React"
   s.dependency "React-callinvoker"
   s.dependency "React-Core"

package/src/skia/web/JsiSkSurfaceFactory.ts

@@ -27,9 +27,12 @@ export class JsiSkSurfaceFactory extends Host implements SurfaceFactory {
       surface = this.CanvasKit.MakeSurface(width, height);
     } else {
       const offscreen = new OC(width, height);
-      surface = this.CanvasKit.MakeWebGLCanvasSurface(
-        offscreen as unknown as HTMLCanvasElement
-      );
+      const webglContext = this.CanvasKit.GetWebGLContext(offscreen);
+      const grContext = this.CanvasKit.MakeWebGLContext(webglContext);
+      if (!grContext) {
+        throw new Error("Could not make a graphics context");
+      }
+      surface = this.CanvasKit.MakeRenderTarget(grContext, width, height);
     }
     if (!surface) {
       return null;