@shopify/react-native-skia 1.5.9 → 1.6.0

package/lib/typescript/lib/commonjs/skia/types/Image/ColorType.d.ts

@@ -0,0 +1,2 @@
+export const __esModule: boolean;
+export const ColorType: {};

package/lib/typescript/lib/commonjs/skia/types/Image/ColorType.web.d.ts

@@ -0,0 +1,2 @@
+export const __esModule: boolean;
+export const ColorTypeCanvasKit: {};

package/lib/typescript/lib/commonjs/skia/types/Image/ImageFactory.d.ts

@@ -1,3 +1,2 @@
 export const __esModule: boolean;
 export const AlphaType: {};
-export const ColorType: {};

package/lib/typescript/lib/module/skia/types/Image/ColorType.d.ts

@@ -0,0 +1 @@
+export let ColorType: {};

package/lib/typescript/lib/module/skia/types/Image/ColorType.web.d.ts

@@ -0,0 +1 @@
+export let ColorTypeCanvasKit: {};

package/lib/typescript/lib/module/skia/types/Image/ImageFactory.d.ts

@@ -1,2 +1 @@
 export let AlphaType: {};
-export let ColorType: {};

package/lib/typescript/lib/module/skia/types/Image/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./Image";
 export * from "./ImageFactory";
+export * from "./ColorType";

package/lib/typescript/src/skia/types/Image/ColorType.d.ts

@@ -0,0 +1,21 @@
+export declare enum ColorType {
+    Unknown = 0,// uninitialized
+    Alpha_8 = 1,// pixel with alpha in 8-bit byte
+    RGB_565 = 2,// pixel with 5 bits red, 6 bits green, 5 bits blue, in 16-bit word
+    ARGB_4444 = 3,// pixel with 4 bits for alpha, red, green, blue; in 16-bit word
+    RGBA_8888 = 4,// pixel with 8 bits for red, green, blue, alpha; in 32-bit word
+    RGB_888x = 5,// pixel with 8 bits each for red, green, blue; in 32-bit word
+    BGRA_8888 = 6,// pixel with 8 bits for blue, green, red, alpha; in 32-bit word
+    RGBA_1010102 = 7,// 10 bits for red, green, blue; 2 bits for alpha; in 32-bit word
+    BGRA_1010102 = 8,// 10 bits for blue, green, red; 2 bits for alpha; in 32-bit word
+    RGB_101010x = 9,// pixel with 10 bits each for red, green, blue; in 32-bit word
+    BGR_101010x = 10,// pixel with 10 bits each for blue, green, red; in 32-bit word
+    BGR_101010x_XR = 11,// pixel with 10 bits each for blue, green, red; in 32-bit word, extended range
+    BGRA_10101010_XR = 12,// pixel with 10 bits each for blue, green, red, alpha; in 64-bit word, extended range
+    RGBA_10x6 = 13,// pixel with 10 used bits (most significant) followed by 6 unused
+    Gray_8 = 14,// pixel with grayscale level in 8-bit byte
+    RGBA_F16Norm = 15,// pixel with half floats in [0,1] for red, green, blue, alpha; in 64-bit word
+    RGBA_F16 = 16,// pixel with half floats for red, green, blue, alpha; in 64-bit word
+    RGB_F16F16F16x = 17,// pixel with half floats for red, green, blue; in 64-bit word
+    RGBA_F32 = 18
+}

package/lib/typescript/src/skia/types/Image/ColorType.web.d.ts

@@ -0,0 +1,19 @@
+export declare enum ColorTypeCanvasKit {
+    Unknown = 0,// uninitialized
+    Alpha_8 = 1,// pixel with alpha in 8-bit byte
+    RGB_565 = 2,// pixel with 5 bits red, 6 bits green, 5 bits blue, in 16-bit word
+    ARGB_4444 = 3,// pixel with 4 bits for alpha, red, green, blue; in 16-bit word
+    RGBA_8888 = 4,// pixel with 8 bits for red, green, blue, alpha; in 32-bit word
+    RGB_888x = 5,// pixel with 8 bits each for red, green, blue; in 32-bit word
+    BGRA_8888 = 6,// pixel with 8 bits for blue, green, red, alpha; in 32-bit word
+    RGBA_1010102 = 7,// 10 bits for red, green, blue; 2 bits for alpha; in 32-bit word
+    BGRA_1010102 = 8,// 10 bits for blue, green, red; 2 bits for alpha; in 32-bit word
+    RGB_101010x = 9,// pixel with 10 bits each for red, green, blue; in 32-bit word
+    BGR_101010x = 10,// pixel with 10 bits each for blue, green, red; in 32-bit word
+    BGR_101010x_XR = 11,// pixel with 10 bits each for blue, green, red; in 32-bit word, extended range
+    RGBA_10x6 = 12,// pixel with 10 used bits (most significant) followed by 6 unused
+    Gray_8 = 13,// pixel with grayscale level in 8-bit byte
+    RGBA_F16Norm = 14,// pixel with half floats in [0,1] for red, green, blue, alpha; in 64-bit word
+    RGBA_F16 = 15,// pixel with half floats for red, green, blue, alpha; in 64-bit word
+    RGBA_F32 = 16
+}

