@shopify/react-native-skia 2.12.0 → 2.13.0

package/android/cpp/jni/include/JniSkiaBaseView.h

@@ -21,24 +21,28 @@ class JniSkiaBaseView {
 public:
   JniSkiaBaseView(jni::alias_ref<JniSkiaManager::javaobject> skiaManager,
                   std::shared_ptr<RNSkBaseAndroidView> skiaView)
-      : _skiaAndroidView(std::move(skiaView)), _manager(skiaManager->cthis()) {}
+      : _skiaAndroidView(std::move(skiaView)),
+        _manager(skiaManager->cthis()->getSkiaManager()) {}
 
   ~JniSkiaBaseView() = default;
 
-  std::shared_ptr<RNSkManager> getSkiaManager() {
-    return _manager->getSkiaManager();
-  }
+  // The manager is owned by the RNSkiaModule and is destroyed when the module
+  // is invalidated (reload). Fabric drops views on the UI thread while the
+  // module is invalidated on a background thread, so a view can outlive its
+  // manager: holding a weak reference makes a late unregister a no-op and a
+  // concurrent one keep the manager alive for the duration of the call.
+  std::shared_ptr<RNSkManager> getSkiaManager() { return _manager.lock(); }
 
 protected:
   virtual void surfaceAvailable(jobject surface, int width, int height,
-                                bool opaque, bool highBitDepth) {
-    _skiaAndroidView->surfaceAvailable(surface, width, height, opaque,
+                                bool isSurface, bool highBitDepth) {
+    _skiaAndroidView->surfaceAvailable(surface, width, height, isSurface,
                                        highBitDepth);
   }
 
   virtual void surfaceSizeChanged(jobject surface, int width, int height,
-                                  bool opaque, bool highBitDepth) {
-    _skiaAndroidView->surfaceSizeChanged(surface, width, height, opaque,
+                                  bool isSurface, bool highBitDepth) {
+    _skiaAndroidView->surfaceSizeChanged(surface, width, height, isSurface,
                                          highBitDepth);
   }
 
@@ -49,8 +53,11 @@ protected:
   }
 
   virtual void registerView(int nativeId) {
-    getSkiaManager()->registerSkiaView(nativeId,
-                                       _skiaAndroidView->getSkiaView());
+    auto manager = getSkiaManager();
+    if (manager == nullptr) {
+      return;
+    }
+    manager->registerSkiaView(nativeId, _skiaAndroidView->getSkiaView());
   }
 
   virtual void unregisterView() {
@@ -74,7 +81,7 @@ protected:
   std::shared_ptr<RNSkBaseAndroidView> _skiaAndroidView;
 
 private:
-  JniSkiaManager *_manager;
+  std::weak_ptr<RNSkManager> _manager;
 };
 
 } // namespace RNSkia

package/android/cpp/jni/include/JniSkiaManager.h

@@ -5,7 +5,6 @@
 #include <fbjni/fbjni.h>
 #include <jsi/jsi.h>
 #include <memory>
-#include <react/jni/JRuntimeExecutor.h>
 
 #include "JniPlatformContext.h"
 #include "RNSkAndroidPlatformContext.h"
@@ -23,13 +22,13 @@ using JavaPlatformContext = jni::alias_ref<JniPlatformContext::javaobject>;
 class JniSkiaManager : public jni::HybridClass<JniSkiaManager> {
 public:
   static auto constexpr kJavaDescriptor =
-      "Lcom/shopify/reactnative/skia/SkiaManager;";
+      "Lcom/reactnative/skia/SkiaManager;";
   static auto constexpr TAG = "ReactNativeSkia";
 
   static jni::local_ref<jni::HybridClass<JniSkiaManager>::jhybriddata>
   initHybrid(jni::alias_ref<jhybridobject> jThis, jlong jsContext,
-             jni::alias_ref<facebook::react::JRuntimeExecutor::javaobject>
-                 jRuntimeExecutor,
+             jni::alias_ref<facebook::react::CallInvokerHolder::javaobject>
+                 jsCallInvokerHolder,
              JavaPlatformContext platformContext);
 
   static void registerNatives();

package/android/cpp/jni/include/JniSkiaPictureView.h

@@ -39,7 +39,7 @@ class JniSkiaPictureView : public jni::HybridClass<JniSkiaPictureView>,
                            public JniSkiaBaseView {
 public:
   static auto constexpr kJavaDescriptor =
-      "Lcom/shopify/reactnative/skia/SkiaPictureView;";
+      "Lcom/reactnative/skia/SkiaPictureView;";
 
   static jni::local_ref<jhybriddata>
   initHybrid(jni::alias_ref<jhybridobject> jThis,
@@ -63,15 +63,15 @@ public:
   }
 
 protected:
-  void surfaceAvailable(jobject surface, int width, int height, bool opaque,
+  void surfaceAvailable(jobject surface, int width, int height, bool isSurface,
                         bool highBitDepth) override {
-    JniSkiaBaseView::surfaceAvailable(surface, width, height, opaque,
+    JniSkiaBaseView::surfaceAvailable(surface, width, height, isSurface,
                                       highBitDepth);
   }
 
-  void surfaceSizeChanged(jobject surface, int width, int height, bool opaque,
+  void surfaceSizeChanged(jobject surface, int width, int height, bool isSurface,
                           bool highBitDepth) override {
-    JniSkiaBaseView::surfaceSizeChanged(surface, width, height, opaque,
+    JniSkiaBaseView::surfaceSizeChanged(surface, width, height, isSurface,
                                         highBitDepth);
   }
 

package/android/cpp/rnskia-android/RNSkAndroidView.h

@@ -12,12 +12,12 @@ namespace RNSkia {
 class RNSkBaseAndroidView {
 public:
   virtual void surfaceAvailable(jobject surface, int width, int height,
-                                bool opaque, bool highBitDepth) = 0;
+                                bool isSurface, bool highBitDepth) = 0;
 
   virtual void surfaceDestroyed() = 0;
 
   virtual void surfaceSizeChanged(jobject surface, int width, int height,
-                                  bool opaque, bool highBitDepth) = 0;
+                                  bool isSurface, bool highBitDepth) = 0;
 
   virtual float getPixelDensity() = 0;
 
@@ -34,10 +34,10 @@ public:
           std::make_shared<RNSkOpenGLCanvasProvider>(
               std::bind(&RNSkia::RNSkView::requestRedraw, this), context)) {}
 
-  void surfaceAvailable(jobject surface, int width, int height, bool opaque,
+  void surfaceAvailable(jobject surface, int width, int height, bool isSurface,
                         bool highBitDepth) override {
     std::static_pointer_cast<RNSkOpenGLCanvasProvider>(T::getCanvasProvider())
-        ->surfaceAvailable(surface, width, height, opaque, highBitDepth);
+        ->surfaceAvailable(surface, width, height, isSurface, highBitDepth);
     RNSkView::redraw();
   }
 
@@ -46,10 +46,10 @@ public:
         ->surfaceDestroyed();
   }
 
-  void surfaceSizeChanged(jobject surface, int width, int height, bool opaque,
+  void surfaceSizeChanged(jobject surface, int width, int height, bool isSurface,
                           bool highBitDepth) override {
     std::static_pointer_cast<RNSkOpenGLCanvasProvider>(T::getCanvasProvider())
-        ->surfaceSizeChanged(surface, width, height, opaque, highBitDepth);
+        ->surfaceSizeChanged(surface, width, height, isSurface, highBitDepth);
     // This is only need for the first time to frame, this renderImmediate call
     // will invoke updateTexImage for the previous frame
     RNSkView::redraw();

package/android/cpp/rnskia-android/RNSkOpenGLCanvasProvider.cpp

@@ -78,7 +78,7 @@ bool RNSkOpenGLCanvasProvider::renderToCanvas(
 
 void RNSkOpenGLCanvasProvider::surfaceAvailable(jobject jSurfaceTexture,
                                                 int width, int height,
-                                                bool opaque,
+                                                bool isSurface,
                                                 bool highBitDepth) {
   // Release the old surface
   _surfaceHolder = nullptr;
@@ -86,7 +86,7 @@ void RNSkOpenGLCanvasProvider::surfaceAvailable(jobject jSurfaceTexture,
   // Create renderer!
   ANativeWindow *window = nullptr;
   JNIEnv *env = facebook::jni::Environment::current();
-  if (!opaque) {
+  if (!isSurface) {
     _jSurfaceTexture = env->NewGlobalRef(jSurfaceTexture);
     jclass surfaceClass = env->FindClass("android/view/Surface");
     jmethodID surfaceConstructor = env->GetMethodID(
@@ -131,7 +131,7 @@ void RNSkOpenGLCanvasProvider::surfaceDestroyed() {
 }
 
 void RNSkOpenGLCanvasProvider::surfaceSizeChanged(jobject jSurface, int width,
-                                                  int height, bool opaque,
+                                                  int height, bool isSurface,
                                                   bool highBitDepth) {
   if (width == 0 && height == 0) {
     // Setting width/height to zero is nothing we need to care about when
@@ -141,7 +141,7 @@ void RNSkOpenGLCanvasProvider::surfaceSizeChanged(jobject jSurface, int width,
 
   if (_surfaceHolder == nullptr) {
     _surfaceHolder = nullptr;
-    surfaceAvailable(jSurface, width, height, opaque, highBitDepth);
+    surfaceAvailable(jSurface, width, height, isSurface, highBitDepth);
   } else {
     _surfaceHolder->resize(width, height);
   }

package/android/cpp/rnskia-android/RNSkOpenGLCanvasProvider.h

@@ -27,12 +27,12 @@ public:
 
   bool renderToCanvas(const std::function<void(SkCanvas *)> &cb) override;
 
-  void surfaceAvailable(jobject surface, int width, int height, bool opaque,
+  void surfaceAvailable(jobject surface, int width, int height, bool isSurface,
                         bool highBitDepth);
 
   void surfaceDestroyed();
 
-  void surfaceSizeChanged(jobject jSurface, int width, int height, bool opaque,
+  void surfaceSizeChanged(jobject jSurface, int width, int height, bool isSurface,
                           bool highBitDepth);
 
 private:

package/android/src/main/AndroidManifest.xml

@@ -1,6 +1,6 @@
 <!-- AndroidManifest.xml -->
 
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-          package="com.shopify.reactnative.skia">
+          package="com.reactnative.skia">
 
 </manifest>

package/android/src/main/java/com/{shopify/reactnative → reactnative}/skia/PlatformContext.java

@@ -1,4 +1,4 @@
-package com.shopify.reactnative.skia;
+package com.reactnative.skia;
 
 import android.os.Handler;
 import android.os.Looper;

package/android/src/main/java/com/{shopify/reactnative → reactnative}/skia/RNSkVideo.java

@@ -1,4 +1,4 @@
-package com.shopify.reactnative.skia;
+package com.reactnative.skia;
 
 import android.content.Context;
 import android.graphics.ImageFormat;

package/android/src/main/java/com/{shopify/reactnative → reactnative}/skia/RNSkiaModule.java

@@ -1,6 +1,6 @@
 // RnskiaModule.java
 
-package com.shopify.reactnative.skia;
+package com.reactnative.skia;
 
 import android.util.Log;
 
@@ -17,11 +17,6 @@ public class RNSkiaModule extends NativeSkiaModuleSpec {
 
     private final WeakReference<ReactApplicationContext> weakReactContext;
     private SkiaManager skiaManager;
-    private static volatile boolean sIsValid = false;
-
-    public static boolean isModuleValid() {
-        return sIsValid;
-    }
 
     public RNSkiaModule(ReactApplicationContext reactContext) {
         super(reactContext);
@@ -31,7 +26,6 @@ public class RNSkiaModule extends NativeSkiaModuleSpec {
     @Override
     public void invalidate() {
         super.invalidate();
-        sIsValid = false;
 
         if (this.skiaManager != null) {
             this.skiaManager.invalidate();
@@ -64,7 +58,6 @@ public class RNSkiaModule extends NativeSkiaModuleSpec {
                 return false;
             }
             skiaManager = new SkiaManager(context);
-            sIsValid = true;
             return true;
         } catch (Exception exception) {
             Log.e(NAME, "Failed to initialize Skia Manager!", exception);

package/android/src/main/java/com/reactnative/skia/RNSkiaPackage.java

@@ -0,0 +1,57 @@
+// RnskiaPackage.java
+
+package com.reactnative.skia;
+
+import androidx.annotation.Nullable;
+
+import java.util.Arrays;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+import com.facebook.react.BaseReactPackage;
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.module.model.ReactModuleInfo;
+import com.facebook.react.module.model.ReactModuleInfoProvider;
+import com.facebook.react.uimanager.ViewManager;
+
+// `implements ReactPackage` is redundant (BaseReactPackage already implements it)
+// but required: older @react-native-community/cli versions only autolink
+// classes matching `implements ReactPackage` or `extends TurboReactPackage`.
+public class RNSkiaPackage extends BaseReactPackage implements ReactPackage {
+    @Nullable
+    @Override
+    public NativeModule getModule(String name, ReactApplicationContext reactApplicationContext) {
+        if (RNSkiaModule.NAME.equals(name)) {
+            return new RNSkiaModule(reactApplicationContext);
+        }
+        return null;
+    }
+
+    @Override
+    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+        return Arrays.<ViewManager>asList(
+            new SkiaPictureViewManager()
+        );
+    }
+
+    @Override
+    public ReactModuleInfoProvider getReactModuleInfoProvider() {
+        return () -> {
+            final Map<String, ReactModuleInfo> reactModuleInfoMap = new HashMap<>();
+            reactModuleInfoMap.put(
+                    RNSkiaModule.NAME,
+                    new ReactModuleInfo(
+                            RNSkiaModule.NAME,
+                            RNSkiaModule.class.getName(),
+                            false, // canOverrideExistingModule
+                            false, // needsEagerInit
+                            false, // isCxxModule
+                            true   // isTurboModule
+                    ));
+            return reactModuleInfoMap;
+        };
+    }
+}

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

@@ -0,0 +1,185 @@
+package com.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 {
+    // Backing view kinds, see updateView().
+    private static final int KIND_SURFACE_VIEW = 0;
+    private static final int KIND_TEXTURE_VIEW = 1;
+
+    private View mView;
+
+    // Props, applied together in updateView().
+    private boolean mOpaque = false;
+    private String mSurfaceType = "auto";
+    private boolean mZOrderOnTop = false;
+    private boolean mHighBitDepth = false;
+
+    // What the current backing view was created with.
+    private int mAppliedKind = -1;
+    private boolean mAppliedZOrderOnTop;
+    private boolean mAppliedHighBitDepth;
+
+    private final boolean debug = false;
+    private final String tag = "SkiaView";
+
+    public SkiaBaseView(Context context) {
+        super(context);
+    }
+
+    @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) {
+        mOpaque = value;
+    }
+
+    public void setSurfaceType(String value) {
+        mSurfaceType = value == null ? "auto" : value;
+    }
+
+    public void setZOrderOnTop(boolean value) {
+        mZOrderOnTop = value;
+    }
+
+    public void setHighBitDepth(boolean value) {
+        mHighBitDepth = value;
+    }
+
+    // Resolve the backing view from the props. "auto" picks SurfaceView for an
+    // opaque canvas and TextureView for a non-opaque one.
+    private int resolveKind() {
+        if ("SurfaceView".equals(mSurfaceType)) {
+            return KIND_SURFACE_VIEW;
+        }
+        if ("TextureView".equals(mSurfaceType)) {
+            return KIND_TEXTURE_VIEW;
+        }
+        return mOpaque ? KIND_SURFACE_VIEW : KIND_TEXTURE_VIEW;
+    }
+
+    // The 10-bit buffer format only has 2 bits of alpha, which would visibly
+    // break translucency, and the extra precision would be lost in the 8-bit
+    // composition pass of a TextureView anyway. So the flag only applies to an
+    // opaque SurfaceView.
+    private boolean resolveHighBitDepth(int kind) {
+        if (!mHighBitDepth) {
+            return false;
+        }
+        if (kind != KIND_SURFACE_VIEW || !mOpaque) {
+            Log.w(tag, "highBitDepth requires an opaque SurfaceView on Android, falling back to the 8-bit format");
+            return false;
+        }
+        return true;
+    }
+
+    // Apply the complete prop transaction once, after every prop has arrived.
+    // Only a change of backing view, or of a setting the view must know before
+    // it attaches (zOrderOnTop, the buffer format), replaces the child; opacity
+    // is applied in place.
+    void updateView() {
+        int kind = resolveKind();
+        boolean zOrderOnTop = kind == KIND_SURFACE_VIEW && mZOrderOnTop;
+        boolean highBitDepth = resolveHighBitDepth(kind);
+        if (mView == null
+                || kind != mAppliedKind
+                || zOrderOnTop != mAppliedZOrderOnTop
+                || highBitDepth != mAppliedHighBitDepth) {
+            if (mView != null) {
+                removeView(mView);
+            }
+            mAppliedKind = kind;
+            mAppliedZOrderOnTop = zOrderOnTop;
+            mAppliedHighBitDepth = highBitDepth;
+            mView = kind == KIND_SURFACE_VIEW
+                    ? new SkiaSurfaceView(getContext(), this, debug, zOrderOnTop, mOpaque)
+                    : new SkiaTextureView(getContext(), this, debug, mOpaque);
+            addView(mView);
+            // React Native sizes native children explicitly through onLayout, so
+            // the requestLayout triggered by addView is ignored; size the new
+            // child ourselves or it stays 0x0 and never gets a surface.
+            if (getWidth() > 0 || getHeight() > 0) {
+                mView.layout(0, 0, getWidth(), getHeight());
+            }
+        } else if (kind == KIND_SURFACE_VIEW) {
+            ((SkiaSurfaceView) mView).setOpaque(mOpaque);
+        } else {
+            ((SkiaTextureView) mView).setOpaque(mOpaque);
+        }
+    }
+
+    void dropInstance() {
+        unregisterView();
+    }
+
+    @Override
+    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
+        super.onLayout(changed, left, top, right, bottom);
+        if (mView != null) {
+            mView.layout(0, 0, right - left, bottom - top);
+        }
+    }
+
+    // SurfaceView callbacks: the native side receives an android.view.Surface.
+
+    @Override
+    public void onSurfaceCreated(Surface surface, int width, int height) {
+        surfaceAvailable(surface, width, height, true, mAppliedHighBitDepth);
+    }
+
+    @Override
+    public void onSurfaceChanged(Surface surface, int width, int height) {
+        Log.i(tag, "onSurfaceChanged " + width + "/" + height);
+        surfaceSizeChanged(surface, width, height, true, mAppliedHighBitDepth);
+    }
+
+    // TextureView callbacks: the native side receives a SurfaceTexture and
+    // drives updateTexImage itself. The 10-bit format is never used here.
+
+    @Override
+    public void onSurfaceTextureCreated(SurfaceTexture surface, int width, int height) {
+        surfaceAvailable(surface, width, height, false, false);
+    }
+
+    @Override
+    public void onSurfaceTextureChanged(SurfaceTexture surface, int width, int height) {
+        Log.i(tag, "onSurfaceTextureSizeChanged " + width + "/" + height);
+        surfaceSizeChanged(surface, width, height, false, false);
+    }
+
+    @Override
+    public void onSurfaceDestroyed() {
+        surfaceDestroyed();
+    }
+
+    // isSurface tells the native side whether `surface` is an
+    // android.view.Surface (SurfaceView) or a SurfaceTexture (TextureView).
+    protected abstract void surfaceAvailable(Object surface, int width, int height, boolean isSurface, boolean highBitDepth);
+
+    protected abstract void surfaceSizeChanged(Object surface, int width, int height, boolean isSurface, boolean highBitDepth);
+
+    protected abstract void surfaceDestroyed();
+
+    protected abstract void setDebugMode(boolean show);
+
+    protected abstract void registerView(int nativeId);
+
+    protected abstract void unregisterView();
+
+    protected abstract int[] getBitmap(int width, int height);
+}

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

@@ -1,4 +1,4 @@
-package com.shopify.reactnative.skia;
+package com.reactnative.skia;
 
 import com.facebook.react.uimanager.PointerEvents;
 import com.facebook.react.uimanager.ViewProps;
@@ -33,6 +33,25 @@ public abstract class SkiaBaseViewManager<T extends SkiaBaseView> extends ReactV
         ((SkiaBaseView)view).setHighBitDepth(value);
     }
 
+    @ReactProp(name = "androidSurfaceType")
+    public void setAndroidSurfaceType(T view, @Nullable String value) {
+        ((SkiaBaseView)view).setSurfaceType(value);
+    }
+
+    @ReactProp(name = "androidZOrderOnTop")
+    public void setAndroidZOrderOnTop(T view, boolean value) {
+        ((SkiaBaseView)view).setZOrderOnTop(value);
+    }
+
+    // The backing view depends on several props (opaque, androidSurfaceType,
+    // androidZOrderOnTop, highBitDepth), so it is resolved once per transaction
+    // rather than in each setter.
+    @Override
+    protected void onAfterUpdateTransaction(@NonNull ReactViewGroup view) {
+        super.onAfterUpdateTransaction(view);
+        ((SkiaBaseView)view).updateView();
+    }
+
     @ReactProp(name = ViewProps.POINTER_EVENTS)
     public void setPointerEvents(T view, @Nullable String pointerEventsStr) {
         view.setPointerEvents(PointerEvents.parsePointerEvents(pointerEventsStr));

package/android/src/main/java/com/{shopify/reactnative → reactnative}/skia/SkiaManager.java

@@ -1,9 +1,10 @@
-package com.shopify.reactnative.skia;
+package com.reactnative.skia;
 
 import com.facebook.jni.HybridData;
 import com.facebook.proguard.annotations.DoNotStrip;
 import com.facebook.react.bridge.ReactContext;
-import com.facebook.react.bridge.RuntimeExecutor;
+import com.facebook.react.turbomodule.core.CallInvokerHolderImpl;
+import com.facebook.react.turbomodule.core.interfaces.CallInvokerHolder;
 
 @DoNotStrip
 public class SkiaManager {
@@ -22,11 +23,15 @@ public class SkiaManager {
         super();
         mContext = context;
 
-        RuntimeExecutor runtimeExecutor = ReactNativeCompatible.getRuntimeExecutor(context);
+        CallInvokerHolder jsCallInvokerHolder = context.getJSCallInvokerHolder();
+        if (jsCallInvokerHolder == null) {
+            throw new IllegalStateException("React instance is not ready: no JS CallInvoker available");
+        }
 
         mPlatformContext = new PlatformContext(context);
 
-        mHybridData = initHybrid(context.getJavaScriptContextHolder().get(), runtimeExecutor, mPlatformContext);
+        mHybridData = initHybrid(context.getJavaScriptContextHolder().get(),
+                (CallInvokerHolderImpl) jsCallInvokerHolder, mPlatformContext);
 
         initializeRuntime();
     }
@@ -44,10 +49,10 @@ public class SkiaManager {
     }
 
     // private C++ functions
-    private native HybridData initHybrid(long jsContext, RuntimeExecutor runtimeExecutor,
+    private native HybridData initHybrid(long jsContext, CallInvokerHolderImpl jsCallInvokerHolder,
             PlatformContext platformContext);
 
     private native void initializeRuntime();
     public native void invalidate();
 
-}
+}

package/android/src/main/java/com/{shopify/reactnative → reactnative}/skia/SkiaPictureView.java

@@ -1,4 +1,4 @@
-package com.shopify.reactnative.skia;
+package com.reactnative.skia;
 
 import android.content.Context;
 import android.graphics.Bitmap;
@@ -67,9 +67,9 @@ public class SkiaPictureView extends SkiaBaseView {
 
     private native HybridData initHybrid(SkiaManager skiaManager);
 
-    protected native void surfaceAvailable(Object surface, int width, int height, boolean opaque, boolean highBitDepth);
+    protected native void surfaceAvailable(Object surface, int width, int height, boolean isSurface, boolean highBitDepth);
 
-    protected native void surfaceSizeChanged(Object surface, int width, int height, boolean opaque, boolean highBitDepth);
+    protected native void surfaceSizeChanged(Object surface, int width, int height, boolean isSurface, boolean highBitDepth);
 
     protected native void surfaceDestroyed();
 

package/android/src/main/java/com/{shopify/reactnative → reactnative}/skia/SkiaPictureViewManager.java

@@ -1,4 +1,4 @@
-package com.shopify.reactnative.skia;
+package com.reactnative.skia;
 
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.viewmanagers.SkiaPictureViewManagerDelegate;

package/android/src/main/java/com/{shopify/reactnative → reactnative}/skia/SkiaSurfaceView.java

@@ -1,7 +1,8 @@
-package com.shopify.reactnative.skia;
+package com.reactnative.skia;
 
 import android.annotation.SuppressLint;
 import android.content.Context;
+import android.graphics.PixelFormat;
 import android.view.SurfaceHolder;
 import android.view.SurfaceView;
 import androidx.annotation.NonNull;
@@ -12,13 +13,22 @@ public class SkiaSurfaceView extends SurfaceView implements SurfaceHolder.Callba
     SkiaViewAPI mApi;
     boolean mDebug;
 
-    public SkiaSurfaceView(Context context, SkiaViewAPI api, boolean debug) {
+    public SkiaSurfaceView(Context context, SkiaViewAPI api, boolean debug, boolean zOrderOnTop, boolean opaque) {
         super(context);
         mApi = api;
         mDebug = debug;
+        // Must be set before the surface is created.
+        setZOrderOnTop(zOrderOnTop);
+        setOpaque(opaque);
         getHolder().addCallback(this);
     }
 
+    // The format drives the compositor's opaque flag for this layer. It can
+    // change on a live surface: SurfaceView reports it through surfaceChanged.
+    public void setOpaque(boolean opaque) {
+        getHolder().setFormat(opaque ? PixelFormat.OPAQUE : PixelFormat.TRANSLUCENT);
+    }
+
     @Override
     protected void onDetachedFromWindow() {
         super.onDetachedFromWindow();
@@ -39,4 +49,4 @@ public class SkiaSurfaceView extends SurfaceView implements SurfaceHolder.Callba
     public void surfaceDestroyed(@NonNull SurfaceHolder holder) {
         mApi.onSurfaceDestroyed();
     }
-}
+}