@shopify/react-native-skia 0.1.137 → 0.1.140

package/src/renderer/Canvas.tsx

@@ -18,7 +18,6 @@ import ReactReconciler from "react-reconciler";
 
 import { SkiaView, useDrawCallback } from "../views";
 import type { TouchHandler } from "../views";
-import type { SkFontMgr } from "../skia/types";
 import { useValue } from "../values/hooks/useValue";
 import { Skia } from "../skia/Skia";
 
@@ -50,13 +49,10 @@ export interface CanvasProps extends ComponentProps<typeof SkiaView> {
   ref?: RefObject<SkiaView>;
   children: ReactNode;
   onTouch?: TouchHandler;
-  fontMgr?: SkFontMgr;
 }
 
-const defaultFontMgr = Skia.FontMgr.RefDefault();
-
 export const Canvas = forwardRef<SkiaView, CanvasProps>(
-  ({ children, style, debug, mode, onTouch, fontMgr }, forwardedRef) => {
+  ({ children, style, debug, mode, onTouch }, forwardedRef) => {
     const size = useValue({ width: 0, height: 0 });
     const canvasCtx = useMemo(() => ({ Skia, size }), [size]);
     const innerRef = useCanvasRef();
@@ -106,7 +102,6 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
           opacity: 1,
           ref,
           center: Skia.Point(width / 2, height / 2),
-          fontMgr: fontMgr ?? defaultFontMgr,
           Skia,
         };
         container.draw(ctx);
@@ -116,9 +111,11 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
 
     useEffect(() => {
       return () => {
-        container.depMgr.unsubscribe();
+        skiaReconciler.updateContainer(null, root, null, () => {
+          container.depMgr.unsubscribe();
+        });
       };
-    }, [container]);
+    }, [container, root]);
 
     return (
       <SkiaView

package/src/renderer/DrawingContext.ts

@@ -1,7 +1,7 @@
 import type { RefObject } from "react";
 
 import type { DrawingInfo, SkiaView } from "../views";
-import type { SkFontMgr, SkCanvas, SkPaint, Skia, Vector } from "../skia/types";
+import type { SkCanvas, SkPaint, Skia, Vector } from "../skia/types";
 
 export interface DrawingContext extends Omit<DrawingInfo, "touches"> {
   canvas: SkCanvas;
@@ -9,6 +9,5 @@ export interface DrawingContext extends Omit<DrawingInfo, "touches"> {
   opacity: number;
   center: Vector;
   ref: RefObject<SkiaView>;
-  fontMgr: SkFontMgr;
   Skia: Skia;
 }

package/src/renderer/components/text/Glyphs.tsx

@@ -4,7 +4,6 @@ import type { CustomPaintProps, AnimatedProps } from "../../processors";
 import { createDrawing } from "../../nodes/Drawing";
 import type { SkPoint } from "../../../skia/types";
 import type { FontDef } from "../../processors/Font";
-import { processFont } from "../../processors/Font";
 
 export interface Glyph {
   id: number;
@@ -24,11 +23,8 @@ interface ProcessedGlyphs {
 }
 
 const onDraw = createDrawing<GlyphsProps>(
-  (
-    { canvas, paint, fontMgr, Skia },
-    { glyphs: rawGlyphs, x, y, ...fontDef }
-  ) => {
-    const font = processFont(Skia, fontMgr, fontDef);
+  ({ canvas, paint }, { glyphs: rawGlyphs, x, y, ...fontDef }) => {
+    const { font } = fontDef;
     const { glyphs, positions } = rawGlyphs.reduce<ProcessedGlyphs>(
       (acc, glyph) => {
         const { id, pos } = glyph;

package/src/renderer/components/text/Text.tsx

@@ -6,7 +6,6 @@ import type {
   FontDef,
 } from "../../processors";
 import { createDrawing } from "../../nodes/Drawing";
-import { processFont } from "../../processors";
 
 type TextProps = CustomPaintProps &
   FontDef & {
@@ -16,8 +15,8 @@ type TextProps = CustomPaintProps &
   };
 
 const onDraw = createDrawing<TextProps>(
-  ({ canvas, paint, fontMgr, Skia }, { text, x, y, ...fontDef }) => {
-    const font = processFont(Skia, fontMgr, fontDef);
+  ({ canvas, paint }, { text, x, y, ...fontDef }) => {
+    const { font } = fontDef;
     canvas.drawText(text, x, y, paint, font);
   }
 );

package/src/renderer/components/text/TextPath.tsx

@@ -4,7 +4,6 @@ import type { CustomPaintProps, AnimatedProps } from "../../processors";
 import { createDrawing } from "../../nodes";
 import type { SkPath, SkRSXform } from "../../../skia/types";
 import type { FontDef } from "../../processors/Font";
-import { processFont } from "../../processors/Font";
 
 export type TextPathProps = CustomPaintProps &
   FontDef & {
@@ -15,7 +14,7 @@ export type TextPathProps = CustomPaintProps &
 
 const onDraw = createDrawing<TextPathProps>(
   (
-    { canvas, paint, fontMgr, Skia },
+    { canvas, paint, Skia },
     { text, initialOffset, path: pathDef, ...fontDef }
   ) => {
     const path =
@@ -25,7 +24,7 @@ const onDraw = createDrawing<TextPathProps>(
     if (path === null) {
       throw new Error("Invalid path: " + pathDef);
     }
-    const font = processFont(Skia, fontMgr, fontDef);
+    const { font } = fontDef;
     const ids = font.getGlyphIDs(text);
     const widths = font.getGlyphWidths(ids, paint);
     const rsx: SkRSXform[] = [];

package/src/renderer/processors/Font.ts

@@ -1,31 +1,8 @@
-import type { SkFontMgr, SkFont, Skia } from "../../skia/types";
+import type { SkFont } from "../../skia/types";
 
-export type FontDef = { font: SkFont } | { familyName: string; size: number };
+export type FontDef = { font: SkFont };
 
 export const isFont = (fontDef: FontDef): fontDef is { font: SkFont } =>
   // We have an issue to check property existence on JSI backed instances
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (fontDef as any).font !== undefined;
-
-export const processFont = (
-  Skia: Skia,
-  fontMgr: SkFontMgr,
-  fontDef: FontDef
-) => {
-  let selectedFont: SkFont;
-  if (isFont(fontDef)) {
-    selectedFont = fontDef.font;
-  } else {
-    console.warn(
-      // eslint-disable-next-line max-len
-      "Using system fonts is deprecated. Please use the font property instead: https://shopify.github.io/react-native-skia/docs/text/fonts"
-    );
-    const { familyName, size } = fontDef;
-    const typeface = fontMgr.matchFamilyStyle(familyName);
-    if (typeface === null) {
-      throw new Error(`No typeface found for ${familyName}`);
-    }
-    selectedFont = Skia.Font(typeface, size);
-  }
-  return selectedFont;
-};

package/src/skia/core/Data.ts

@@ -37,7 +37,9 @@ const loadData = <T>(
   factory: (data: SkData) => T,
   onError?: (err: Error) => void
 ): Promise<T | null> => {
-  if (source instanceof Uint8Array) {
+  if (source === null) {
+    return new Promise((resolve) => resolve(null));
+  } else if (source instanceof Uint8Array) {
     return new Promise((resolve) =>
       resolve(factoryWrapper(Skia.Data.fromBytes(source), factory, onError))
     );

package/src/skia/core/Image.ts

@@ -3,10 +3,12 @@ import type { DataSource } from "../types";
 
 import { useRawData } from "./Data";
 
+const imgFactory = Skia.Image.MakeImageFromEncoded.bind(Skia.Image);
+
 /**
  * Returns a Skia Image object
  * */
 export const useImage = (
   source: DataSource | null | undefined,
   onError?: (err: Error) => void
-) => useRawData(source, Skia.Image.MakeImageFromEncoded, onError);
+) => useRawData(source, imgFactory, onError);

package/src/skia/core/SVG.ts

@@ -3,7 +3,9 @@ import type { DataSource } from "../types";
 
 import { useRawData } from "./Data";
 
+const svgFactory = Skia.SVG.MakeFromData.bind(Skia.SVG);
+
 export const useSVG = (
   source: DataSource | null | undefined,
   onError?: (err: Error) => void
-) => useRawData(source, Skia.SVG.MakeFromData, onError);
+) => useRawData(source, svgFactory, onError);

package/src/skia/core/Typeface.ts

@@ -2,15 +2,13 @@ import { Skia } from "../Skia";
 import type { DataSource } from "../types";
 
 import { useRawData } from "./Data";
+
+const tfFactory = Skia.Typeface.MakeFreeTypeFaceFromData.bind(Skia.Typeface);
+
 /**
  * Returns a Skia Typeface object
  * */
 export const useTypeface = (
   source: DataSource | null | undefined,
   onError?: (err: Error) => void
-) =>
-  useRawData(
-    source,
-    Skia.Typeface.MakeFreeTypeFaceFromData.bind(Skia.Typeface),
-    onError
-  );
+) => useRawData(source, tfFactory, onError);

package/src/skia/core/index.ts

@@ -4,9 +4,7 @@ export * from "./Typeface";
 export * from "./Image";
 export * from "./Picture";
 export * from "./SVG";
-export * from "./Path";
 export * from "./Vector";
 export * from "./Rect";
 export * from "./RRect";
 export * from "./Matrix";
-export * from "./Paint";

package/src/skia/types/Font/Font.ts

@@ -28,19 +28,6 @@ export interface SkFont extends SkJSIInstance<"Font"> {
    */
   getGlyphWidths(glyphs: number[], paint?: SkPaint): number[];
 
-  /** Returns the advance width of text.
-      The advance is the normal distance to move before drawing additional text.
-      Returns the bounding box of text if bounds is not nullptr. The paint
-      stroke settings, mask filter, or path effect may modify the bounds.
-
-      @param text        character storage encoded with SkTextEncoding
-      @param byteLength  length of character storage in bytes
-      @param bounds      returns bounding box relative to (0, 0) if not nullptr
-      @param paint       optional; may be nullptr
-      @return            number of glyphs represented by text of length byteLength
-  */
-  measureText: (text: string, paint?: SkPaint) => SkRect;
-
   /**
    * Returns the FontMetrics for this font.
    */

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

@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import type { SkData } from "../Data";
 
 import type { SkImage } from "./Image";

package/src/skia/types/Matrix.ts

@@ -9,7 +9,7 @@ export enum MatrixIndex {
   TransY = 5,
   Persp0 = 6,
   Persp1 = 7,
-  persp2 = 8,
+  Persp2 = 8,
 }
 
 export const isMatrix = (obj: unknown): obj is SkMatrix =>

package/src/skia/types/Path/Path.ts

@@ -11,7 +11,6 @@ import type { SkJSIInstance } from "../JsiInstance";
 export interface StrokeOpts {
   /** The width of the stroked lines. */
   width?: number;
-  // eslint-disable-next-line camelcase
   miter_limit?: number;
   /**
    * if > 1, increase precision, else if (0 < resScale < 1) reduce precision to

package/src/skia/types/Skia.ts

@@ -21,7 +21,6 @@ import type { SkVertices, VertexMode } from "./Vertices/Vertices";
 import type { DataFactory } from "./Data";
 import type { SVGFactory } from "./SVG";
 import type { TextBlobFactory } from "./TextBlob";
-import type { FontMgrFactory } from "./FontMgr/FontMgrFactory";
 import type { SurfaceFactory } from "./Surface";
 import type { SkRSXform } from "./RSXform";
 import type { SkPath } from "./Path/Path";
@@ -78,7 +77,6 @@ export interface Skia {
   Data: DataFactory;
   Image: ImageFactory;
   SVG: SVGFactory;
-  FontMgr: FontMgrFactory;
   TextBlob: TextBlobFactory;
   Surface: SurfaceFactory;
 }

package/src/skia/types/Typeface/Typeface.ts

@@ -1,6 +1,3 @@
 import type { SkJSIInstance } from "../JsiInstance";
 
-export interface SkTypeface extends SkJSIInstance<"Typeface"> {
-  readonly bold: boolean;
-  readonly italic: boolean;
-}
+export type SkTypeface = SkJSIInstance<"Typeface">;

package/src/skia/types/index.ts

@@ -2,7 +2,6 @@ export * from "./Picture";
 export * from "./Data";
 export * from "./SVG";
 export * from "./Surface";
-export * from "./FontMgr";
 export * from "./Vertices";
 export * from "./RuntimeEffect";
 export * from "./Shader";

package/src/skia/web/JsiSkFont.ts

@@ -6,7 +6,6 @@ import type {
   SkFont,
   SkPaint,
   SkPoint,
-  SkRect,
   SkTypeface,
 } from "../types";
 
@@ -19,14 +18,6 @@ export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
     super(CanvasKit, ref, "Font");
   }
 
-  measureText(_text: string, _paint?: SkPaint): SkRect {
-    console.warn(
-      `measureText() is deprecated an returns an empty rectangle on React Native Web.
-Clients should use "Font.getGlyphWidths" instead (the latter does no shaping)`
-    );
-    return new JsiSkRect(this.CanvasKit, this.CanvasKit.XYWHRect(0, 0, 0, 0));
-  }
-
   getTextWidth(text: string, paint?: SkPaint | undefined) {
     const ids = this.getGlyphIDs(text);
     const widths = this.getGlyphWidths(ids, paint);

package/src/skia/web/JsiSkTextBlobFactory.ts

@@ -30,7 +30,7 @@ export class JsiSkTextBlobFactory extends Host implements TextBlobFactory {
       this.CanvasKit,
       this.CanvasKit.TextBlob.MakeFromRSXform(
         str,
-        rsxforms.map((f) => toValue(f)),
+        rsxforms.map((f) => Array.from(toValue<Float32Array>(f))).flat(),
         toValue(font)
       )
     );

package/src/skia/web/JsiSkia.ts

@@ -34,7 +34,6 @@ import { JsiSkDataFactory } from "./JsiSkDataFactory";
 import { JsiSkImageFactory } from "./JsiSkImageFactory";
 import { JsiSkSVGFactory } from "./JsiSkSVGFactory";
 import { JsiSkTextBlobFactory } from "./JsiSkTextBlobFactory";
-import { JsiSkFontMgrFactory } from "./JsiSkFontMgrFactory";
 import { JsiSkFont } from "./JsiSkFont";
 import { MakeVertices } from "./JsiSkVerticesFactory";
 
@@ -90,7 +89,6 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   Image: new JsiSkImageFactory(CanvasKit),
   SVG: new JsiSkSVGFactory(CanvasKit),
   TextBlob: new JsiSkTextBlobFactory(CanvasKit),
-  FontMgr: new JsiSkFontMgrFactory(CanvasKit),
   XYWHRect: (x: number, y: number, width: number, height: number) => {
     return new JsiSkRect(CanvasKit, CanvasKit.XYWHRect(x, y, width, height));
   },

package/src/values/hooks/useComputedValue.ts

@@ -16,8 +16,3 @@ export const useComputedValue = <R>(cb: () => R, values: unknown[]) =>
     // eslint-disable-next-line react-hooks/exhaustive-deps
     values
   );
-
-export const useDerivedValue = <R>(cb: () => R, values: unknown[]) => {
-  console.warn("useDerivedValue is deprecated. Use useComputedValue instead.");
-  return useComputedValue(cb, values);
-};

package/src/views/SkiaView.web.tsx

@@ -2,7 +2,7 @@
 import React from "react";
 import type { PointerEvent } from "react";
 import type { LayoutChangeEvent } from "react-native";
-import { View } from "react-native";
+import { PixelRatio, View } from "react-native";
 
 import type { SkRect, SkCanvas } from "../skia/types";
 import type { SkiaValue } from "../values";
@@ -11,13 +11,11 @@ import { JsiSkSurface } from "../skia/web/JsiSkSurface";
 import type { DrawingInfo, DrawMode, SkiaViewProps, TouchInfo } from "./types";
 import { TouchType } from "./types";
 
-export class SkiaView extends React.Component<
-  SkiaViewProps,
-  { width: number; height: number }
-> {
+const pd = PixelRatio.get();
+
+export class SkiaView extends React.Component<SkiaViewProps> {
   constructor(props: SkiaViewProps) {
     super(props);
-    this.state = { width: -1, height: -1 };
     this._mode = props.mode ?? "default";
   }
 
@@ -25,10 +23,12 @@ export class SkiaView extends React.Component<
   private _unsubscriptions: Array<() => void> = [];
   private _touches: Array<TouchInfo> = [];
   private _canvas: SkCanvas | null = null;
-  private _canvasRef: React.RefObject<HTMLCanvasElement> = React.createRef();
+  private _canvasRef = React.createRef<HTMLCanvasElement>();
   private _mode: DrawMode;
   private _redrawRequests = 0;
-  private _unmounted = false;
+  private width = 0;
+  private height = 0;
+  private requestId = 0;
 
   private unsubscribeAll() {
     this._unsubscriptions.forEach((u) => u());
@@ -36,27 +36,23 @@ export class SkiaView extends React.Component<
   }
 
   private onLayout(evt: LayoutChangeEvent) {
-    this.setState(
-      {
-        width: evt.nativeEvent.layout.width,
-        height: evt.nativeEvent.layout.height,
-      },
-      () => {
-        // Reset canvas / surface on layout change
-        if (this._canvasRef.current) {
-          // Create surface
-          this._surface = new JsiSkSurface(
-            global.CanvasKit,
-            global.CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current)!
-          );
-          // Get canvas and repaint
-          if (this._surface) {
-            this._canvas = this._surface.getCanvas();
-            this.redraw();
-          }
-        }
+    const { CanvasKit } = global;
+    const { width, height } = evt.nativeEvent.layout;
+    this.width = width;
+    this.height = height;
+    // Reset canvas / surface on layout change
+    if (this._canvasRef.current) {
+      const canvas = this._canvasRef.current;
+      canvas.width = canvas.clientWidth * pd;
+      canvas.height = canvas.clientHeight * pd;
+      const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);
+      if (!surface) {
+        throw new Error("Could not create surface");
       }
-    );
+      this._surface = new JsiSkSurface(CanvasKit, surface);
+      this._canvas = this._surface.getCanvas();
+      this.redraw();
+    }
   }
 
   componentDidMount() {
@@ -64,11 +60,13 @@ export class SkiaView extends React.Component<
     this.tick();
   }
 
+  componentDidUpdate() {
+    this.redraw();
+  }
+
   componentWillUnmount() {
     this.unsubscribeAll();
-    this._surface = null;
-    this._canvas = null;
-    this._unmounted = true;
+    cancelAnimationFrame(this.requestId);
   }
 
   /**
@@ -86,28 +84,26 @@ export class SkiaView extends React.Component<
   private tick() {
     if (this._mode === "continuous" || this._redrawRequests > 0) {
       this._redrawRequests = 0;
-      if (
-        this._canvas &&
-        this.props.onDraw &&
-        this.state.height !== -1 &&
-        this.state.width !== -1
-      ) {
+      if (this._canvas && this.props.onDraw) {
         const touches = [...this._touches];
         this._touches = [];
         const info: DrawingInfo = {
-          height: this.state.height,
-          width: this.state.width,
+          height: this.height,
+          width: this.width,
           timestamp: Date.now(),
-          touches: [touches],
+          touches: touches.map((t) => [t]),
         };
-        this.props.onDraw && this.props.onDraw(this._canvas!, info);
+        if (this.props.onDraw) {
+          const canvas = this._canvas!;
+          canvas.save();
+          canvas.scale(pd, pd);
+          this.props.onDraw(canvas, info);
+          canvas.restore();
+        }
         this._surface?.ref.flush();
       }
     }
-    // Always request a new redraw as long as we're not unmounted
-    if (!this._unmounted) {
-      requestAnimationFrame(this.tick.bind(this));
-    }
+    this.requestId = requestAnimationFrame(this.tick.bind(this));
   }
 
   public redraw() {
@@ -158,20 +154,8 @@ export class SkiaView extends React.Component<
     this.redraw();
   }
 
-  handleTouchStart(evt: PointerEvent) {
-    this.handleTouchEvent(evt, TouchType.Start);
-  }
-
-  handleTouchMove(evt: PointerEvent) {
-    this.handleTouchEvent(evt, TouchType.Active);
-  }
-
-  handleTouchEnd(evt: PointerEvent) {
-    this.handleTouchEvent(evt, TouchType.Cancelled);
-  }
-
-  handleTouchCancel(evt: PointerEvent) {
-    this.handleTouchEvent(evt, TouchType.End);
+  createTouchHandler(touchType: TouchType) {
+    return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);
   }
 
   render() {
@@ -180,12 +164,13 @@ export class SkiaView extends React.Component<
       <View {...viewProps} onLayout={this.onLayout.bind(this)}>
         <canvas
           ref={this._canvasRef}
-          width={this.state.width}
-          height={this.state.height}
-          onPointerDown={this.handleTouchStart.bind(this)}
-          onPointerMove={this.handleTouchMove.bind(this)}
-          onPointerUp={this.handleTouchEnd.bind(this)}
-          onPointerCancel={this.handleTouchCancel.bind(this)}
+          style={{ display: "flex", flex: 1 }}
+          onPointerDown={this.createTouchHandler(TouchType.Start)}
+          onPointerMove={this.createTouchHandler(TouchType.Active)}
+          onPointerUp={this.createTouchHandler(TouchType.End)}
+          onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}
+          onPointerLeave={this.createTouchHandler(TouchType.End)}
+          onPointerOut={this.createTouchHandler(TouchType.End)}
         />
       </View>
     );

package/src/views/useTouchHandler.ts

@@ -51,13 +51,15 @@ const useInternalTouchHandler = (
               x: distX / timeDiffseconds / PixelRatio.get(),
               y: distY / timeDiffseconds / PixelRatio.get(),
             };
+          } else {
+            prevVelocityRef.current[touch.id] = { x: 0, y: 0 };
           }
         }
 
         const extendedTouchInfo: ExtendedTouchInfo = {
           ...touch,
-          velocityX: prevVelocityRef.current[touch.id]?.x,
-          velocityY: prevVelocityRef.current[touch.id]?.y,
+          velocityX: prevVelocityRef.current[touch.id].x,
+          velocityY: prevVelocityRef.current[touch.id].y,
         };
 
         // Save previous touch

package/src/web/LoadSkiaWeb.tsx

@@ -1,14 +1,20 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error
 import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit";
-import type { CanvasKit as CanvasKitType } from "canvaskit-wasm";
+import type {
+  CanvasKit as CanvasKitType,
+  CanvasKitInitOptions,
+} from "canvaskit-wasm";
 
 declare global {
   var CanvasKit: CanvasKitType;
 }
 
-export const LoadSkiaWeb = async () => {
-  const CanvasKit = await CanvasKitInit();
+export const LoadSkiaWeb = async (opts?: CanvasKitInitOptions) => {
+  if (global.CanvasKit !== undefined) {
+    return;
+  }
+  const CanvasKit = await CanvasKitInit(opts);
   // The CanvasKit API is stored on the global object and used
   // to create the JsiSKApi in the Skia.web.ts file.
   global.CanvasKit = CanvasKit;

package/src/web/WithSkiaWeb.tsx

@@ -5,16 +5,21 @@ import { Platform } from "react-native";
 import { LoadSkiaWeb } from "./LoadSkiaWeb";
 
 interface WithSkiaProps {
-  fallback: ComponentProps<typeof Suspense>["fallback"];
+  fallback?: ComponentProps<typeof Suspense>["fallback"];
   getComponent: () => Promise<{ default: ComponentType }>;
+  opts?: Parameters<typeof LoadSkiaWeb>[0];
 }
 
-export const WithSkiaWeb = ({ getComponent, fallback }: WithSkiaProps) => {
+export const WithSkiaWeb = ({
+  getComponent,
+  fallback,
+  opts,
+}: WithSkiaProps) => {
   const Inner = useMemo(
     () =>
       lazy(async () => {
         if (Platform.OS === "web") {
-          await LoadSkiaWeb();
+          await LoadSkiaWeb(opts);
         } else {
           console.warn(
             "<WithSkiaWeb /> is only necessary on web. Consider not using on native."
@@ -22,10 +27,10 @@ export const WithSkiaWeb = ({ getComponent, fallback }: WithSkiaProps) => {
         }
         return getComponent();
       }),
-    [getComponent]
+    [getComponent, opts]
   );
   return (
-    <Suspense fallback={fallback}>
+    <Suspense fallback={fallback ?? null}>
       <Inner />
     </Suspense>
   );

package/android/README.md

@@ -1,14 +0,0 @@
-README
-======
-
-If you want to publish the lib as a maven dependency, follow these steps before publishing a new version to npm:
-
-1. Be sure to have the Android [SDK](https://developer.android.com/studio/index.html) and [NDK](https://developer.android.com/ndk/guides/index.html) installed
-2. Be sure to have a `local.properties` file in this folder that points to the Android SDK and NDK
-```
-ndk.dir=/Users/{username}/Library/Android/sdk/ndk-bundle
-sdk.dir=/Users/{username}/Library/Android/sdk
-```
-3. Delete the `maven` folder
-4. Run `./gradlew installArchives`
-5. Verify that latest set of generated files is in the maven folder with the correct version number