Skip to content

Commit be80970

Browse files
wcandillonwcandillon
authored
Merge branch 'main' into para-width
2 parents c1c349a + d61e7a8 commit be80970

25 files changed

+184
-598
lines changed

‎docs/docs/animations/gestures.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ slug: /animations/gestures
77

88
When integrating with [reanimated](/docs/animations/animations), we recommend using [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/).
99

10-
We've prepared a few [tutorials](docs/tutorials#gestures) that showcase the use of advanced gestures within the context of Skia drawings.
10+
We've prepared a few [tutorials](/docs/tutorials#gestures) that showcase the use of advanced gestures within the context of Skia drawings.
1111

1212
```tsx twoslash
1313
import { useWindowDimensions } from "react-native";
@@ -87,4 +87,4 @@ export const ElementTracking = () => {
8787
</View>
8888
);
8989
};
90-
```
90+
```

‎docs/docs/getting-started/web.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ React Native Skia runs in a web browser thanks to [CanvasKit](https://skia.org/d
1111
The WebAssembly file is loaded asynchronously and has a size of 2.9MB gzipped.
1212
While this is a substantial file size, you have control over the user experience: you can decide when to load Skia and how the loading experience should be.
1313

14-
We provide direct integrations with [Expo](#Expo) and [Remotion](#Remotion).
14+
We provide direct integrations with [Expo](#expo) and [Remotion](#remotion).
1515
Below you will also find the manual installation steps to run the module on any React Native Web projects.
1616

1717
You can use React Native Skia without React Native Web.
@@ -21,7 +21,7 @@ You can use React Native Skia without React Native Web.
2121
Using React Native Skia on Expo web is reasonably straightforward.
2222
We provide a script that will work well with the setup:
2323
```bash
24-
$ expo install @shopify/react-native-skia
24+
$ npx expo install @shopify/react-native-skia
2525
$ yarn setup-skia-web
2626
```
2727

‎example/src/Examples/API/ColorFilter.tsx

Lines changed: 59 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ import React, { useMemo } from "react";
22
import { ScrollView, useWindowDimensions } from "react-native";
33
import {
44
Skia,
5-
useDrawCallback,
6-
SkiaView,
75
PaintStyle,
86
useImage,
97
TileMode,
@@ -16,6 +14,8 @@ import {
1614
ColorMatrix,
1715
LinearToSRGBGamma,
1816
SRGBToLinearGamma,
17+
SkiaPictureView,
18+
createPicture,
1919
} from "@shopify/react-native-skia";
2020

2121
import { Title } from "./components/Title";
@@ -47,70 +47,62 @@ export const ColorFilter = () => {
4747

4848
const image = useImage(card);
4949

50-
const onMatrixDraw = useDrawCallback(
51-
(canvas) => {
52-
const rect1 = Skia.XYWHRect(0, 0, IMG_WIDTH, IMG_HEIGHT);
53-
const rect2 = Skia.XYWHRect(IMG_WIDTH, 0, IMG_WIDTH, IMG_HEIGHT);
54-
const rect3 = Skia.XYWHRect(0, IMG_HEIGHT, IMG_WIDTH, IMG_HEIGHT);
55-
const rect4 = Skia.XYWHRect(IMG_WIDTH, IMG_HEIGHT, IMG_WIDTH, IMG_HEIGHT);
56-
if (image) {
57-
const imgRect = Skia.XYWHRect(0, 0, image.width(), image.height());
58-
canvas.drawImageRect(image, imgRect, rect1, paint);
59-
const p2 = paint.copy();
60-
p2.setColorFilter(
61-
Skia.ColorFilter.MakeMatrix([
62-
-0.578, 0.99, 0.588, 0, 0, 0.469, 0.535, -0.003, 0, 0, 0.015, 1.69,
63-
-0.703, 0, 0, 0, 0, 0, 1, 0,
64-
])
65-
);
66-
canvas.drawImageRect(image, imgRect, rect2, p2);
67-
const p3 = paint.copy();
68-
p3.setColorFilter(
69-
Skia.ColorFilter.MakeMatrix([
70-
1, 0, 0, 0, 0.262, 0, 1, 0, 0, 0.262, 0, 0, 1, 0, 0.262, 0, 0, 0, 1,
71-
0,
72-
])
73-
);
74-
canvas.drawImageRect(image, imgRect, rect3, p3);
75-
const p4 = paint.copy();
76-
p4.setColorFilter(
77-
Skia.ColorFilter.MakeMatrix([
78-
0.393, 0.768, 0.188, 0, 0, 0.349, 0.685, 0.167, 0, 0, 0.272, 0.533,
79-
0.13, 0, 0, 0, 0, 0, 1, 0,
80-
])
81-
);
82-
canvas.drawImageRect(image, imgRect, rect4, p4);
83-
}
84-
},
85-
[image]
86-
);
50+
const matrixDraw = createPicture((canvas) => {
51+
const rect1 = Skia.XYWHRect(0, 0, IMG_WIDTH, IMG_HEIGHT);
52+
const rect2 = Skia.XYWHRect(IMG_WIDTH, 0, IMG_WIDTH, IMG_HEIGHT);
53+
const rect3 = Skia.XYWHRect(0, IMG_HEIGHT, IMG_WIDTH, IMG_HEIGHT);
54+
const rect4 = Skia.XYWHRect(IMG_WIDTH, IMG_HEIGHT, IMG_WIDTH, IMG_HEIGHT);
55+
if (image) {
56+
const imgRect = Skia.XYWHRect(0, 0, image.width(), image.height());
57+
canvas.drawImageRect(image, imgRect, rect1, paint);
58+
const p2 = paint.copy();
59+
p2.setColorFilter(
60+
Skia.ColorFilter.MakeMatrix([
61+
-0.578, 0.99, 0.588, 0, 0, 0.469, 0.535, -0.003, 0, 0, 0.015, 1.69,
62+
-0.703, 0, 0, 0, 0, 0, 1, 0,
63+
])
64+
);
65+
canvas.drawImageRect(image, imgRect, rect2, p2);
66+
const p3 = paint.copy();
67+
p3.setColorFilter(
68+
Skia.ColorFilter.MakeMatrix([
69+
1, 0, 0, 0, 0.262, 0, 1, 0, 0, 0.262, 0, 0, 1, 0, 0.262, 0, 0, 0, 1,
70+
0,
71+
])
72+
);
73+
canvas.drawImageRect(image, imgRect, rect3, p3);
74+
const p4 = paint.copy();
75+
p4.setColorFilter(
76+
Skia.ColorFilter.MakeMatrix([
77+
0.393, 0.768, 0.188, 0, 0, 0.349, 0.685, 0.167, 0, 0, 0.272, 0.533,
78+
0.13, 0, 0, 0, 0, 0, 1, 0,
79+
])
80+
);
81+
canvas.drawImageRect(image, imgRect, rect4, p4);
82+
}
83+
});
8784

88-
const onImageFilterDraw = useDrawCallback(
89-
(canvas) => {
90-
const rect1 = Skia.XYWHRect(0, 0, IMG_WIDTH, IMG_HEIGHT);
91-
const rect2 = Skia.XYWHRect(IMG_WIDTH, 0, IMG_WIDTH, IMG_HEIGHT);
92-
if (image) {
93-
const imgRect = Skia.XYWHRect(0, 0, image.width(), image.height());
94-
const p1 = paint.copy();
95-
p1.setImageFilter(
96-
Skia.ImageFilter.MakeBlur(5, 5, TileMode.Decal, null)
97-
);
98-
canvas.drawImageRect(image, imgRect, rect1, p1);
99-
const p2 = paint.copy();
100-
p2.setImageFilter(
101-
Skia.ImageFilter.MakeColorFilter(
102-
Skia.ColorFilter.MakeMatrix([
103-
1.49, 0, 0, -0.247, 0, 1.49, 0, 0, -0.247, 0, 0, 1.49, 0, -0.247,
104-
0, 0, 0, 1, 0,
105-
]),
106-
null
107-
)
108-
);
109-
canvas.drawImageRect(image, imgRect, rect2, p2);
110-
}
111-
},
112-
[image]
113-
);
85+
const imageFilterDraw = createPicture((canvas) => {
86+
const rect1 = Skia.XYWHRect(0, 0, IMG_WIDTH, IMG_HEIGHT);
87+
const rect2 = Skia.XYWHRect(IMG_WIDTH, 0, IMG_WIDTH, IMG_HEIGHT);
88+
if (image) {
89+
const imgRect = Skia.XYWHRect(0, 0, image.width(), image.height());
90+
const p1 = paint.copy();
91+
p1.setImageFilter(Skia.ImageFilter.MakeBlur(5, 5, TileMode.Decal, null));
92+
canvas.drawImageRect(image, imgRect, rect1, p1);
93+
const p2 = paint.copy();
94+
p2.setImageFilter(
95+
Skia.ImageFilter.MakeColorFilter(
96+
Skia.ColorFilter.MakeMatrix([
97+
1.49, 0, 0, -0.247, 0, 1.49, 0, 0, -0.247, 0, 0, 1.49, 0, -0.247, 0,
98+
0, 0, 1, 0,
99+
]),
100+
null
101+
)
102+
);
103+
canvas.drawImageRect(image, imgRect, rect2, p2);
104+
}
105+
});
114106

115107
const style = useMemo(
116108
() => ({ width: width, height: IMG_HEIGHT * 2 }),
@@ -122,9 +114,9 @@ export const ColorFilter = () => {
122114
return (
123115
<ScrollView>
124116
<Title>Color Matrix Filter</Title>
125-
<SkiaView style={style} onDraw={onMatrixDraw} />
117+
<SkiaPictureView style={style} picture={matrixDraw} />
126118
<Title>Image Filter</Title>
127-
<SkiaView style={style} onDraw={onImageFilterDraw} />
119+
<SkiaPictureView style={style} picture={imageFilterDraw} />
128120
<Title>Other</Title>
129121
<Canvas style={style}>
130122
<Group>

0 commit comments

Comments
 (0)