Skip to content

Commit 7083871

Browse files
authored
fix(🖼️): New ImageFilter component that receives arbitrary image filter as prop (#3225)
1 parent dbe03e7 commit 7083871

File tree

22 files changed

+649
-198
lines changed

22 files changed

+649
-198
lines changed

README.md

Lines changed: 1 addition & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -16,141 +16,9 @@ React Native Skia brings the Skia Graphics Library to React Native. Skia serves
1616

1717
[Installation instructions](https://shopify.github.io/react-native-skia/docs/getting-started/installation/)
1818

19-
## Library Development
20-
21-
To develop react-native-skia, you need to build the skia libraries on your computer.
22-
23-
If you have Android Studio installed, make sure `$ANDROID_NDK` is available.
24-
`ANDROID_NDK=/Users/username/Library/Android/sdk/ndk/<version>` for instance.
25-
If the NDK is not installed, you can install it via Android Studio by going to the menu _File > Project Structure_.
26-
And then the _SDK Location_ section. It will show you the NDK path, or the option to Download it if you don't have it installed.
27-
28-
### Building
29-
30-
- Checkout submodules `git submodule update --init --recursive`
31-
- Install dependencies `yarn`
32-
- Go to the package folder `cd packages/skia`
33-
- Build the Skia libraries with `yarn build-skia` (this can take a while)
34-
- Copy Skia headers `yarn copy-skia-headers`
35-
- run `yarn pod:install`
36-
37-
### Upgrading
38-
39-
If a new version of Skia is included in an upgrade of this library, you need to perform a few extra steps before continuing:
40-
41-
1. Update submodules: `git submodule update --recursive --remote`
42-
2. Clean Skia: `yarn clean-skia`
43-
3. Build Skia: `yarn build-skia`
44-
4. Copy Skia Headers: `yarn copy-skia-headers`
45-
5. Run pod install in the example project
46-
47-
### Publishing
48-
49-
- Run the commands in the [Building](#building) section
50-
- Build the Android binaries with `yarn build-skia-android`
51-
- Build the NPM package with `yarn build-npm`
52-
53-
Publish the NPM package manually. The output is found in the `dist` folder.
54-
55-
- Install Cocoapods in the example/ios folder `cd example/ios && pod install && cd ..`
56-
5719
## Contributing
5820

59-
When making contributions to the project, an important part is testing.
60-
In the `package` folder, we have several scripts set up to help you maintain the quality of the codebase and test your changes:
61-
62-
- `yarn lint` — Lints the code for potential errors and to ensure consistency with our coding standards.
63-
- `yarn tsc` — Runs the TypeScript compiler to check for typing issues.
64-
- `yarn test` — Executes the unit tests to ensure existing features work as expected after changes.
65-
- `yarn e2e` — Runs end-to-end tests. For these tests to run properly, you need to have the example app running. Use `yarn ios` or `yarn android` in the `example` folder and navigate to the Tests screen within the app.
66-
67-
## Running End-to-End Tests
68-
69-
To ensure the best reliability, we encourage running end-to-end tests before submitting your changes:
70-
71-
1. Start the example app:
72-
```sh
73-
cd example
74-
yarn ios # or yarn android for Android testing
75-
```
76-
77-
Once the app is open in your simulator or device, press the "Tests" item at the bottom of the list.
78-
79-
2. With the example app running and the Tests screen open, run the following command in the `package` folder:
80-
```sh
81-
yarn e2e
82-
```
83-
84-
This will run through the automated tests and verify that your changes have not introduced any regressions.
85-
You can also run a particular using the following command:
86-
```sh
87-
E2E=true yarn test -i e2e/Colors
88-
```
89-
90-
### Writing End-to-End Tests
91-
92-
Contributing end-to-end tests to React Native Skia is extremely useful. Below you'll find guidelines for writing tests using the `eval`, `draw`, and `drawOffscreen` commands.
93-
94-
e2e tests are located in the `package/__tests__/e2e/` directory. You can create a file there or add a new test to an existing file depending on what is most sensible.
95-
When looking to contribute a new test, you can refer to existing tests to see how these can be built.
96-
The `eval` command is used to test Skia's imperative API. It requires a pure function that invokes Skia operations and returns a serialized result.
97-
98-
```tsx
99-
it("should generate commands properly", async () => {
100-
const result = await surface.eval((Skia) => {
101-
const path = Skia.Path.Make();
102-
path.lineTo(30, 30);
103-
return path.toCmds();
104-
});
105-
expect(result).toEqual([[0, 0, 0], [1, 30, 30]]);
106-
});
107-
```
108-
109-
Both the `eval` and `draw` commands require a function that will be executed in an isolated context, so the functions must be pure (without external dependencies) and serializable. You can use the second parameter to provide extra data to that function.
110-
111-
```tsx
112-
it("should generate commands properly", async () => {
113-
// Referencing the SVG variable directly in the tests would fail
114-
// as the function wouldn't be able to run in an isolated context
115-
const svg = "M 0 0, L 30 30";
116-
const result = await surface.eval((Skia, ctx) => {
117-
const path = Skia.Path.MakeFromSVGString(ctx.svg);
118-
return path.toCmds();
119-
}, { svg });
120-
expect(result).toEqual([[0, 0, 0], [1, 30, 30]]);
121-
});
122-
```
123-
124-
A second option is to use the `draw` command where you can test the Skia components and get the resulting image:
125-
```tsx
126-
it("Path with default fillType", async () => {
127-
const { Skia } = importSkia();
128-
const path = star(Skia);
129-
const img = await surface.draw(
130-
<>
131-
<Fill color="white" />
132-
<Path path={path} style="stroke" strokeWidth={4} color="#3EB489" />
133-
<Path path={path} color="lightblue" />
134-
</>
135-
);
136-
checkImage(image, "snapshots/drawings/path.png");
137-
});
138-
```
139-
140-
Finally, you can use `drawOffscreen` to receive a canvas object as parameter. You will also get the resulting image:
141-
142-
```tsx
143-
it("Should draw cyan", async () => {
144-
const image = await surface.drawOffscreen(
145-
(Skia, canvas, { size }) => {
146-
canvas.drawColor(Skia.Color("cyan"));
147-
}
148-
);
149-
checkImage(image, "snapshots/cyan.png");
150-
});
151-
```
152-
153-
Again, since `eval`, `draw`, and `drawOffscreen` serialize the function's content, avoid any external dependencies that can't be serialized.
21+
For detailed information on library development, building, testing, and contributing guidelines, please see [CONTRIBUTING.md](packages/skia/CONTRIBUTING.md).
15422

15523
## Graphite
15624

26.7 KB
Loading
41.1 KB
Loading
14.9 KB
Loading
5.34 KB
Loading

apps/example/ios/Podfile.lock

Lines changed: 60 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1327,7 +1327,7 @@ PODS:
13271327
- ReactCommon/turbomodule/bridging
13281328
- ReactCommon/turbomodule/core
13291329
- Yoga
1330-
- react-native-slider (4.5.7):
1330+
- react-native-slider (4.5.6):
13311331
- DoubleConversion
13321332
- glog
13331333
- hermes-engine
@@ -1340,7 +1340,7 @@ PODS:
13401340
- React-featureflags
13411341
- React-graphics
13421342
- React-ImageManager
1343-
- react-native-slider/common (= 4.5.7)
1343+
- react-native-slider/common (= 4.5.6)
13441344
- React-NativeModulesApple
13451345
- React-RCTFabric
13461346
- React-rendererdebug
@@ -1349,7 +1349,7 @@ PODS:
13491349
- ReactCommon/turbomodule/bridging
13501350
- ReactCommon/turbomodule/core
13511351
- Yoga
1352-
- react-native-slider/common (4.5.7):
1352+
- react-native-slider/common (4.5.6):
13531353
- DoubleConversion
13541354
- glog
13551355
- hermes-engine
@@ -2162,77 +2162,77 @@ SPEC CHECKSUMS:
21622162
fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd
21632163
glog: eb93e2f488219332457c3c4eafd2738ddc7e80b8
21642164
hermes-engine: b417d2b2aee3b89b58e63e23a51e02be91dc876d
2165-
RCT-Folly: 36fe2295e44b10d831836cc0d1daec5f8abcf809
2165+
RCT-Folly: e78785aa9ba2ed998ea4151e314036f6c49e6d82
21662166
RCTDeprecation: b2eecf2d60216df56bc5e6be5f063826d3c1ee35
21672167
RCTRequired: 78522de7dc73b81f3ed7890d145fa341f5bb32ea
21682168
RCTTypeSafety: c135dd2bf50402d87fd12884cbad5d5e64850edd
21692169
React: b229c49ed5898dab46d60f61ed5a0bfa2ee2fadb
21702170
React-callinvoker: 2ac508e92c8bd9cf834cc7d7787d94352e4af58f
2171-
React-Core: 13cdd1558d0b3f6d9d5a22e14d89150280e79f02
2172-
React-CoreModules: b07a6744f48305405e67c845ebf481b6551b712a
2173-
React-cxxreact: 1055a86c66ac35b4e80bd5fb766aed5f494dfff4
2171+
React-Core: 325b4f6d9162ae8b9a6ff42fe78e260eb124180d
2172+
React-CoreModules: 558041e5258f70cd1092f82778d07b8b2ff01897
2173+
React-cxxreact: 8fff17cbe76e6a8f9991b59552e1235429f9c74b
21742174
React-debug: 0a5fcdbacc6becba0521e910c1bcfdb20f32a3f6
2175-
React-defaultsnativemodule: 4bb28fc97fee5be63a9ebf8f7a435cfe8ba69459
2176-
React-domnativemodule: b36a11c2597243d7563985028c51ece988d8ae33
2177-
React-Fabric: afc561718f25b2cd800b709d934101afe376a12c
2178-
React-FabricComponents: f4e0a4e18a27bf6d39cbf2a0b42f37a92fa4e37f
2179-
React-FabricImage: 37d8e8b672eda68a19d71143eb65148084efb325
2175+
React-defaultsnativemodule: 618dc50a0fad41b489997c3eb7aba3a74479fd14
2176+
React-domnativemodule: 7ba599afb6c2a7ec3eb6450153e2efe0b8747e9a
2177+
React-Fabric: 252112089d2c63308f4cbfade4010b6606db67d1
2178+
React-FabricComponents: 3c0f75321680d14d124438ab279c64ec2a3d13c4
2179+
React-FabricImage: 728b8061cdec2857ca885fd605ee03ad43ffca98
21802180
React-featureflags: 19682e02ef5861d96b992af16a19109c3dfc1200
2181-
React-featureflagsnativemodule: d7cddf6d907b4e5ab84f9e744b7e88461656e48c
2182-
React-graphics: b0f78580cdaf5800d25437e3d41cc6c3d83b7aea
2183-
React-hermes: 71186f872c932e4574d5feb3ed754dda63a0b3bd
2184-
React-idlecallbacksnativemodule: dd2af19cdd3bc55149d17a2409ed72b694dfbe9c
2185-
React-ImageManager: a77dde8d5aa6a2b6962c702bf3a47695ef0aa32b
2186-
React-jserrorhandler: 9c14e89f12d5904257a79aaf84a70cd2e5ac07ba
2187-
React-jsi: 0775a66820496769ad83e629f0f5cce621a57fc7
2188-
React-jsiexecutor: 2cf5ba481386803f3c88b85c63fa102cba5d769e
2189-
React-jsinspector: 8052d532bb7a98b6e021755674659802fb140cc5
2190-
React-jsinspectortracing: bdd8fd0adcb4813663562e7874c5842449df6d8a
2191-
React-jsitracing: 2bab3bf55de3d04baf205def375fa6643c47c794
2192-
React-logger: 795cd5055782db394f187f9db0477d4b25b44291
2193-
React-Mapbuffer: 0502faf46cab8fb89cfc7bf3e6c6109b6ef9b5de
2194-
React-microtasksnativemodule: 663bc64e3a96c5fc91081923ae7481adc1359a78
2195-
react-native-safe-area-context: 286b3e7b5589795bb85ffc38faf4c0706c48a092
2196-
react-native-skia: 75c085ab6e64dec94731a7ab93cc30880ebe4eed
2197-
react-native-slider: 27263d134d55db948a4706f1e47d0ec88fb354dd
2198-
React-NativeModulesApple: 16fbd5b040ff6c492dacc361d49e63cba7a6a7a1
2199-
React-perflogger: ab51b7592532a0ea45bf6eed7e6cae14a368b678
2200-
React-performancetimeline: bc2e48198ec814d578ac8401f65d78a574358203
2181+
React-featureflagsnativemodule: 23528c7e7d50782b7ef0804168ba40bbaf1e86ab
2182+
React-graphics: fefe48f71bfe6f48fd037f59e8277b12e91b6be1
2183+
React-hermes: a9a0c8377627b5506ef9a7b6f60a805c306e3f51
2184+
React-idlecallbacksnativemodule: 7e2b6a3b70e042f89cd91dbd73c479bb39a72a7e
2185+
React-ImageManager: e3300996ac2e2914bf821f71e2f2c92ae6e62ae2
2186+
React-jserrorhandler: fa75876c662e5d7e79d6efc763fc9f4c88e26986
2187+
React-jsi: f3f51595cc4c089037b536368f016d4742bf9cf7
2188+
React-jsiexecutor: cca6c232db461e2fd213a11e9364cfa6fdaa20eb
2189+
React-jsinspector: 2bd4c9fddf189d6ec2abf4948461060502582bef
2190+
React-jsinspectortracing: a417d8a0ad481edaa415734b4dac81e3e5ee7dc6
2191+
React-jsitracing: 1ff7172c5b0522cbf6c98d82bdbb160e49b5804e
2192+
React-logger: 018826bfd51b9f18e87f67db1590bc510ad20664
2193+
React-Mapbuffer: 3c11cee7737609275c7b66bd0b1de475f094cedf
2194+
React-microtasksnativemodule: 843f352b32aacbe13a9c750190d34df44c3e6c2c
2195+
react-native-safe-area-context: 0f14bce545abcdfbff79ce2e3c78c109f0be283e
2196+
react-native-skia: 4c46da1d88de9287c05a5c6a99725995a69e56f5
2197+
react-native-slider: bb7eb4732940fab78217e1c096bb647d8b0d1cf3
2198+
React-NativeModulesApple: 88433b6946778bea9c153e27b671de15411bf225
2199+
React-perflogger: 9e8d3c0dc0194eb932162812a168aa5dc662f418
2200+
React-performancetimeline: 5a2d6efef52bdcefac079c7baa30934978acd023
22012201
React-RCTActionSheet: 592674cf61142497e0e820688f5a696e41bf16dd
2202-
React-RCTAnimation: 8fbb8dba757b49c78f4db403133ab6399a4ce952
2203-
React-RCTAppDelegate: 7f88baa8cb4e5d6c38bb4d84339925c70c9ac864
2204-
React-RCTBlob: f89b162d0fe6b570a18e755eb16cbe356d3c6d17
2205-
React-RCTFabric: 8ad6d875abe6e87312cef90e4b15ef7f6bed72e6
2206-
React-RCTFBReactNativeSpec: 8c29630c2f379c729300e4c1e540f3d1b78d1936
2207-
React-RCTImage: ccac9969940f170503857733f9a5f63578e106e1
2208-
React-RCTLinking: d82427bbf18415a3732105383dff119131cadd90
2209-
React-RCTNetwork: 12ad4d0fbde939e00251ca5ca890da2e6825cc3c
2210-
React-RCTSettings: e7865bf9f455abf427da349c855f8644b5c39afa
2211-
React-RCTText: 2cdfd88745059ec3202a0842ea75a956c7d6f27d
2212-
React-RCTVibration: a3a1458e6230dfd64b3768ebc0a4aac430d9d508
2202+
React-RCTAnimation: e6d669872f9b3b4ab9527aab283b7c49283236b7
2203+
React-RCTAppDelegate: de2343fe08be4c945d57e0ecce44afcc7dd8fc03
2204+
React-RCTBlob: 3e2dce94c56218becc4b32b627fc2293149f798d
2205+
React-RCTFabric: cac2c033381d79a5956e08550b0220cb2d78ea93
2206+
React-RCTFBReactNativeSpec: d10ca5e0ccbfeac8c047361fedf8e4ac653887b6
2207+
React-RCTImage: dc04b176c022d12a8f55ae7a7279b1e091066ae0
2208+
React-RCTLinking: 88f5e37fe4f26fbc80791aa2a5f01baf9b9a3fd5
2209+
React-RCTNetwork: f213693565efbd698b8e9c18d700a514b49c0c8e
2210+
React-RCTSettings: a2d32a90c45a3575568cad850abc45924999b8a5
2211+
React-RCTText: 54cdcd1cbf6f6a91dc6317f5d2c2b7fc3f6bf7a0
2212+
React-RCTVibration: 11dae0e7f577b5807bb7d31e2e881eb46f854fd4
22132213
React-rendererconsistency: 64e897e00d2568fd8dfe31e2496f80e85c0aaad1
2214-
React-rendererdebug: a3f6d3ae7d2fa0035885026756281c07ee32479e
2214+
React-rendererdebug: 41ce452460c44bba715d9e41d5493a96de277764
22152215
React-rncore: 58748c2aa445f56b99e5118dad0aedb51c40ce9f
2216-
React-RuntimeApple: f0fda7bacabd32daa099cfda8f07466c30acd149
2217-
React-RuntimeCore: 683ee0b6a76d4b4bf6fbf83a541895b4887cc636
2216+
React-RuntimeApple: 7785ed0d8ae54da65a88736bb63ca97608a6d933
2217+
React-RuntimeCore: 6029ea70bc77f98cfd43ebe69217f14e93ba1f12
22182218
React-runtimeexecutor: a188df372373baf5066e6e229177836488799f80
2219-
React-RuntimeHermes: 907c8e9bec13ea6466b94828c088c24590d4d0b6
2220-
React-runtimescheduler: a2e2a39125dd6426b5d8b773f689d660cd7c5f60
2219+
React-RuntimeHermes: a264609c28b796edfffc8ae4cb8fad1773ab948b
2220+
React-runtimescheduler: 23ec3a1e0fb1ec752d1a9c1fb15258c30bfc7222
22212221
React-timing: bb220a53a795ed57976a4855c521f3de2f298fe5
2222-
React-utils: 300d8bbb6555dcffaca71e7a0663201b5c7edbbc
2223-
ReactAppDependencyProvider: f2e81d80afd71a8058589e19d8a134243fa53f17
2224-
ReactCodegen: 50b6e45bbbef9b39d9798820cdbe87bfc7922e22
2225-
ReactCommon: 3d39389f8e2a2157d5c999f8fba57bd1c8f226f0
2226-
ReactNativeHost: f2ecc49200441384efb6c6e8bffe62ba29ee16ae
2227-
ReactTestApp-DevSupport: 15d2ef4884e8f5fd30ded3dec59b010f76384f37
2222+
React-utils: 3b054aaebe658fc710a8d239d0e4b9fd3e0b78f9
2223+
ReactAppDependencyProvider: a1fb08dfdc7ebc387b2e54cfc9decd283ed821d8
2224+
ReactCodegen: e232f8db3a40721044ec81b9388f95a7afaad36a
2225+
ReactCommon: 0c097b53f03d6bf166edbcd0915da32f3015dd90
2226+
ReactNativeHost: f9584a700dc379cfa223203d0d51e492df84a7a8
2227+
ReactTestApp-DevSupport: 16672810b0675a3bab6be3b3e85f1ce4b93144da
22282228
ReactTestApp-Resources: 1bd9ff10e4c24f2ad87101a32023721ae923bccf
2229-
RNGestureHandler: 66e593addd8952725107cfaa4f5e3378e946b541
2230-
RNReanimated: b292a2aee945230a9c5e01889043ba088b5fb9b8
2231-
RNScreens: 0f01bbed9bd8045a8d58e4b46993c28c7f498f3c
2232-
RNSVG: 8588ee1ca9b2e6fd2c99466e35b3db0e9f81bb40
2229+
RNGestureHandler: dcb1b1db024f3744b03af56d132f4f72c4c27195
2230+
RNReanimated: 3b2312c84f8c747ab1e9d9c3ce879e93a5ba96f3
2231+
RNScreens: 790123c4a28783d80a342ce42e8c7381bed62db1
2232+
RNSVG: 8126581b369adf6a0004b6a6cab1a55e3002d5b0
22332233
SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
2234-
Yoga: 9b7fb56e7b08cde60e2153344fa6afbd88e5d99f
2234+
Yoga: afd04ff05ebe0121a00c468a8a3c8080221cb14c
22352235

22362236
PODFILE CHECKSUM: 87506345285a0371afb28b9c3e6daaa999c214f3
22372237

2238-
COCOAPODS: 1.15.2
2238+
COCOAPODS: 1.16.2

apps/example/src/Tests/deserialize.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Skia } from "@shopify/react-native-skia";
1+
import { Skia, TileMode } from "@shopify/react-native-skia";
22
import React from "react";
33

44
/* eslint-disable @typescript-eslint/no-explicit-any */
@@ -100,9 +100,10 @@ const parseProp = (value: any, assets: Assets): any => {
100100
} else if (value.__typename__ === "Function") {
101101
// eslint-disable-next-line no-eval
102102
return eval(
103-
`(function Main(){ const {Skia} = this; return (${value.source}); })`
103+
`(function Main(){ const {Skia, TileMode} = this; return (${value.source}); })`
104104
).call({
105105
Skia,
106+
TileMode,
106107
});
107108
}
108109
} else if (Array.isArray(value)) {

externals/depot_tools

Submodule depot_tools updated from 5cc29c7 to abc5109

externals/skia

Submodule skia updated from 0f94c19 to e662ed1

0 commit comments

Comments
 (0)