💚

Shopify · Jan 14, 2025 · 7bc6164 · 7bc6164
1 parent 1aa3376
commit 7bc6164
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 61 deletions.
diff --git a/apps/paper/src/Tests/Tests.tsx b/apps/paper/src/Tests/Tests.tsx
@@ -1,11 +1,11 @@
 /* eslint-disable no-eval */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { SkiaDomView } from "@shopify/react-native-skia";
 import {
   Canvas,
   Group,
   makeImageFromView,
   Skia,
+  useCanvasRef,
 } from "@shopify/react-native-skia";
 import React, { useEffect, useRef, useState } from "react";
 import { PixelRatio, Text, View } from "react-native";
@@ -27,7 +27,7 @@ interface TestsProps {
 
 export const Tests = ({ assets }: TestsProps) => {
   const viewRef = useRef<View>(null);
-  const ref = useRef<SkiaDomView>(null);
+  const ref = useCanvasRef();
   const [client, hostname] = useClient();
   const [drawing, setDrawing] = useState<any>(null);
   const [screen, setScreen] = useState<any>(null);

diff --git a/apps/paper/src/components/ExportableCanvas.tsx b/apps/paper/src/components/ExportableCanvas.tsx
@@ -1,10 +1,10 @@
-import type { CanvasProps, SkiaDomView } from "@shopify/react-native-skia";
-import { ImageFormat, Canvas } from "@shopify/react-native-skia";
-import React, { useCallback, useRef } from "react";
+import type { CanvasProps } from "@shopify/react-native-skia";
+import { ImageFormat, Canvas, useCanvasRef } from "@shopify/react-native-skia";
+import React, { useCallback } from "react";
 import { Alert, Pressable, Share } from "react-native";
 
 export const ExportableCanvas = ({ children, style }: CanvasProps) => {
-  const ref = useRef<SkiaDomView>(null);
+  const ref = useCanvasRef();
 
   const handleShare = useCallback(() => {
     const image = ref.current?.makeImageSnapshot();

diff --git a/packages/skia/src/sksg/Elements.tsx b/packages/skia/src/sksg/Elements.tsx
@@ -1,57 +1,58 @@
-import { 
-    FractalNoiseProps,
-    CircleProps,
-    DrawingNodeProps,
-    ImageProps,
-    PaintProps,
-    PathProps,
-    LineProps,
-    OvalProps,
-    DiffRectProps,
-    PointsProps,
-    RectProps,
-    RoundedRectProps,
-    TextProps,
-    VerticesProps,
-    BlurMaskFilterProps,
-    BlendImageFilterProps,
-    BlurImageFilterProps,
-    DisplacementMapImageFilterProps,
-    DropShadowImageFilterProps,
-    OffsetImageFilterProps,
-    RuntimeShaderImageFilterProps,
-    MatrixColorFilterProps,
-    ShaderProps,
-    ImageShaderProps,
-    LinearGradientProps,
-    GroupProps,
-    PatchProps,
-    BlendColorFilterProps,
-    DashPathEffectProps,
-    DiscretePathEffectProps,
-    CornerPathEffectProps,
-    Line2DPathEffectProps,
-    Path1DPathEffectProps,
-    Path2DPathEffectProps,
-    TextPathProps,
-    TextBlobProps,
-    GlyphsProps,
-    TwoPointConicalGradientProps,
-    TurbulenceProps,
-    SweepGradientProps,
-    RadialGradientProps,
-    ColorProps,
-    PictureProps,
-    ImageSVGProps,
-    LerpColorFilterProps,
-    BoxProps,
-    BoxShadowProps,
-    ParagraphProps,
-    AtlasProps,
-    ChildrenProps,
-    MorphologyImageFilterProps,
-    BlendProps, } from "../dom/types";
-import { SkiaProps } from "../renderer";
+import type {
+  FractalNoiseProps,
+  CircleProps,
+  DrawingNodeProps,
+  ImageProps,
+  PaintProps,
+  PathProps,
+  LineProps,
+  OvalProps,
+  DiffRectProps,
+  PointsProps,
+  RectProps,
+  RoundedRectProps,
+  TextProps,
+  VerticesProps,
+  BlurMaskFilterProps,
+  BlendImageFilterProps,
+  BlurImageFilterProps,
+  DisplacementMapImageFilterProps,
+  DropShadowImageFilterProps,
+  OffsetImageFilterProps,
+  RuntimeShaderImageFilterProps,
+  MatrixColorFilterProps,
+  ShaderProps,
+  ImageShaderProps,
+  LinearGradientProps,
+  GroupProps,
+  PatchProps,
+  BlendColorFilterProps,
+  DashPathEffectProps,
+  DiscretePathEffectProps,
+  CornerPathEffectProps,
+  Line2DPathEffectProps,
+  Path1DPathEffectProps,
+  Path2DPathEffectProps,
+  TextPathProps,
+  TextBlobProps,
+  GlyphsProps,
+  TwoPointConicalGradientProps,
+  TurbulenceProps,
+  SweepGradientProps,
+  RadialGradientProps,
+  ColorProps,
+  PictureProps,
+  ImageSVGProps,
+  LerpColorFilterProps,
+  BoxProps,
+  BoxShadowProps,
+  ParagraphProps,
+  AtlasProps,
+  ChildrenProps,
+  MorphologyImageFilterProps,
+  BlendProps,
+} from "../dom/types";
+import type { SkiaProps } from "../renderer";
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
@@ -132,4 +133,4 @@ declare global {
       skParagraph: SkiaProps<ParagraphProps>;
     }
   }
-}
+}