chore: rebase with latest on margelo/react-native-graph main bran…

…ch (#3) * Update README.md * feat: Support skia v0.1.233 (margelo#96) * feat: Support skia v0.1.233 * feat: Support skia v0.1.233 * chore: release 1.1.0 * Lockfiles * chore: update skia version (#4) * chore: update skia version * fix: fix path interpolation animation --------- Co-authored-by: Marc Rousavy <[email protected]> Co-authored-by: sunrise1002 <[email protected]> Co-authored-by: katharine-river <[email protected]>
katharine-river · Jul 30, 2024 · 5306731 · 5306731
1 parent be30f95
commit 5306731
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 168 deletions.
diff --git a/README.md b/README.md
@@ -193,6 +193,10 @@ See this [example `<SelectionDot />` component](./example/src/components/CustomS
 
 Download the Pink Panda mobile app to see react-native-graph in action!
 
+## Community Discord
+
+[Join the Margelo Community Discord](https://discord.gg/6CSHz2qAvA) to chat about react-native-graph or other Margelo libraries.
+
 ## Adopting at scale
 
 react-native-graph was built at Margelo, an elite app development agency. For enterprise support or other business inquiries, contact us at <a href="mailto:[email protected]?subject=Adopting react-native-graph at scale">[email protected]</a>!

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/example/yarn.lock b/example/yarn.lock
@@ -1349,19 +1349,13 @@
   resolved "https://registry.yarnpkg.com/@react-native/polyfills/-/polyfills-2.0.0.tgz#4c40b74655c83982c8cf47530ee7dc13d957b6aa"
   integrity sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ==
 
-"@shopify/react-native-skia@^0.1.185":
-  version "0.1.188"
-  resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-0.1.188.tgz#b9ea2a6cb8a861628a6b741faaeed353b801ea67"
-  integrity sha512-xy8rdN28XnEGAkiib+CN7FsJRXfRYiUMg7JgNh1CszSTluhYmXHOjINdxt1W2SqgjjuuOI6d92htuobu4yozfw==
-  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"
-    react-reconciler "^0.27.0"
-    ws "^8.11.0"
+"@shopify/react-native-skia@^0.1.233":
+  version "0.1.241"
+  resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-0.1.241.tgz#592471a565f3a7792e03a453eaf922518dd994e5"
+  integrity sha512-jQFJHiNUVONTGPPnL7LIJc3kg6x4PBPh3m7NAJuTxuhB8VOSVlQR3UWd4tDHHJgj7otG3S2dbHD7+bftxM5cFA==
+  dependencies:
+    canvaskit-wasm "0.39.1"
+    react-reconciler "0.27.0"
 
 "@sideway/address@^4.1.3":
   version "4.1.4"
@@ -1433,20 +1427,6 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.30.tgz#2c6e8512acac70815e8176aa30c38025067880ef"
   integrity sha512-oNBIZjIqyHYP8VCNAV9uEytXVeXG2oR0w9lgAXro20eugRQfY002qr3CUl6BAe+Yf/z3CRjPdz27Pu6WWtuSRw==
 
-"@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"
@@ -1471,13 +1451,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"
@@ -1504,6 +1477,11 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@webgpu/[email protected]":
+  version "0.1.21"
+  resolved "https://registry.yarnpkg.com/@webgpu/types/-/types-0.1.21.tgz#b181202daec30d66ccd67264de23814cfd176d3a"
+  integrity sha512-pUrWq3V5PiSGFLeLxoGqReTZmiiXwY3jRkIG5sLLKjyqNxrwm/04b4nw7LSmGWJcKk59XOM/YRTUwOzo4MMlow==
+
 abort-controller@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
@@ -1905,10 +1883,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==
 
-[email protected]:
-  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==
+[email protected]:
+  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@^2.0.0:
   version "2.4.2"
@@ -3893,13 +3873,6 @@ 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"
@@ -3914,11 +3887,6 @@ pkg-up@^3.1.0:
   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==
-
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -4099,7 +4067,7 @@ react-native@^0.71.7:
     whatwg-fetch "^3.0.0"
     ws "^6.2.2"
 
-react-reconciler@^0.27.0:
+[email protected]:
   version "0.27.0"
   resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.27.0.tgz#360124fdf2d76447c7491ee5f0e04503ed9acf5b"
   integrity sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA==
@@ -4974,11 +4942,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==
-
 xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-graph",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "📈 Beautiful, high-performance Graphs and Charts for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -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": "1.3.8",
     "@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",
@@ -142,5 +142,6 @@
         }
       ]
     ]
-  }
+  },
+  "packageManager": "[email protected]+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
 }
diff --git a/src/AnimatedLineGraph.tsx b/src/AnimatedLineGraph.tsx
@@ -17,13 +17,10 @@ import { GestureDetector } from 'react-native-gesture-handler'
 
 import {
   Canvas,
-  runSpring,
   SkPath,
   LinearGradient,
   Path,
   Skia,
-  useValue,
-  useComputedValue,
   vec,
   Group,
   PathCommand,
@@ -81,7 +78,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,
@@ -155,8 +152,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>()
@@ -230,55 +227,51 @@ 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 = 0
+    interpolateProgress.value = withSpring(1, {
+      mass: 1,
+      stiffness: 500,
+      damping: 400,
+      velocity: 0,
+    })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     height,
@@ -314,23 +307,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]