Update example

Author: wcandillon

example/src/Examples/API/PathEffect.tsx

@@ -7,7 +7,6 @@ import {
   sub,
   Canvas,
   Circle,
-  translate,
   Skia,
   PaintStyle,
   DiscretePathEffect,
@@ -22,6 +21,8 @@ import {
   processTransform2d,
 } from "@shopify/react-native-skia";
 
+import { translate } from "../../components/Animations";
+
 import { Title } from "./components/Title";
 
 const path = Skia.Path.MakeFromSVGString(

example/src/Examples/API/components/drawings/backface.tsx

@@ -5,9 +5,10 @@ import {
   Group,
   Path,
   Rect,
-  translate,
 } from "@shopify/react-native-skia";
 
+import { translate } from "../../../../components/Animations";
+
 const aspectRatio = 757 / 492;
 const center = { x: 492 / 2, y: 757 / 2 };
 export const CARD_WIDTH = 300;

example/src/Examples/Gooey/Gooey.tsx

@@ -5,7 +5,6 @@ import {
   Canvas,
   Fill,
   Skia,
-  translate,
   vec,
   Group,
   PathOp,
@@ -25,6 +24,8 @@ import Animated, {
 } from "react-native-reanimated";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 
+import { translate } from "../../components/Animations";
+
 import { Icon, R } from "./components/Icon";
 import { Hamburger } from "./components/Hamburger";
 import { BG, FG } from "./components/Theme";

example/src/Examples/Neumorphism/Dashboard/components/Button.tsx

@@ -4,12 +4,13 @@ import {
   Group,
   LinearGradient,
   RadialGradient,
-  translate,
   vec,
 } from "@shopify/react-native-skia";
 import type { ReactNode } from "react";
 import React from "react";
 
+import { translate } from "../../../../components/Animations";
+
 export const BUTTON_SIZE = 62;
 const PADDING = 6;
 

example/src/Examples/Neumorphism/Dashboard/components/Control.tsx

@@ -2,7 +2,6 @@ import {
   Shadow,
   vec,
   Group,
-  translate,
   Text,
   Circle,
   LinearGradient,
@@ -38,9 +37,9 @@ export const Control = ({
   if (font === null) {
     return null;
   }
-  const labelWidth = font.getTextWidth(label);
+  const labelWidth = font.measureText(label).width;
   return (
-    <Group transform={translate({ x: x + 30, y: y + 30 })}>
+    <Group transform={[{ translate: [x + 30, y + 30] }]}>
       <Text
         x={2 * r - labelWidth - 16}
         y={r + font.getSize() / 2}
@@ -68,7 +67,7 @@ export const Control = ({
             strokeWidth={1}
           />
         </Group>
-        <Group transform={translate({ x: r / 2, y: r / 2 })}>
+        <Group transform={[{ translate: [r / 2, r / 2] }]}>
           <Group color="rgba(235, 235, 245, 0.6)">
             {active && (
               <LinearGradient

example/src/Examples/Neumorphism/Dashboard/components/ProgressBar.tsx

@@ -4,7 +4,6 @@ import {
   rrect,
   Group,
   LinearGradient,
-  translate,
   Circle,
   Skia,
   vec,
@@ -41,9 +40,9 @@ export const ProgressBar = ({ progress }: ProgressBarProps) => {
   if (font === null) {
     return null;
   }
-  const textWidth = font.getTextWidth("00°C");
+  const textWidth = font.measureText("00°C").width;
   return (
-    <Group transform={translate({ x: 100, y: 223 })}>
+    <Group transform={[{ translate: [100, 223] }]}>
       <Group>
         <LinearGradient
           start={vec(12, 12)}

example/src/Examples/Neumorphism/Dashboard/components/Slider.tsx

@@ -5,7 +5,6 @@ import {
   rrect,
   RoundedRect,
   Group,
-  translate,
   LinearGradient,
   vec,
 } from "@shopify/react-native-skia";
@@ -28,7 +27,7 @@ export const Slider = ({ x, y, progress }: SliderProps) => {
     [progress]
   );
   return (
-    <Group transform={translate({ x, y })}>
+    <Group transform={[{ translate: [x, y] }]}>
       <Box box={rrect(rect(0, 3.5, 192, 8), 25, 25)} color="#1B1B1D">
         <BoxShadow
           dx={-1.25}

example/src/Examples/Stickers/GestureHandler.tsx

@@ -1,5 +1,11 @@
-import type { SkMatrix, SkRect } from "@shopify/react-native-skia";
-import { Skia } from "@shopify/react-native-skia";
+import type { SkRect } from "@shopify/react-native-skia";
+import {
+  Matrix4,
+  multiply4,
+  rotateZ,
+  scale,
+  translate,
+} from "@shopify/react-native-skia";
 import React from "react";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import type { SharedValue } from "react-native-reanimated";
@@ -8,10 +14,21 @@ import Animated, {
   useSharedValue,
 } from "react-native-reanimated";
 
-import { rotateZ, toM4, translate, scale } from "./MatrixHelpers";
+const convertToColumnMajor = (rowMajorMatrix: Matrix4) => {
+  "worklet";
+
+  const colMajorMatrix = new Array(16);
+  const size = 4;
+  for (let row = 0; row < size; row++) {
+    for (let col = 0; col < size; col++) {
+      colMajorMatrix[col * size + row] = rowMajorMatrix[row * size + col];
+    }
+  }
+  return colMajorMatrix;
+};
 
 interface GestureHandlerProps {
-  matrix: SharedValue<SkMatrix>;
+  matrix: SharedValue<Matrix4>;
   dimensions: SkRect;
   debug?: boolean;
 }
@@ -23,30 +40,31 @@ export const GestureHandler = ({
 }: GestureHandlerProps) => {
   const { x, y, width, height } = dimensions;
   const origin = useSharedValue({ x: 0, y: 0 });
-  const offset = useSharedValue(Skia.Matrix());
+  const offset = useSharedValue(Matrix4());
 
   const pan = Gesture.Pan().onChange((e) => {
-    translate(matrix, e.changeX, e.changeY);
+    matrix.value = multiply4(translate(e.changeX, e.changeY), matrix.value);
   });
 
   const rotate = Gesture.Rotation()
     .onBegin((e) => {
       origin.value = { x: e.anchorX, y: e.anchorY };
-      offset.value.identity();
-      offset.value.concat(matrix.value);
+      offset.value = matrix.value;
     })
     .onChange((e) => {
-      rotateZ(matrix, offset.value, e.rotation, origin.value);
+      matrix.value = multiply4(offset.value, rotateZ(e.rotation, origin.value));
     });
 
   const pinch = Gesture.Pinch()
     .onBegin((e) => {
       origin.value = { x: e.focalX, y: e.focalY };
-      offset.value.identity();
-      offset.value.concat(matrix.value);
+      offset.value = matrix.value;
     })
     .onChange((e) => {
-      scale(matrix, offset.value, e.scale, origin.value);
+      matrix.value = multiply4(
+        offset.value,
+        scale(e.scale, e.scale, 1, origin.value)
+      );
     });
 
   const style = useAnimatedStyle(() => {
@@ -61,7 +79,7 @@ export const GestureHandler = ({
         { translateX: -width / 2 },
         { translateY: -height / 2 },
         {
-          matrix: toM4(matrix.value),
+          matrix: convertToColumnMajor(matrix.value),
         },
         { translateX: width / 2 },
         { translateY: height / 2 },

example/src/Examples/Stickers/HelloSticker.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable max-len */
-import type { SkMatrix } from "@shopify/react-native-skia";
+import type { Matrix4 } from "@shopify/react-native-skia";
 import {
   fitbox,
   Group,
@@ -22,7 +22,7 @@ export const HelloStickerDimensions = rect(
   (300 * bounds.height) / bounds.width
 );
 interface HelloStickerProps {
-  matrix: SharedValue<SkMatrix>;
+  matrix: SharedValue<Matrix4>;
 }
 
 export const HelloSticker = ({ matrix }: HelloStickerProps) => {

example/src/Examples/Stickers/LocationSticker.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
 import React from "react";
-import type { SkFont, SkMatrix } from "@shopify/react-native-skia";
+import type { Matrix4, SkFont } from "@shopify/react-native-skia";
 import {
   Skia,
   vec,
@@ -11,8 +11,10 @@ import {
   Path,
   rect,
   Text,
+  toMatrix3,
 } from "@shopify/react-native-skia";
 import type { SharedValue } from "react-native-reanimated";
+import { useDerivedValue } from "react-native-reanimated";
 
 const x = 32;
 const y = 200;
@@ -25,7 +27,7 @@ const path = Skia.Path.MakeFromSVGString(
 const bounds = path.computeTightBounds();
 
 interface LocationStickerProps {
-  matrix: SharedValue<SkMatrix>;
+  matrix: SharedValue<Matrix4>;
   font: SkFont;
 }