feat: update react-native-skia to 0.1.136 (margelo#31)

* feat: update react-native-skia to 0.1.136

* fix: from type

* fix: pan selectCurve gesture

* fix: from type

example/ios/Podfile.lock

@@ -211,32 +211,32 @@ PODS:
     - glog
   - react-native-segmented-control (2.4.0):
     - React-Core
-  - react-native-skia (0.1.123):
+  - react-native-skia (0.1.136):
     - React
     - React-callinvoker
     - React-Core
-    - react-native-skia/Api (= 0.1.123)
-    - react-native-skia/Jsi (= 0.1.123)
-    - react-native-skia/RNSkia (= 0.1.123)
-    - react-native-skia/SkiaHeaders (= 0.1.123)
-    - react-native-skia/Utils (= 0.1.123)
-  - react-native-skia/Api (0.1.123):
+    - react-native-skia/Api (= 0.1.136)
+    - react-native-skia/Jsi (= 0.1.136)
+    - react-native-skia/RNSkia (= 0.1.136)
+    - react-native-skia/SkiaHeaders (= 0.1.136)
+    - react-native-skia/Utils (= 0.1.136)
+  - react-native-skia/Api (0.1.136):
     - React
     - React-callinvoker
     - React-Core
-  - react-native-skia/Jsi (0.1.123):
+  - react-native-skia/Jsi (0.1.136):
     - React
     - React-callinvoker
     - React-Core
-  - react-native-skia/RNSkia (0.1.123):
+  - react-native-skia/RNSkia (0.1.136):
     - React
     - React-callinvoker
     - React-Core
-  - react-native-skia/SkiaHeaders (0.1.123):
+  - react-native-skia/SkiaHeaders (0.1.136):
     - React
     - React-callinvoker
     - React-Core
-  - react-native-skia/Utils (0.1.123):
+  - react-native-skia/Utils (0.1.136):
     - React
     - React-callinvoker
     - React-Core
@@ -305,11 +305,11 @@ PODS:
     - React-jsi (= 0.67.4)
     - React-logger (= 0.67.4)
     - React-perflogger (= 0.67.4)
-  - RNGestureHandler (2.4.1):
+  - RNGestureHandler (2.5.0):
     - React-Core
   - RNReactNativeHapticFeedback (1.13.1):
     - React-Core
-  - RNReanimated (2.8.0):
+  - RNReanimated (2.9.1):
     - DoubleConversion
     - FBLazyVector
     - FBReactNativeSpec
@@ -478,7 +478,7 @@ SPEC CHECKSUMS:
   React-jsinspector: f4775ea9118cbe1f72b834f0f842baa7a99508d8
   React-logger: a1f028f6d8639a3f364ef80419e5e862e1115250
   react-native-segmented-control: 06607462630512ff8eef652ec560e6235a30cc3e
-  react-native-skia: 8a3e1b513020e2c9b0b4e49404f396d2a88f9ac7
+  react-native-skia: 7f1c17bb3ed15c951305d6c924df917899d21613
   React-perflogger: 0afaf2f01a47fd0fc368a93bfbb5bd3b26db6e7f
   React-RCTActionSheet: 59f35c4029e0b532fc42114241a06e170b7431a2
   React-RCTAnimation: aae4f4bed122e78bdab72f7118d291d70a932ce2
@@ -491,9 +491,9 @@ SPEC CHECKSUMS:
   React-RCTVibration: 3b52a7dced19cdb025b4f88ab26ceb2d85f30ba2
   React-runtimeexecutor: a9d3c82ddf7ffdad9fbe6a81c6d6f8c06385464d
   ReactCommon: 07d0c460b9ba9af3eaf1b8f5abe7daaad28c9c4e
-  RNGestureHandler: 4f4986408310a43f1606c391f38f76e0d6e790d5
+  RNGestureHandler: bad495418bcbd3ab47017a38d93d290ebd406f50
   RNReactNativeHapticFeedback: 4085973f5a38b40d3c6793a3ee5724773eae045e
-  RNReanimated: 46cdb89ca59ab7181334f4ed05a70e82ddb36751
+  RNReanimated: b5b17149593e7c05e4ec5c0efea1f21e05829510
   RNStaticSafeAreaInsets: 6103cf09647fa427186d30f67b0f5163c1ae8252
   Yoga: d6b6a80659aa3e91aaba01d0012e7edcbedcbecd
 

example/package.json

@@ -10,15 +10,15 @@
   },
   "dependencies": {
     "@react-native-segmented-control/segmented-control": "^2.4.0",
-    "@shopify/react-native-skia": "^0.1.123",
+    "@shopify/react-native-skia": "^0.1.136",
     "@types/gaussian": "^1.2.0",
     "gaussian": "^1.2.0",
     "react": "^17.0.2",
     "react-native": "^0.67.4",
-    "react-native-gesture-handler": "^2.4.1",
+    "react-native-gesture-handler": "^2.5.0",
     "react-native-haptic-feedback": "^1.13.1",
     "react-native-pressable-scale": "^1.0.6",
-    "react-native-reanimated": "^2.8.0",
+    "react-native-reanimated": "^2.9.1",
     "react-native-static-safe-area-insets": "^2.1.1"
   },
   "devDependencies": {

example/yarn.lock

@@ -181,6 +181,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
   integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
 
+"@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.8.3":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.6.tgz#9448974dd4fb1d80fefe72e8a0af37809cd30d6d"
+  integrity sha512-gvZnm1YAAxh13eJdkb9EWHBnF3eAub3XTLCZEehHT2kWxiKVRL64+ae5Y6Ivne0mVHmMYKT+xWgZO+gQhuLUBg==
+
 "@babel/helper-remap-async-to-generator@^7.16.8":
   version "7.16.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.8.tgz#29ffaade68a367e2ed09c90901986918d25e57e3"
@@ -281,6 +286,14 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-export-default-from" "^7.16.7"
 
+"@babel/plugin-proposal-export-namespace-from@^7.17.12":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.6.tgz#1016f0aa5ab383bbf8b3a85a2dcaedf6c8ee7491"
+  integrity sha512-zr/QcUlUo7GPo6+X1wC98NJADqmy5QTFWWhqeQWiki4XHafJtLl/YMGkmRB2szDD2IYJCCdBTd4ElwhId9T7Xw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+
 "@babel/plugin-proposal-nullish-coalescing-operator@^7.0.0", "@babel/plugin-proposal-nullish-coalescing-operator@^7.1.0":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.16.7.tgz#141fc20b6857e59459d430c850a0011e36561d99"
@@ -338,6 +351,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-syntax-export-namespace-from@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz#028964a9ba80dbc094c915c487ad7c4e7a66465a"
+  integrity sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-syntax-flow@^7.0.0", "@babel/plugin-syntax-flow@^7.16.7", "@babel/plugin-syntax-flow@^7.2.0":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.16.7.tgz#202b147e5892b8452bbb0bb269c7ed2539ab8832"
@@ -940,11 +960,12 @@
   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.123":
-  version "0.1.123"
-  resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-0.1.123.tgz#eaaf886cf1ca3b49f4ba79b826cd4b8f803b933e"
-  integrity sha512-Yn9nHYRuTz84eCbHbpTi8VbP33tQc1D6rDQNEj7fgV6aPusaN79XjnnxtPsZsO+nLlbkpI3q1x+2Ds3Qu1I8ZA==
+"@shopify/react-native-skia@^0.1.136":
+  version "0.1.136"
+  resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-0.1.136.tgz#cb399cd1216dfc14ad3cca226e6d0450b1e7ab7c"
+  integrity sha512-gNsBw9/ISNL7tAHdfhjeW3Y9/FPN93mPx4XSJS7xwbEgYaJdBP+1T1MyCCZZZTTcqJ6bCVp9FFUR6yo0u93Pgg==
   dependencies:
+    canvaskit-wasm "^0.35.0"
     react-reconciler "^0.26.2"
 
 "@sideway/address@^4.1.3":
@@ -1064,6 +1085,11 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@webgpu/types@^0.1.20":
+  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"
@@ -1467,6 +1493,13 @@ caniuse-lite@^1.0.30001332:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001334.tgz#892e9965b35285033fc2b8a8eff499fe02f13d8b"
   integrity sha512-kbaCEBRRVSoeNs74sCuq92MJyGrMtjWVfhltoHUCW4t4pXFvGjUBrfo47weBRViHkiV3eBYyIsfl956NtHGazw==
 
+canvaskit-wasm@^0.35.0:
+  version "0.35.0"
+  resolved "https://registry.yarnpkg.com/canvaskit-wasm/-/canvaskit-wasm-0.35.0.tgz#90afc625958367f4a27907fb8c03240045933a46"
+  integrity sha512-y/eTJ4xoIBkKzD37aQAvBL451LIp9YiB8Vs1e8J3Qwe7WcTHsAD00E5WocPzZo+0+XaSCkJ6cS/BxBDXTSnW1g==
+  dependencies:
+    "@webgpu/types" "^0.1.20"
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -3470,10 +3503,10 @@ react-native-codegen@^0.0.8:
     jscodeshift "^0.11.0"
     nullthrows "^1.1.1"
 
-react-native-gesture-handler@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.4.1.tgz#f4cb1784b6dcdf41ae35b4fff6022ec21038e2cd"
-  integrity sha512-qJHkZAWyuvZvEm8jV6TsYKeTgkYmoNsKrO/CEx0YaisAcHSiaiMx2Dy/0/QQ7oZr3t5aL4rJqWtOEZCADNbfeQ==
+react-native-gesture-handler@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.5.0.tgz#61385583570ed0a45a9ed142425e35f8fe8274fb"
+  integrity sha512-djZdcprFf08PZC332D+AeG5wcGeAPhzfCJtB3otUgOgTlvjVXmg/SLFdPJSpzLBqkRAmrC77tM79QgKbuLxkfw==
   dependencies:
     "@egjs/hammerjs" "^2.0.17"
     hoist-non-react-statics "^3.3.0"
@@ -3491,11 +3524,12 @@ react-native-pressable-scale@^1.0.6:
   resolved "https://registry.yarnpkg.com/react-native-pressable-scale/-/react-native-pressable-scale-1.0.6.tgz#4a1c449dec813bc1d688a79600f0da4a2e7eafa8"
   integrity sha512-rs8g2PBSpnxVI3hz2QqdT8kmau4aLJ8x7VcNII+YLQ5FgY7S+God0FeB7M9LVurHMoijraaqdB/XfhklcoBMCA==
 
-react-native-reanimated@^2.8.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.8.0.tgz#93c06ca84d91fb3865110b0857c49a24e316130e"
-  integrity sha512-kJvf/UWLBMaGCs9X66MKq5zdFMgwx8D0nHnolbHR7s8ZnbLdb7TlQ/yuzIXqn/9wABfnwtNRI3CyaP1aHWMmZg==
+react-native-reanimated@^2.9.1:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.9.1.tgz#d9a932e312c13c05b4f919e43ebbf76d996e0bc1"
+  integrity sha512-309SIhDBwY4F1n6e5Mr5D1uPZm2ESIcmZsGXHUu8hpKX4oIOlZj2MilTk+kHhi05LjChoJkcpfkstotCJmPRPg==
   dependencies:
+    "@babel/plugin-proposal-export-namespace-from" "^7.17.12"
     "@babel/plugin-transform-object-assign" "^7.16.7"
     "@babel/preset-typescript" "^7.16.7"
     "@types/invariant" "^2.2.35"

package.json

@@ -69,9 +69,9 @@
     "react-native-builder-bob": "^0.18.0",
     "release-it": "^14.2.2",
     "typescript": "^4.4.3",
-    "react-native-gesture-handler": "^2.4.1",
-    "react-native-reanimated": "^2.8.0",
-    "@shopify/react-native-skia": "^0.1.123"
+    "react-native-gesture-handler": "^2.5.0",
+    "react-native-reanimated": "^2.9.1",
+    "@shopify/react-native-skia": "^0.1.136"
   },
   "peerDependencies": {
     "react": "*",

src/AnimatedLineGraph.tsx

@@ -8,7 +8,7 @@ import {
   Path,
   Skia,
   useValue,
-  useDerivedValue,
+  useComputedValue,
   vec,
   Circle,
   Group,
@@ -91,7 +91,8 @@ export function AnimatedLineGraph({
     const previous = paths.current
     let from: SkPath = previous.to ?? straightLine
     if (previous.from != null && interpolateProgress.current < 1)
-      from = from.interpolate(previous.from, interpolateProgress.current)
+      from =
+        from.interpolate(previous.from, interpolateProgress.current) ?? from
 
     if (path.isInterpolatable(from)) {
       paths.current = {
@@ -146,7 +147,7 @@ export function AnimatedLineGraph({
     }
   }, [color, enableFadeInMask])
 
-  const path = useDerivedValue(
+  const path = useComputedValue(
     () => {
       const from = paths.current.from ?? straightLine
       const to = paths.current.to ?? straightLine
@@ -163,7 +164,7 @@ export function AnimatedLineGraph({
   const circleY = useValue(0)
   const pathEnd = useValue(0)
   const circleRadius = useValue(0)
-  const circleStrokeRadius = useDerivedValue(
+  const circleStrokeRadius = useComputedValue(
     () => circleRadius.current * 6,
     [circleRadius]
   )
@@ -216,7 +217,7 @@ export function AnimatedLineGraph({
     },
     [isActive, setIsActive]
   )
-  const positions = useDerivedValue(
+  const positions = useComputedValue(
     () => [
       0,
       Math.min(0.15, pathEnd.current),
@@ -243,6 +244,7 @@ export function AnimatedLineGraph({
             <Canvas style={styles.svg}>
               <Group>
                 <Path
+                  // @ts-ignore
                   path={path}
                   strokeWidth={lineThickness}
                   style="stroke"

src/GetYForX.ts

@@ -120,21 +120,25 @@ export const selectCurve = (
   cmds: PathCommand[],
   x: number
 ): Cubic | undefined => {
+  let from: Vector = vec(0, 0)
   for (let i = 0; i < cmds.length; i++) {
     const cmd = cmds[i]
     if (cmd == null) return undefined
-
-    if (cmd[0] === PathVerb.Cubic) {
-      const to = vec(cmd[1], cmd[2])
-      const from = vec(cmd[7], cmd[8])
-      if (x <= from.x && x >= to.x) {
+    if (cmd[0] === PathVerb.Move) {
+      from = vec(cmd[1], cmd[2])
+    } else if (cmd[0] === PathVerb.Cubic) {
+      const c1 = vec(cmd[1], cmd[2])
+      const c2 = vec(cmd[3], cmd[4])
+      const to = vec(cmd[5], cmd[6])
+      if (x >= from.x && x <= to.x) {
         return {
-          from: from,
-          c1: vec(cmd[3], cmd[4]),
-          c2: vec(cmd[5], cmd[6]),
-          to: to,
+          from,
+          c1,
+          c2,
+          to,
         }
       }
+      from = to
     }
   }
   return undefined