@shopify/react-native-skia 2.4.15 → 2.4.17

package/android/CMakeLists.txt

@@ -7,6 +7,36 @@ set (CMAKE_CXX_STANDARD 20)
 # Import prebuilt SKIA libraries path
 set (SKIA_LIBS_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../libs/android/${ANDROID_ABI}")
 
+# Check if Skia prebuilt binaries are installed
+# The postinstall script downloads these - if missing, the user needs to run it
+if(NOT EXISTS "${SKIA_LIBS_PATH}/libskia.a")
+    message("")
+    message("┌─────────────────────────────────────────────────────────────────────────────┐")
+    message("│                                                                             │")
+    message("│  ERROR: Skia prebuilt binaries not found!                                   │")
+    message("│                                                                             │")
+    message("│  The postinstall script has not run. This is required to download the      │")
+    message("│  Skia binaries. Some package managers (pnpm, bun, yarn berry) require       │")
+    message("│  explicit trust for packages with postinstall scripts.                      │")
+    message("│                                                                             │")
+    message("│  To fix this:                                                               │")
+    message("│                                                                             │")
+    message("│  • npm/yarn classic: Run 'npm rebuild @shopify/react-native-skia' or        │")
+    message("│                       reinstall the package                                 │")
+    message("│                                                                             │")
+    message("│  • bun: Run 'bun add --trust @shopify/react-native-skia'                    │")
+    message("│                                                                             │")
+    message("│  • pnpm: Add to package.json:                                               │")
+    message("│          \"pnpm\": { \"onlyBuiltDependencies\": [\"@shopify/react-native-skia\"] }│")
+    message("│          Then reinstall the package                                         │")
+    message("│                                                                             │")
+    message("│  See: https://shopify.github.io/react-native-skia/docs/getting-started/installation │")
+    message("│                                                                             │")
+    message("└─────────────────────────────────────────────────────────────────────────────┘")
+    message("")
+    message(FATAL_ERROR "Skia prebuilt binaries not found at ${SKIA_LIBS_PATH}. Please run the postinstall script.")
+endif()
+
 # Import libskia first so we can check for symbols
 add_library(skia STATIC IMPORTED)
 set_property(TARGET skia PROPERTY IMPORTED_LOCATION "${SKIA_LIBS_PATH}/libskia.a")
@@ -122,6 +152,37 @@ add_library(
         ${BACKEND_SOURCES}
 )
 
+if(SK_GRAPHITE)
+    # WebGPU JSI infrastructure (jsi2)
+    target_sources(${PACKAGE_NAME} PRIVATE
+        "${PROJECT_SOURCE_DIR}/../cpp/jsi2/Promise.cpp"
+
+        # WebGPU async system
+        "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/async/AsyncRunner.cpp"
+        "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/async/AsyncTaskHandle.cpp"
+        "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/async/JSIMicrotaskDispatcher.cpp"
+
+        # WebGPU API
+        "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPU.cpp"
+        "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUAdapter.cpp"
+        "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUBindGroup.cpp"
+        "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUBuffer.cpp"
+        "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUCommandEncoder.cpp"
+        "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUComputePassEncoder.cpp"
+        "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUComputePipeline.cpp"
+        "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUDevice.cpp"
+        "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUDeviceLostInfo.cpp"
+        "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUQuerySet.cpp"
+        "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUQueue.cpp"
+        "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPURenderBundleEncoder.cpp"
+        "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPURenderPassEncoder.cpp"
+        "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPURenderPipeline.cpp"
+        "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUShaderModule.cpp"
+        "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUSupportedLimits.cpp"
+        "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUTexture.cpp"
+    )
+endif()
+
 
 target_include_directories(
         ${PACKAGE_NAME}
@@ -150,6 +211,14 @@ target_include_directories(
         ../cpp/rnskia/values
         ../cpp/utils
 
+        # WebGPU bindings
+        ../cpp
+        ../cpp/jsi2
+        ../cpp/rnwgpu
+        ../cpp/rnwgpu/api
+        ../cpp/rnwgpu/api/descriptors
+        ../cpp/rnwgpu/async
+
         ${libfbjni_include_DIRS}
 )
 

package/android/src/main/java/com/shopify/reactnative/skia/SkiaBaseView.java

@@ -3,9 +3,11 @@ package com.shopify.reactnative.skia;
 import android.content.Context;
 import android.graphics.SurfaceTexture;
 import android.util.Log;
+import android.view.MotionEvent;
 import android.view.Surface;
 import android.view.View;
 
+import com.facebook.react.uimanager.PointerEvents;
 import com.facebook.react.views.view.ReactViewGroup;
 
 public abstract class SkiaBaseView extends ReactViewGroup implements SkiaViewAPI {
@@ -16,20 +18,30 @@ public abstract class SkiaBaseView extends ReactViewGroup implements SkiaViewAPI
 
     public SkiaBaseView(Context context) {
         super(context);
-        mView = new SkiaTextureView(context, this, debug);
+        mView = new SkiaSurfaceView(context, this, debug);
         addView(mView);
     }
 
+    @Override
+    public boolean dispatchTouchEvent(MotionEvent ev) {
+        // When pointerEvents is "none" or "box-none", make this view completely
+        // transparent to touch dispatch so events pass through to views behind it
+        if (!PointerEvents.canBeTouchTarget(getPointerEvents())) {
+            return false;
+        }
+        return super.dispatchTouchEvent(ev);
+    }
+
     public void setOpaque(boolean value) {
-        if (value && mView instanceof SkiaTextureView) {
+      //  if (value && mView instanceof SkiaTextureView) {
             removeView(mView);
             mView = new SkiaSurfaceView(getContext(), this, debug);
             addView(mView);
-        } else if (!value && mView instanceof SkiaSurfaceView) {
-            removeView(mView);
-            mView = new SkiaTextureView(getContext(), this, debug);
-            addView(mView);
-        }
+//        } else if (!value && mView instanceof SkiaSurfaceView) {
+//            removeView(mView);
+//            mView = new SkiaTextureView(getContext(), this, debug);
+//            addView(mView);
+//        }
     }
 
     void dropInstance() {

package/android/src/main/java/com/shopify/reactnative/skia/SkiaBaseViewManager.java

@@ -1,5 +1,7 @@
 package com.shopify.reactnative.skia;
 
+import com.facebook.react.uimanager.PointerEvents;
+import com.facebook.react.uimanager.ViewProps;
 import com.facebook.react.uimanager.annotations.ReactProp;
 import com.facebook.react.views.view.ReactViewGroup;
 import com.facebook.react.views.view.ReactViewManager;
@@ -26,6 +28,11 @@ public abstract class SkiaBaseViewManager<T extends SkiaBaseView> extends ReactV
         ((SkiaBaseView)view).setOpaque(value);
     }
 
+    @ReactProp(name = ViewProps.POINTER_EVENTS)
+    public void setPointerEvents(T view, @Nullable String pointerEventsStr) {
+        view.setPointerEvents(PointerEvents.parsePointerEvents(pointerEventsStr));
+    }
+
     @Override
     public void onDropViewInstance(@NonNull ReactViewGroup view) {
         super.onDropViewInstance(view);

package/apple/RNSkApplePlatformContext.mm

@@ -50,7 +50,11 @@ void RNSkApplePlatformContext::performStreamOperation(
       // load from the embedded iOS app bundle and will try to load image
       // and get data from the image directly. imageNamed will return the
       // best version of the requested image:
+#if !TARGET_OS_OSX
       auto image = [UIImage imageNamed:[url absoluteString]];
+#else
+      auto image = [NSImage imageNamed:[url absoluteString]];
+#endif // !TARGET_OS_OSX
       // We don't know the image format (png, jpg, etc) but
       // UIImagePNGRepresentation will support all of them
       data = UIImagePNGRepresentation(image);

package/cpp/api/JsiSkApi.h

@@ -6,6 +6,12 @@
 
 #include "JsiSkHostObjects.h"
 
+#ifdef SK_GRAPHITE
+#include "RNDawnContext.h"
+#include "rnwgpu/api/GPUDevice.h"
+#include "rnwgpu/async/AsyncRunner.h"
+#endif
+
 #include "JsiNativeBuffer.h"
 #include "JsiSkAnimatedImage.h"
 #include "JsiSkAnimatedImageFactory.h"
@@ -140,6 +146,31 @@ public:
                             std::make_shared<JsiNativeBufferFactory>(context));
 
     installFunction("Recorder", JsiRecorder::createCtor(context));
+
+    installFunction("hasDevice", JSI_HOST_FUNCTION_LAMBDA {
+#ifdef SK_GRAPHITE
+      return jsi::Value(true);
+#else
+      return jsi::Value(false);
+#endif
+    });
+
+    installFunction("getDevice", JSI_HOST_FUNCTION_LAMBDA {
+#ifdef SK_GRAPHITE
+      auto &dawnContext = DawnContext::getInstance();
+      auto asyncRunner = rnwgpu::async::AsyncRunner::get(runtime);
+      if (!asyncRunner) {
+        throw jsi::JSError(runtime, "AsyncRunner not initialized");
+      }
+      auto device = std::make_shared<rnwgpu::GPUDevice>(
+          dawnContext.getWGPUDevice(), asyncRunner, "Skia Device");
+      return rnwgpu::GPUDevice::create(runtime, device);
+#else
+      throw jsi::JSError(runtime,
+                         "getDevice() is only available with the Graphite "
+                         "backend. Rebuild with SK_GRAPHITE enabled.");
+#endif
+    });
   }
 };
 } // namespace RNSkia

package/cpp/api/JsiSkImageFactory.h

@@ -11,6 +11,11 @@
 #include "JsiSkImage.h"
 #include "JsiSkImageInfo.h"
 
+#ifdef SK_GRAPHITE
+#include "RNDawnContext.h"
+#include "rnwgpu/api/GPUTexture.h"
+#endif
+
 namespace RNSkia {
 
 namespace jsi = facebook::jsi;
@@ -113,6 +118,67 @@ public:
         runtime, hostObjectInstance, getContext());
   }
 