package/lib/typescript/src/skia/types/Image/ImageFactory.d.ts

@@ -1,5 +1,6 @@
 import type { SkData } from "../Data";
 import type { NativeBuffer } from "../NativeBuffer";
+import type { ColorType } from "./ColorType";
 import type { SkImage } from "./Image";
 export declare enum AlphaType {
     Unknown = 0,
@@ -7,25 +8,6 @@ export declare enum AlphaType {
     Premul = 2,
     Unpremul = 3
 }
-export declare enum ColorType {
-    Unknown = 0,// uninitialized
-    Alpha_8 = 1,// pixel with alpha in 8-bit byte
-    RGB_565 = 2,// pixel with 5 bits red, 6 bits green, 5 bits blue, in 16-bit word
-    ARGB_4444 = 3,// pixel with 4 bits for alpha, red, green, blue; in 16-bit word
-    RGBA_8888 = 4,// pixel with 8 bits for red, green, blue, alpha; in 32-bit word
-    RGB_888x = 5,// pixel with 8 bits each for red, green, blue; in 32-bit word
-    BGRA_8888 = 6,// pixel with 8 bits for blue, green, red, alpha; in 32-bit word
-    RGBA_1010102 = 7,// 10 bits for red, green, blue; 2 bits for alpha; in 32-bit word
-    BGRA_1010102 = 8,// 10 bits for blue, green, red; 2 bits for alpha; in 32-bit word
-    RGB_101010x = 9,// pixel with 10 bits each for red, green, blue; in 32-bit word
-    BGR_101010x = 10,// pixel with 10 bits each for blue, green, red; in 32-bit word
-    BGR_101010x_XR = 11,// pixel with 10 bits each for blue, green, red; in 32-bit word, extended range
-    RGBA_10x6 = 12,// pixel with 10 used bits (most significant) followed by 6 unused
-    Gray_8 = 13,// pixel with grayscale level in 8-bit byte
-    RGBA_F16Norm = 14,// pixel with half floats in [0,1] for red, green, blue, alpha; in 64-bit word
-    RGBA_F16 = 15,// pixel with half floats for red, green, blue, alpha; in 64-bit word
-    RGBA_F32 = 16
-}
 export interface ImageInfo {
     alphaType: AlphaType;
     colorType: ColorType;

package/lib/typescript/src/skia/types/Image/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./Image";
 export * from "./ImageFactory";
+export * from "./ColorType";

package/lib/typescript/src/specs/SkiaDomViewNativeComponent.d.ts

@@ -1,6 +1,5 @@
 import type { ViewProps } from "react-native";
 export interface NativeProps extends ViewProps {
-    mode: string;
     debug?: boolean;
 }
 declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;

package/lib/typescript/src/specs/SkiaPictureViewNativeComponent.d.ts

@@ -1,6 +1,7 @@
 import type { ViewProps } from "react-native";
 export interface NativeProps extends ViewProps {
     debug?: boolean;
+    opaque?: boolean;
 }
 declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
 export default _default;

package/lib/typescript/src/views/types.d.ts

@@ -4,6 +4,7 @@ import type { SkImage, SkPicture, SkRect, SkSize } from "../skia/types";
 import type { SharedValueType } from "../renderer/processors/Animations/Animations";
 export type NativeSkiaViewProps = ViewProps & {
     debug?: boolean;
+    opaque?: boolean;
 };
 export interface DrawingInfo {
     width: number;
@@ -27,6 +28,7 @@ export interface SkiaBaseViewProps extends ViewProps {
      * the Skia view is resized.
      */
     onSize?: SharedValueType<SkSize>;
+    opaque?: boolean;
 }
 export interface SkiaPictureViewNativeProps extends SkiaBaseViewProps {
     picture?: SkPicture;

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "1.5.9",
+  "version": "1.6.0",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",

package/src/skia/__tests__/Enums.spec.ts

@@ -4,7 +4,6 @@ import {
   AlphaType,
   BlurStyle,
   ClipOp,
-  ColorType,
   FillType,
   FilterMode,
   FontEdging,
@@ -27,6 +26,7 @@ import {
 import { Path1DEffectStyle } from "../types/PathEffect";
 import { BlendMode } from "../types/Paint/BlendMode";
 import { mapKeys } from "../../renderer/typeddash";
+import { ColorTypeCanvasKit } from "../types/Image/ColorType.web";
 
 import { setupSkia } from "./setup";
 
@@ -71,7 +71,7 @@ describe("Enums", () => {
   });
   it("Should match Image enums values with CanvasKit", () => {
     const { CanvasKit } = setupSkia();
-    checkEnum(ColorType, CanvasKit.ColorType);
+    checkEnum(ColorTypeCanvasKit, CanvasKit.ColorType);
     checkEnum(AlphaType, CanvasKit.AlphaType);
     checkEnum(ImageFormat, CanvasKit.ImageFormat);
     checkEnum(MipmapMode, CanvasKit.MipmapMode);

package/src/skia/types/Image/ColorType.ts

@@ -0,0 +1,21 @@
+export enum ColorType {
+  Unknown, // uninitialized
+  Alpha_8, // pixel with alpha in 8-bit byte
+  RGB_565, // pixel with 5 bits red, 6 bits green, 5 bits blue, in 16-bit word
+  ARGB_4444, // pixel with 4 bits for alpha, red, green, blue; in 16-bit word
+  RGBA_8888, // pixel with 8 bits for red, green, blue, alpha; in 32-bit word
+  RGB_888x, // pixel with 8 bits each for red, green, blue; in 32-bit word
+  BGRA_8888, // pixel with 8 bits for blue, green, red, alpha; in 32-bit word
+  RGBA_1010102, // 10 bits for red, green, blue; 2 bits for alpha; in 32-bit word
+  BGRA_1010102, // 10 bits for blue, green, red; 2 bits for alpha; in 32-bit word
+  RGB_101010x, // pixel with 10 bits each for red, green, blue; in 32-bit word
+  BGR_101010x, // pixel with 10 bits each for blue, green, red; in 32-bit word
+  BGR_101010x_XR, // pixel with 10 bits each for blue, green, red; in 32-bit word, extended range
+  BGRA_10101010_XR, // pixel with 10 bits each for blue, green, red, alpha; in 64-bit word, extended range
+  RGBA_10x6, // pixel with 10 used bits (most significant) followed by 6 unused
+  Gray_8, // pixel with grayscale level in 8-bit byte
+  RGBA_F16Norm, // pixel with half floats in [0,1] for red, green, blue, alpha; in 64-bit word
+  RGBA_F16, // pixel with half floats for red, green, blue, alpha; in 64-bit word
+  RGB_F16F16F16x, // pixel with half floats for red, green, blue; in 64-bit word
+  RGBA_F32, // pixel using C float for red, green, blue, alpha; in 128-bit word
+}

package/src/skia/types/Image/ColorType.web.ts

@@ -0,0 +1,19 @@
+export enum ColorTypeCanvasKit {
+  Unknown, // uninitialized
+  Alpha_8, // pixel with alpha in 8-bit byte
+  RGB_565, // pixel with 5 bits red, 6 bits green, 5 bits blue, in 16-bit word
+  ARGB_4444, // pixel with 4 bits for alpha, red, green, blue; in 16-bit word
+  RGBA_8888, // pixel with 8 bits for red, green, blue, alpha; in 32-bit word
+  RGB_888x, // pixel with 8 bits each for red, green, blue; in 32-bit word
+  BGRA_8888, // pixel with 8 bits for blue, green, red, alpha; in 32-bit word
+  RGBA_1010102, // 10 bits for red, green, blue; 2 bits for alpha; in 32-bit word
+  BGRA_1010102, // 10 bits for blue, green, red; 2 bits for alpha; in 32-bit word
+  RGB_101010x, // pixel with 10 bits each for red, green, blue; in 32-bit word
+  BGR_101010x, // pixel with 10 bits each for blue, green, red; in 32-bit word
+  BGR_101010x_XR, // pixel with 10 bits each for blue, green, red; in 32-bit word, extended range
+  RGBA_10x6, // pixel with 10 used bits (most significant) followed by 6 unused
+  Gray_8, // pixel with grayscale level in 8-bit byte
+  RGBA_F16Norm, // pixel with half floats in [0,1] for red, green, blue, alpha; in 64-bit word
+  RGBA_F16, // pixel with half floats for red, green, blue, alpha; in 64-bit word
+  RGBA_F32, // pixel using C float for red, green, blue, alpha; in 128-bit word
+}

package/src/skia/types/Image/ImageFactory.ts

@@ -1,6 +1,7 @@
 import type { SkData } from "../Data";
 import type { NativeBuffer } from "../NativeBuffer";
 
+import type { ColorType } from "./ColorType";
 import type { SkImage } from "./Image";
 
 export enum AlphaType {
@@ -10,26 +11,6 @@ export enum AlphaType {
   Unpremul,
 }
 
-export enum ColorType {
-  Unknown, // uninitialized
-  Alpha_8, // pixel with alpha in 8-bit byte
-  RGB_565, // pixel with 5 bits red, 6 bits green, 5 bits blue, in 16-bit word
-  ARGB_4444, // pixel with 4 bits for alpha, red, green, blue; in 16-bit word
-  RGBA_8888, // pixel with 8 bits for red, green, blue, alpha; in 32-bit word
-  RGB_888x, // pixel with 8 bits each for red, green, blue; in 32-bit word
-  BGRA_8888, // pixel with 8 bits for blue, green, red, alpha; in 32-bit word
-  RGBA_1010102, // 10 bits for red, green, blue; 2 bits for alpha; in 32-bit word
-  BGRA_1010102, // 10 bits for blue, green, red; 2 bits for alpha; in 32-bit word
-  RGB_101010x, // pixel with 10 bits each for red, green, blue; in 32-bit word
-  BGR_101010x, // pixel with 10 bits each for blue, green, red; in 32-bit word
-  BGR_101010x_XR, // pixel with 10 bits each for blue, green, red; in 32-bit word, extended range
-  RGBA_10x6, // pixel with 10 used bits (most significant) followed by 6 unused
-  Gray_8, // pixel with grayscale level in 8-bit byte
-  RGBA_F16Norm, // pixel with half floats in [0,1] for red, green, blue, alpha; in 64-bit word
-  RGBA_F16, // pixel with half floats for red, green, blue, alpha; in 64-bit word
-  RGBA_F32, // pixel using C float for red, green, blue, alpha; in 128-bit word
-}
-
 export interface ImageInfo {
   alphaType: AlphaType;
   // TODO: add support for color space

package/src/skia/types/Image/index.ts

@@ -1,2 +1,3 @@
 export * from "./Image";
 export * from "./ImageFactory";
+export * from "./ColorType";

package/src/specs/SkiaDomViewNativeComponent.ts

@@ -2,7 +2,6 @@ import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNati
 import type { ViewProps } from "react-native";
 
 export interface NativeProps extends ViewProps {
-  mode: string;
   debug?: boolean;
 }
 

package/src/specs/SkiaPictureViewNativeComponent.ts

@@ -3,6 +3,7 @@ import type { ViewProps } from "react-native";
 
 export interface NativeProps extends ViewProps {
   debug?: boolean;
+  opaque?: boolean;
 }
 
 // eslint-disable-next-line import/no-default-export

package/src/views/SkiaDomView.tsx

@@ -97,12 +97,13 @@ export class SkiaDomView extends React.Component<SkiaDomViewProps> {
   }
 
   render() {
-    const { debug = false, ...viewProps } = this.props;
+    const { debug = false, opaque = false, ...viewProps } = this.props;
     return (
       <NativeSkiaDomView
         collapsable={false}
         nativeID={`${this._nativeId}`}
         debug={debug}
+        opaque={opaque}
         {...viewProps}
       />
     );

package/src/views/SkiaPictureView.tsx

@@ -38,6 +38,7 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
   }
 
   componentDidUpdate(prevProps: SkiaPictureViewProps) {
+    console.log("componentDidUpdate");
     const { picture, onSize } = this.props;
     if (picture !== prevProps.picture) {
       assertSkiaViewApi();
@@ -78,16 +79,18 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
    */
   public redraw() {
     assertSkiaViewApi();
+    console.log("Request redraw: ", this._nativeId);
     SkiaViewApi.requestRedraw(this._nativeId);
   }
 
   render() {
-    const { mode, debug = false, ...viewProps } = this.props;
+    const { mode, debug = false, opaque = false, ...viewProps } = this.props;
     return (
       <NativeSkiaPictureView
         collapsable={false}
         nativeID={`${this._nativeId}`}
         debug={debug}
+        opaque={opaque}
         {...viewProps}
       />
     );

package/src/views/types.ts

@@ -6,6 +6,7 @@ import type { SharedValueType } from "../renderer/processors/Animations/Animatio
 
 export type NativeSkiaViewProps = ViewProps & {
   debug?: boolean;
+  opaque?: boolean;
 };
 
 export interface DrawingInfo {
@@ -32,6 +33,8 @@ export interface SkiaBaseViewProps extends ViewProps {
    * the Skia view is resized.
    */
   onSize?: SharedValueType<SkSize>;
+
+  opaque?: boolean;
 }
 
 export interface SkiaPictureViewNativeProps extends SkiaBaseViewProps {