feat: Support skia v0.1.233 (#96)

* feat: Support skia v0.1.233 * feat: Support skia v0.1.233
margelo · Mar 11, 2024 · d38c205 · d38c205
1 parent 78d180e
commit d38c205
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 108 deletions.
diff --git a/example/package.json b/example/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@react-native-segmented-control/segmented-control": "^2.4.0",
-    "@shopify/react-native-skia": "^0.1.185",
+    "@shopify/react-native-skia": "^0.1.233",
     "@types/gaussian": "^1.2.0",
     "gaussian": "^1.2.0",
     "react": "^18.2.0",

diff --git a/example/src/components/CustomSelectionDot.tsx b/example/src/components/CustomSelectionDot.tsx
@@ -16,8 +16,13 @@
  * shadow from the default one to make it more flat.
  */
 import React, { useCallback } from 'react'
-import { runOnJS, useAnimatedReaction } from 'react-native-reanimated'
-import { runSpring, useValue, Circle } from '@shopify/react-native-skia'
+import {
+  runOnJS,
+  useAnimatedReaction,
+  withSpring,
+  useSharedValue,
+} from 'react-native-reanimated'
+import { Circle } from '@shopify/react-native-skia'
 import type { SelectionDotProps } from 'react-native-graph'
 
 export function SelectionDot({
@@ -26,11 +31,11 @@ export function SelectionDot({
   circleX,
   circleY,
 }: SelectionDotProps): React.ReactElement {
-  const circleRadius = useValue(0)
+  const circleRadius = useSharedValue(0)
 
   const setIsActive = useCallback(
     (active: boolean) => {
-      runSpring(circleRadius, active ? 5 : 0, {
+      circleRadius.value = withSpring(active ? 5 : 0, {
         mass: 1,
         stiffness: 1000,
         damping: 50,

diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
   "devDependencies": {
     "@react-native-community/eslint-config": "^2.0.0",
     "@release-it/conventional-changelog": "^2.0.0",
-    "@shopify/react-native-skia": "^0.1.185",
+    "@shopify/react-native-skia": "^0.1.233",
     "@types/react": "^17.0.42",
     "@types/react-native": "^0.67.4",
     "eslint": "^7.2.0",
@@ -74,7 +74,7 @@
     "typescript": "^4.4.3"
   },
   "peerDependencies": {
-    "@shopify/react-native-skia": ">=0.1.185",
+    "@shopify/react-native-skia": ">=0.1.233",
     "react": ">=18",
     "react-native": ">=0.69",
     "react-native-gesture-handler": ">=2",

diff --git a/src/AnimatedLineGraph.tsx b/src/AnimatedLineGraph.tsx
@@ -16,13 +16,10 @@ import { GestureDetector } from 'react-native-gesture-handler'
 
 import {
   Canvas,
-  runSpring,
   SkPath,
   LinearGradient,
   Path,
   Skia,
-  useValue,
-  useComputedValue,
   vec,
   Group,
   PathCommand,
@@ -78,7 +75,7 @@ export function AnimatedLineGraph({
 }: AnimatedLineGraphProps): React.ReactElement {
   const [width, setWidth] = useState(0)
   const [height, setHeight] = useState(0)
-  const interpolateProgress = useValue(0)
+  const interpolateProgress = useSharedValue(0)
 
   const { gesture, isActive, x } = usePanGesture({
     enabled: enablePanGesture,
@@ -139,8 +136,8 @@ export function AnimatedLineGraph({
     return path
   }, [height, width])
 
-  const paths = useValue<{ from?: SkPath; to?: SkPath }>({})
-  const gradientPaths = useValue<{ from?: SkPath; to?: SkPath }>({})
+  const paths = useSharedValue<{ from?: SkPath; to?: SkPath }>({})
+  const gradientPaths = useSharedValue<{ from?: SkPath; to?: SkPath }>({})
   const commands = useSharedValue<PathCommand[]>([])
   const [commandsChanged, setCommandsChanged] = useState(0)
   const pointSelectedIndex = useRef<number>()
@@ -214,55 +211,50 @@ export function AnimatedLineGraph({
     commands.value = path.toCmds()
 
     if (gradientPath != null) {
-      const previous = gradientPaths.current
+      const previous = gradientPaths.value
       let from: SkPath = previous.to ?? straightLine
-      if (previous.from != null && interpolateProgress.current < 1)
+      if (previous.from != null && interpolateProgress.value < 1)
         from =
-          from.interpolate(previous.from, interpolateProgress.current) ?? from
+          from.interpolate(previous.from, interpolateProgress.value) ?? from
 
       if (gradientPath.isInterpolatable(from)) {
-        gradientPaths.current = {
+        gradientPaths.value = {
           from,
           to: gradientPath,
         }
       } else {
-        gradientPaths.current = {
+        gradientPaths.value = {
           from: gradientPath,
           to: gradientPath,
         }
       }
     }
 
-    const previous = paths.current
+    const previous = paths.value
     let from: SkPath = previous.to ?? straightLine
-    if (previous.from != null && interpolateProgress.current < 1)
-      from =
-        from.interpolate(previous.from, interpolateProgress.current) ?? from
+    if (previous.from != null && interpolateProgress.value < 1)
+      from = from.interpolate(previous.from, interpolateProgress.value) ?? from
 
     if (path.isInterpolatable(from)) {
-      paths.current = {
+      paths.value = {
         from,
         to: path,
       }
     } else {
-      paths.current = {
+      paths.value = {
         from: path,
         to: path,
       }
     }
 
     setCommandsChanged(commandsChanged + 1)
 
-    runSpring(
-      interpolateProgress,
-      { from: 0, to: 1 },
-      {
-        mass: 1,
-        stiffness: 500,
-        damping: 400,
-        velocity: 0,
-      }
-    )
+    interpolateProgress.value = withSpring(1, {
+      mass: 1,
+      stiffness: 500,
+      damping: 400,
+      velocity: 0,
+    })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     height,
@@ -298,23 +290,23 @@ export function AnimatedLineGraph({
     ]
   }, [color, enableFadeInMask])
 
-  const path = useComputedValue(
+  const path = useDerivedValue(
     () => {
-      const from = paths.current.from ?? straightLine
-      const to = paths.current.to ?? straightLine
+      const from = paths.value.from ?? straightLine
+      const to = paths.value.to ?? straightLine
 
-      return to.interpolate(from, interpolateProgress.current)
+      return to.interpolate(from, interpolateProgress.value)
     },
     // RN Skia deals with deps differently. They are actually the required SkiaValues that the derived value listens to, not react values.
     [interpolateProgress]
   )
 
-  const gradientPath = useComputedValue(
+  const gradientPath = useDerivedValue(
     () => {
-      const from = gradientPaths.current.from ?? straightLine
-      const to = gradientPaths.current.to ?? straightLine
+      const from = gradientPaths.value.from ?? straightLine
+      const to = gradientPaths.value.to ?? straightLine
 
-      return to.interpolate(from, interpolateProgress.current)
+      return to.interpolate(from, interpolateProgress.value)
     },
     // RN Skia deals with deps differently. They are actually the required SkiaValues that the derived value listens to, not react values.
     [interpolateProgress]

diff --git a/src/SelectionDot.tsx b/src/SelectionDot.tsx
@@ -1,13 +1,12 @@
 import React, { useCallback } from 'react'
-import { runOnJS, useAnimatedReaction } from 'react-native-reanimated'
 import {
-  runSpring,
-  useValue,
-  useComputedValue,
-  Circle,
-  Group,
-  Shadow,
-} from '@shopify/react-native-skia'
+  runOnJS,
+  useAnimatedReaction,
+  useSharedValue,
+  withSpring,
+  useDerivedValue,
+} from 'react-native-reanimated'
+import { Circle, Group, Shadow } from '@shopify/react-native-skia'
 import type { SelectionDotProps } from './LineGraphProps'
 
 export const CIRCLE_RADIUS = 5
@@ -19,15 +18,15 @@ export function SelectionDot({
   circleX,
   circleY,
 }: SelectionDotProps): React.ReactElement {
-  const circleRadius = useValue(0)
-  const circleStrokeRadius = useComputedValue(
-    () => circleRadius.current * CIRCLE_RADIUS_MULTIPLIER,
+  const circleRadius = useSharedValue(0)
+  const circleStrokeRadius = useDerivedValue(
+    () => circleRadius.value * CIRCLE_RADIUS_MULTIPLIER,
     [circleRadius]
   )
 
   const setIsActive = useCallback(
     (active: boolean) => {
-      runSpring(circleRadius, active ? CIRCLE_RADIUS : 0, {
+      circleRadius.value = withSpring(active ? CIRCLE_RADIUS : 0, {
         mass: 1,
         stiffness: 1000,
         damping: 50,

diff --git a/yarn.lock b/yarn.lock
@@ -1988,19 +1988,13 @@
     conventional-recommended-bump "^6.1.0"
     prepend-file "^2.0.0"
 
-"@shopify/react-native-skia@^0.1.185":
-  version "0.1.185"
-  resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-0.1.185.tgz#ded3478bf4a7d380f3c64bf6b3f8ebbf4e8ecd21"
-  integrity sha512-RD/huxWgRRjZCHaJcpDiOHQ17tUWO2d/XDv59irpwEfWJRi4UNpxOhPvKso9uwt+MlXJnExJbItNt8e7/m/5GQ==
-  dependencies:
-    "@types/pixelmatch" "^5.2.4"
-    "@types/pngjs" "^6.0.1"
-    "@types/ws" "^8.5.3"
-    canvaskit-wasm "0.38.0"
-    pixelmatch "^5.3.0"
-    pngjs "^6.0.0"
+"@shopify/react-native-skia@^0.1.233":
+  version "0.1.233"
+  resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-0.1.233.tgz#2312cf037bb505d3963f64825ab334c085c0a9ee"
+  integrity sha512-UKWg9+ygXg77FCM9nC9Amxum8+xlXHMd3ihkm115s5hUHFepeNd1N9ynJBnO/ErgSDccavvpZaqOsQOkKiqJsg==
+  dependencies:
+    canvaskit-wasm "0.39.1"
     react-reconciler "^0.27.0"
-    ws "^8.11.0"
 
 "@sideway/address@^4.1.3":
   version "4.1.4"
@@ -2104,20 +2098,6 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
-"@types/pixelmatch@^5.2.4":
-  version "5.2.4"
-  resolved "https://registry.yarnpkg.com/@types/pixelmatch/-/pixelmatch-5.2.4.tgz#ca145cc5ede1388c71c68edf2d1f5190e5ddd0f6"
-  integrity sha512-HDaSHIAv9kwpMN7zlmwfTv6gax0PiporJOipcrGsVNF3Ba+kryOZc0Pio5pn6NhisgWr7TaajlPEKTbTAypIBQ==
-  dependencies:
-    "@types/node" "*"
-
-"@types/pngjs@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/@types/pngjs/-/pngjs-6.0.1.tgz#c711ec3fbbf077fed274ecccaf85dd4673130072"
-  integrity sha512-J39njbdW1U/6YyVXvC9+1iflZghP8jgRf2ndYghdJb5xL49LYDB+1EuAxfbuJ2IBbWIL3AjHPQhgaTxT3YaYeg==
-  dependencies:
-    "@types/node" "*"
-
 "@types/prop-types@*":
   version "15.7.5"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
@@ -2158,13 +2138,6 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
   integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
 
-"@types/ws@^8.5.3":
-  version "8.5.4"
-  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.4.tgz#bb10e36116d6e570dd943735f86c933c1587b8a5"
-  integrity sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==
-  dependencies:
-    "@types/node" "*"
-
 "@types/yargs-parser@*":
   version "21.0.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.0.tgz#0c60e537fa790f5f9472ed2776c2b71ec117351b"
@@ -2251,6 +2224,11 @@
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
+"@webgpu/types@0.1.21":
+  version "0.1.21"
+  resolved "https://registry.yarnpkg.com/@webgpu/types/-/types-0.1.21.tgz#b181202daec30d66ccd67264de23814cfd176d3a"
+  integrity sha512-pUrWq3V5PiSGFLeLxoGqReTZmiiXwY3jRkIG5sLLKjyqNxrwm/04b4nw7LSmGWJcKk59XOM/YRTUwOzo4MMlow==
+
 JSONStream@^1.0.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
@@ -2838,10 +2816,12 @@ caniuse-lite@^1.0.30001449:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001486.tgz#56a08885228edf62cbe1ac8980f2b5dae159997e"
   integrity sha512-uv7/gXuHi10Whlj0pp5q/tsK/32J2QSqVRKQhs2j8VsDCjgyruAh/eEXHF822VqO9yT6iZKw3nRwZRSPBE9OQg==
 
-canvaskit-wasm@0.38.0:
-  version "0.38.0"
-  resolved "https://registry.yarnpkg.com/canvaskit-wasm/-/canvaskit-wasm-0.38.0.tgz#83e6c46f3015c2ff3f6503157f47453af76a7be7"
-  integrity sha512-ZEG6lucpbQ4Ld+mY8C1Ng+PMLVP+/AX02jS0Sdl28NyMxuKSa9uKB8oGd1BYp1XWPyO2Jgr7U8pdyjJ/F3xR5Q==
+canvaskit-wasm@0.39.1:
+  version "0.39.1"
+  resolved "https://registry.yarnpkg.com/canvaskit-wasm/-/canvaskit-wasm-0.39.1.tgz#c3c8f3962cbabbedf246f7bcf90e859013c7eae9"
+  integrity sha512-Gy3lCmhUdKq+8bvDrs9t8+qf7RvcjuQn+we7vTVVyqgOVO1UVfHpsnBxkTZw+R4ApEJ3D5fKySl9TU11hmjl/A==
+  dependencies:
+    "@webgpu/types" "0.1.21"
 
 chalk@4.1.2, chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1, chalk@^4.1.2:
   version "4.1.2"
@@ -6570,25 +6550,13 @@ pirates@^4.0.5:
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b"
   integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==
 
-pixelmatch@^5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/pixelmatch/-/pixelmatch-5.3.0.tgz#5e5321a7abedfb7962d60dbf345deda87cb9560a"
-  integrity sha512-o8mkY4E/+LNUf6LzX96ht6k6CEDi65k9G2rjMtBe9Oo+VPKSvl+0GKHuH/AlG+GA5LPG/i5hrekkxUc3s2HU+Q==
-  dependencies:
-    pngjs "^6.0.0"
-
 pkg-dir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
   integrity sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==
   dependencies:
     find-up "^3.0.0"
 
-pngjs@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-6.0.0.tgz#ca9e5d2aa48db0228a52c419c3308e87720da821"
-  integrity sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg==
-
 pod-install@^0.1.0:
   version "0.1.35"
   resolved "https://registry.yarnpkg.com/pod-install/-/pod-install-0.1.35.tgz#afb1f8265cd958b661f23f8524ea20d8541d354a"
@@ -8402,11 +8370,6 @@ ws@^7.5.1:
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
   integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
 
-ws@^8.11.0:
-  version "8.13.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0"
-  integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==
-
 xdg-basedir@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-4.0.0.tgz#4bc8d9984403696225ef83a1573cbbcb4e79db13"