Skip to content

Commit d38c205

Browse files
sunrise1002sunrise1002
authored
feat: Support skia v0.1.233 (#96)
* feat: Support skia v0.1.233 * feat: Support skia v0.1.233
1 parent 78d180e commit d38c205

6 files changed

Lines changed: 67 additions & 108 deletions

File tree

‎example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
},
1111
"dependencies": {
1212
"@react-native-segmented-control/segmented-control": "^2.4.0",
13-
"@shopify/react-native-skia": "^0.1.185",
13+
"@shopify/react-native-skia": "^0.1.233",
1414
"@types/gaussian": "^1.2.0",
1515
"gaussian": "^1.2.0",
1616
"react": "^18.2.0",

‎example/src/components/CustomSelectionDot.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,13 @@
1616
* shadow from the default one to make it more flat.
1717
*/
1818
import React, { useCallback } from 'react'
19-
import { runOnJS, useAnimatedReaction } from 'react-native-reanimated'
20-
import { runSpring, useValue, Circle } from '@shopify/react-native-skia'
19+
import {
20+
runOnJS,
21+
useAnimatedReaction,
22+
withSpring,
23+
useSharedValue,
24+
} from 'react-native-reanimated'
25+
import { Circle } from '@shopify/react-native-skia'
2126
import type { SelectionDotProps } from 'react-native-graph'
2227

2328
export function SelectionDot({
@@ -26,11 +31,11 @@ export function SelectionDot({
2631
circleX,
2732
circleY,
2833
}: SelectionDotProps): React.ReactElement {
29-
const circleRadius = useValue(0)
34+
const circleRadius = useSharedValue(0)
3035

3136
const setIsActive = useCallback(
3237
(active: boolean) => {
33-
runSpring(circleRadius, active ? 5 : 0, {
38+
circleRadius.value = withSpring(active ? 5 : 0, {
3439
mass: 1,
3540
stiffness: 1000,
3641
damping: 50,

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
"devDependencies": {
5858
"@react-native-community/eslint-config": "^2.0.0",
5959
"@release-it/conventional-changelog": "^2.0.0",
60-
"@shopify/react-native-skia": "^0.1.185",
60+
"@shopify/react-native-skia": "^0.1.233",
6161
"@types/react": "^17.0.42",
6262
"@types/react-native": "^0.67.4",
6363
"eslint": "^7.2.0",
@@ -74,7 +74,7 @@
7474
"typescript": "^4.4.3"
7575
},
7676
"peerDependencies": {
77-
"@shopify/react-native-skia": ">=0.1.185",
77+
"@shopify/react-native-skia": ">=0.1.233",
7878
"react": ">=18",
7979
"react-native": ">=0.69",
8080
"react-native-gesture-handler": ">=2",

‎src/AnimatedLineGraph.tsx‎

Lines changed: 27 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,10 @@ import { GestureDetector } from 'react-native-gesture-handler'
1616

1717
import {
1818
Canvas,
19-
runSpring,
2019
SkPath,
2120
LinearGradient,
2221
Path,
2322
Skia,
24-
useValue,
25-
useComputedValue,
2623
vec,
2724
Group,
2825
PathCommand,
@@ -78,7 +75,7 @@ export function AnimatedLineGraph({
7875
}: AnimatedLineGraphProps): React.ReactElement {
7976
const [width, setWidth] = useState(0)
8077
const [height, setHeight] = useState(0)
81-
const interpolateProgress = useValue(0)
78+
const interpolateProgress = useSharedValue(0)
8279

8380
const { gesture, isActive, x } = usePanGesture({
8481
enabled: enablePanGesture,
@@ -139,8 +136,8 @@ export function AnimatedLineGraph({
139136
return path
140137
}, [height, width])
141138

142-
const paths = useValue<{ from?: SkPath; to?: SkPath }>({})
143-
const gradientPaths = useValue<{ from?: SkPath; to?: SkPath }>({})
139+
const paths = useSharedValue<{ from?: SkPath; to?: SkPath }>({})
140+
const gradientPaths = useSharedValue<{ from?: SkPath; to?: SkPath }>({})
144141
const commands = useSharedValue<PathCommand[]>([])
145142
const [commandsChanged, setCommandsChanged] = useState(0)
146143
const pointSelectedIndex = useRef<number>()
@@ -214,55 +211,50 @@ export function AnimatedLineGraph({
214211
commands.value = path.toCmds()
215212

216213
if (gradientPath != null) {
217-
const previous = gradientPaths.current
214+
const previous = gradientPaths.value
218215
let from: SkPath = previous.to ?? straightLine
219-
if (previous.from != null && interpolateProgress.current < 1)
216+
if (previous.from != null && interpolateProgress.value < 1)
220217
from =
221-
from.interpolate(previous.from, interpolateProgress.current) ?? from
218+
from.interpolate(previous.from, interpolateProgress.value) ?? from
222219

223220
if (gradientPath.isInterpolatable(from)) {
224-
gradientPaths.current = {
221+
gradientPaths.value = {
225222
from,
226223
to: gradientPath,
227224
}
228225
} else {
229-
gradientPaths.current = {
226+
gradientPaths.value = {
230227
from: gradientPath,
231228
to: gradientPath,
232229
}
233230
}
234231
}
235232

236-
const previous = paths.current
233+
const previous = paths.value
237234
let from: SkPath = previous.to ?? straightLine
238-
if (previous.from != null && interpolateProgress.current < 1)
239-
from =
240-
from.interpolate(previous.from, interpolateProgress.current) ?? from
235+
if (previous.from != null && interpolateProgress.value < 1)
236+
from = from.interpolate(previous.from, interpolateProgress.value) ?? from
241237

242238
if (path.isInterpolatable(from)) {
243-
paths.current = {
239+
paths.value = {
244240
from,
245241
to: path,
246242
}
247243
} else {
248-
paths.current = {
244+
paths.value = {
249245
from: path,
250246
to: path,
251247
}
252248
}
253249

254250
setCommandsChanged(commandsChanged + 1)
255251

256-
runSpring(
257-
interpolateProgress,
258-
{ from: 0, to: 1 },
259-
{
260-
mass: 1,
261-
stiffness: 500,
262-
damping: 400,
263-
velocity: 0,
264-
}
265-
)
252+
interpolateProgress.value = withSpring(1, {
253+
mass: 1,
254+
stiffness: 500,
255+
damping: 400,
256+
velocity: 0,
257+
})
266258
// eslint-disable-next-line react-hooks/exhaustive-deps
267259
}, [
268260
height,
@@ -298,23 +290,23 @@ export function AnimatedLineGraph({
298290
]
299291
}, [color, enableFadeInMask])
300292

301-
const path = useComputedValue(
293+
const path = useDerivedValue(
302294
() => {
303-
const from = paths.current.from ?? straightLine
304-
const to = paths.current.to ?? straightLine
295+
const from = paths.value.from ?? straightLine
296+
const to = paths.value.to ?? straightLine
305297

306-
return to.interpolate(from, interpolateProgress.current)
298+
return to.interpolate(from, interpolateProgress.value)
307299
},
308300
// RN Skia deals with deps differently. They are actually the required SkiaValues that the derived value listens to, not react values.
309301
[interpolateProgress]
310302
)
311303

312-
const gradientPath = useComputedValue(
304+
const gradientPath = useDerivedValue(
313305
() => {
314-
const from = gradientPaths.current.from ?? straightLine
315-
const to = gradientPaths.current.to ?? straightLine
306+
const from = gradientPaths.value.from ?? straightLine
307+
const to = gradientPaths.value.to ?? straightLine
316308

317-
return to.interpolate(from, interpolateProgress.current)
309+
return to.interpolate(from, interpolateProgress.value)
318310
},
319311
// RN Skia deals with deps differently. They are actually the required SkiaValues that the derived value listens to, not react values.
320312
[interpolateProgress]

‎src/SelectionDot.tsx‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import React, { useCallback } from 'react'
2-
import { runOnJS, useAnimatedReaction } from 'react-native-reanimated'
32
import {
4-
runSpring,
5-
useValue,
6-
useComputedValue,
7-
Circle,
8-
Group,
9-
Shadow,
10-
} from '@shopify/react-native-skia'
3+
runOnJS,
4+
useAnimatedReaction,
5+
useSharedValue,
6+
withSpring,
7+
useDerivedValue,
8+
} from 'react-native-reanimated'
9+
import { Circle, Group, Shadow } from '@shopify/react-native-skia'
1110
import type { SelectionDotProps } from './LineGraphProps'
1211

1312
export const CIRCLE_RADIUS = 5
@@ -19,15 +18,15 @@ export function SelectionDot({
1918
circleX,
2019
circleY,
2120
}: SelectionDotProps): React.ReactElement {
22-
const circleRadius = useValue(0)
23-
const circleStrokeRadius = useComputedValue(
24-
() => circleRadius.current * CIRCLE_RADIUS_MULTIPLIER,
21+
const circleRadius = useSharedValue(0)
22+
const circleStrokeRadius = useDerivedValue(
23+
() => circleRadius.value * CIRCLE_RADIUS_MULTIPLIER,
2524
[circleRadius]
2625
)
2726

2827
const setIsActive = useCallback(
2928
(active: boolean) => {
30-
runSpring(circleRadius, active ? CIRCLE_RADIUS : 0, {
29+
circleRadius.value = withSpring(active ? CIRCLE_RADIUS : 0, {
3130
mass: 1,
3231
stiffness: 1000,
3332
damping: 50,

‎yarn.lock‎

Lines changed: 17 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1988,19 +1988,13 @@
19881988
conventional-recommended-bump "^6.1.0"
19891989
prepend-file "^2.0.0"
19901990

1991-
"@shopify/react-native-skia@^0.1.185":
1992-
version "0.1.185"
1993-
resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-0.1.185.tgz#ded3478bf4a7d380f3c64bf6b3f8ebbf4e8ecd21"
1994-
integrity sha512-RD/huxWgRRjZCHaJcpDiOHQ17tUWO2d/XDv59irpwEfWJRi4UNpxOhPvKso9uwt+MlXJnExJbItNt8e7/m/5GQ==
1995-
dependencies:
1996-
"@types/pixelmatch" "^5.2.4"
1997-
"@types/pngjs" "^6.0.1"
1998-
"@types/ws" "^8.5.3"
1999-
canvaskit-wasm "0.38.0"
2000-
pixelmatch "^5.3.0"
2001-
pngjs "^6.0.0"
1991+
"@shopify/react-native-skia@^0.1.233":
1992+
version "0.1.233"
1993+
resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-0.1.233.tgz#2312cf037bb505d3963f64825ab334c085c0a9ee"
1994+
integrity sha512-UKWg9+ygXg77FCM9nC9Amxum8+xlXHMd3ihkm115s5hUHFepeNd1N9ynJBnO/ErgSDccavvpZaqOsQOkKiqJsg==
1995+
dependencies:
1996+
canvaskit-wasm "0.39.1"
20021997
react-reconciler "^0.27.0"
2003-
ws "^8.11.0"
20041998

20051999
"@sideway/address@^4.1.3":
20062000
version "4.1.4"
@@ -2104,20 +2098,6 @@
21042098
resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
21052099
integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
21062100

2107-
"@types/pixelmatch@^5.2.4":
2108-
version "5.2.4"
2109-
resolved "https://registry.yarnpkg.com/@types/pixelmatch/-/pixelmatch-5.2.4.tgz#ca145cc5ede1388c71c68edf2d1f5190e5ddd0f6"
2110-
integrity sha512-HDaSHIAv9kwpMN7zlmwfTv6gax0PiporJOipcrGsVNF3Ba+kryOZc0Pio5pn6NhisgWr7TaajlPEKTbTAypIBQ==
2111-
dependencies:
2112-
"@types/node" "*"
2113-
2114-
"@types/pngjs@^6.0.1":
2115-
version "6.0.1"
2116-
resolved "https://registry.yarnpkg.com/@types/pngjs/-/pngjs-6.0.1.tgz#c711ec3fbbf077fed274ecccaf85dd4673130072"
2117-
integrity sha512-J39njbdW1U/6YyVXvC9+1iflZghP8jgRf2ndYghdJb5xL49LYDB+1EuAxfbuJ2IBbWIL3AjHPQhgaTxT3YaYeg==
2118-
dependencies:
2119-
"@types/node" "*"
2120-
21212101
"@types/prop-types@*":
21222102
version "15.7.5"
21232103
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
@@ -2158,13 +2138,6 @@
21582138
resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
21592139
integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
21602140

2161-
"@types/ws@^8.5.3":
2162-
version "8.5.4"
2163-
resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.4.tgz#bb10e36116d6e570dd943735f86c933c1587b8a5"
2164-
integrity sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==
2165-
dependencies:
2166-
"@types/node" "*"
2167-
21682141
"@types/yargs-parser@*":
21692142
version "21.0.0"
21702143
resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.0.tgz#0c60e537fa790f5f9472ed2776c2b71ec117351b"
@@ -2251,6 +2224,11 @@
22512224
dependencies:
22522225
eslint-visitor-keys "^1.1.0"
22532226

2227+
"@webgpu/types@0.1.21":
2228+
version "0.1.21"
2229+
resolved "https://registry.yarnpkg.com/@webgpu/types/-/types-0.1.21.tgz#b181202daec30d66ccd67264de23814cfd176d3a"
2230+
integrity sha512-pUrWq3V5PiSGFLeLxoGqReTZmiiXwY3jRkIG5sLLKjyqNxrwm/04b4nw7LSmGWJcKk59XOM/YRTUwOzo4MMlow==
2231+
22542232
JSONStream@^1.0.4:
22552233
version "1.3.5"
22562234
resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
@@ -2838,10 +2816,12 @@ caniuse-lite@^1.0.30001449:
28382816
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001486.tgz#56a08885228edf62cbe1ac8980f2b5dae159997e"
28392817
integrity sha512-uv7/gXuHi10Whlj0pp5q/tsK/32J2QSqVRKQhs2j8VsDCjgyruAh/eEXHF822VqO9yT6iZKw3nRwZRSPBE9OQg==
28402818

2841-
canvaskit-wasm@0.38.0:
2842-
version "0.38.0"
2843-
resolved "https://registry.yarnpkg.com/canvaskit-wasm/-/canvaskit-wasm-0.38.0.tgz#83e6c46f3015c2ff3f6503157f47453af76a7be7"
2844-
integrity sha512-ZEG6lucpbQ4Ld+mY8C1Ng+PMLVP+/AX02jS0Sdl28NyMxuKSa9uKB8oGd1BYp1XWPyO2Jgr7U8pdyjJ/F3xR5Q==
2819+
canvaskit-wasm@0.39.1:
2820+
version "0.39.1"
2821+
resolved "https://registry.yarnpkg.com/canvaskit-wasm/-/canvaskit-wasm-0.39.1.tgz#c3c8f3962cbabbedf246f7bcf90e859013c7eae9"
2822+
integrity sha512-Gy3lCmhUdKq+8bvDrs9t8+qf7RvcjuQn+we7vTVVyqgOVO1UVfHpsnBxkTZw+R4ApEJ3D5fKySl9TU11hmjl/A==
2823+
dependencies:
2824+
"@webgpu/types" "0.1.21"
28452825

28462826
chalk@4.1.2, chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1, chalk@^4.1.2:
28472827
version "4.1.2"
@@ -6570,25 +6550,13 @@ pirates@^4.0.5:
65706550
resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b"
65716551
integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==
65726552

6573-
pixelmatch@^5.3.0:
6574-
version "5.3.0"
6575-
resolved "https://registry.yarnpkg.com/pixelmatch/-/pixelmatch-5.3.0.tgz#5e5321a7abedfb7962d60dbf345deda87cb9560a"
6576-
integrity sha512-o8mkY4E/+LNUf6LzX96ht6k6CEDi65k9G2rjMtBe9Oo+VPKSvl+0GKHuH/AlG+GA5LPG/i5hrekkxUc3s2HU+Q==
6577-
dependencies:
6578-
pngjs "^6.0.0"
6579-
65806553
pkg-dir@^3.0.0:
65816554
version "3.0.0"
65826555
resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
65836556
integrity sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==
65846557
dependencies:
65856558
find-up "^3.0.0"
65866559

6587-
pngjs@^6.0.0:
6588-
version "6.0.0"
6589-
resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-6.0.0.tgz#ca9e5d2aa48db0228a52c419c3308e87720da821"
6590-
integrity sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg==
6591-
65926560
pod-install@^0.1.0:
65936561
version "0.1.35"
65946562
resolved "https://registry.yarnpkg.com/pod-install/-/pod-install-0.1.35.tgz#afb1f8265cd958b661f23f8524ea20d8541d354a"
@@ -8402,11 +8370,6 @@ ws@^7.5.1:
84028370
resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
84038371
integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
84048372

8405-
ws@^8.11.0:
8406-
version "8.13.0"
8407-
resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0"
8408-
integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==
8409-
84108373
xdg-basedir@^4.0.0:
84118374
version "4.0.0"
84128375
resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-4.0.0.tgz#4bc8d9984403696225ef83a1573cbbcb4e79db13"

0 commit comments

Comments
 (0)