+  JSI_HOST_FUNCTION(MakeImageFromTexture) {
+#ifdef SK_GRAPHITE
+    if (count < 1 || !arguments[0].isObject()) {
+      throw std::runtime_error(
+          "MakeImageFromTexture requires a GPUTexture argument");
+    }
+    auto obj = arguments[0].asObject(runtime);
+    auto gpuTexture = obj.getNativeState<rnwgpu::GPUTexture>(runtime);
+    if (!gpuTexture) {
+      throw std::runtime_error("Invalid GPUTexture object");
+    }
+
+    wgpu::Texture texture = gpuTexture->get();
+    int width = static_cast<int>(gpuTexture->getWidth());
+    int height = static_cast<int>(gpuTexture->getHeight());
+    wgpu::TextureFormat format = gpuTexture->getFormat();
+
+    auto &dawnContext = DawnContext::getInstance();
+    auto image =
+        dawnContext.MakeImageFromTexture(texture, width, height, format);
+    if (image == nullptr) {
+      throw std::runtime_error("Failed to create SkImage from GPUTexture!");
+    }
+    auto hostObjectInstance =
+        std::make_shared<JsiSkImage>(getContext(), std::move(image));
+    return JSI_CREATE_HOST_OBJECT_WITH_MEMORY_PRESSURE(
+        runtime, hostObjectInstance, getContext());
+#else
+    throw std::runtime_error(
+        "MakeImageFromTexture is only available with the Graphite backend. "
+        "Rebuild with SK_GRAPHITE enabled.");
+#endif
+  }
+
+  JSI_HOST_FUNCTION(MakeTextureFromImage) {
+#ifdef SK_GRAPHITE
+    if (count < 1) {
+      throw std::runtime_error(
+          "MakeTextureFromImage requires an SkImage argument");
+    }
+    auto image = JsiSkImage::fromValue(runtime, arguments[0]);
+    if (!image) {
+      throw std::runtime_error("Invalid SkImage object");
+    }
+
+    auto &dawnContext = DawnContext::getInstance();
+    wgpu::Texture texture = dawnContext.MakeTextureFromImage(image);
+    if (!texture) {
+      throw std::runtime_error("Failed to create GPUTexture from SkImage!");
+    }
+
+    auto gpuTexture =
+        std::make_shared<rnwgpu::GPUTexture>(texture, "SkImage Texture");
+    return rnwgpu::GPUTexture::create(runtime, gpuTexture);
+#else
+    throw std::runtime_error(
+        "MakeTextureFromImage is only available with the Graphite backend. "
+        "Rebuild with SK_GRAPHITE enabled.");
+#endif
+  }
+
   size_t getMemoryPressure() const override { return 1024; }
 
   std::string getObjectType() const override { return "JsiSkImageFactory"; }
@@ -124,7 +190,9 @@ public:
                        JSI_EXPORT_FUNC(JsiSkImageFactory,
                                        MakeImageFromNativeTextureUnstable),
                        JSI_EXPORT_FUNC(JsiSkImageFactory, MakeImage),
-                       JSI_EXPORT_FUNC(JsiSkImageFactory, MakeNull))
+                       JSI_EXPORT_FUNC(JsiSkImageFactory, MakeNull),
+                       JSI_EXPORT_FUNC(JsiSkImageFactory, MakeImageFromTexture),
+                       JSI_EXPORT_FUNC(JsiSkImageFactory, MakeTextureFromImage))
 
   explicit JsiSkImageFactory(std::shared_ptr<RNSkPlatformContext> context)
       : JsiSkHostObject(std::move(context)) {}

package/cpp/api/JsiSkImageFilter.h

@@ -30,6 +30,7 @@ public:
   std::string getObjectType() const override { return "JsiSkImageFilter"; }
 
   EXPORT_JSI_API_TYPENAME(JsiSkImageFilter, ImageFilter)
+  JSI_EXPORT_FUNCTIONS(JSI_EXPORT_FUNC(JsiSkImageFilter, dispose))
 };
 
 } // namespace RNSkia

package/cpp/api/JsiSkPath.h

@@ -426,7 +426,7 @@ public:
     auto x2 = arguments[2].asNumber();
     auto y2 = arguments[3].asNumber();
     getObject()->quadTo(x1, y1, x2, y2);
-    return jsi::Value::undefined();
+    return thisValue.getObject(runtime);
   }
 
   JSI_HOST_FUNCTION(rQuadTo) {

package/cpp/jsi/RuntimeAwareCache.h

@@ -15,8 +15,6 @@ namespace jsi = facebook::jsi;
 class BaseRuntimeAwareCache {
 public:
   static void setMainJsRuntime(jsi::Runtime *rt) { _mainRuntime = rt; }
-
-protected:
   static jsi::Runtime *getMainJsRuntime() {
     assert(_mainRuntime != nullptr &&
            "Expected main Javascript runtime to be set in the "

package/cpp/jsi2/EnumMapper.h

@@ -0,0 +1,45 @@
+#pragma once
+
+#include <stdexcept>
+#include <string>
+
+namespace rnwgpu {
+
+namespace EnumMapper {
+  // Add these two methods in namespace "EnumMapper" to allow parsing a custom enum:
+  // 1. `static void convertJSUnionToEnum(const std::string& inUnion, Enum* outEnum)`
+  // 2. `static void convertEnumToJSUnion(Enum inEnum, std::string* outUnion)`
+
+  static std::runtime_error invalidUnion(const std::string& passedUnion) {
+    return std::runtime_error("Cannot convert JS Value to Enum: Invalid Union value passed! (\"" + std::string(passedUnion) + "\")");
+  }
+
+  template <typename T> static std::runtime_error invalidEnum(T passedEnum) {
+    return std::runtime_error("Cannot convert Enum to JS Value: Invalid Enum passed! (Value #" +
+                              std::to_string(static_cast<int>(passedEnum)) + ")");
+  }
+
+  // Trait to check if a convertJSUnionToEnum function for enum type T exists
+  template <typename T, typename = void> struct has_js_union_to_enum : std::false_type {};
+  template <typename T>
+  struct has_js_union_to_enum<T, std::void_t<decltype(convertJSUnionToEnum(std::declval<std::string>(), std::declval<T*>()))>>
+      : std::true_type {};
+
+  // Trait to check if a convertEnumToJSUnion function for enum type T exists
+  template <typename T, typename = void> struct has_enum_to_js_union : std::false_type {};
+  template <typename T>
+  struct has_enum_to_js_union<T, std::void_t<decltype(convertEnumToJSUnion(std::declval<T>(), std::declval<std::string*>()))>>
+      : std::true_type {};
+
+  template <typename TEnum> static void convertJSUnionToEnum(const std::string&, TEnum*) {
+    static_assert(has_js_union_to_enum<TEnum>::value,
+                  "Cannot convert a JS union to this enum type. Did you implement EnumMapper::convertJSUnionToEnum(...)?");
+  }
+
+  template <typename TEnum> static void convertEnumToJSUnion(TEnum, std::string*) {
+    static_assert(has_enum_to_js_union<TEnum>::value,
+                  "Cannot convert this enum type to a JS union. Did you implement EnumMapper::convertEnumToJSUnion(...)?");
+  }
+} // namespace EnumMapper
+
+} // namespace rnwgpu