<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect -->
# Summary
This PR adds E2E tests based on view screenshots done via
`react-native-view-shot`. It only works with devices that have their
[pixel ratio](https://reactnative.dev/docs/pixelratio) equal `3`. If you
want to use device with different pixel ratio, you need to adjust it in
`e2e/generateReferences.ts` viewport and regenerate reference images
(see below).
Steps to run tests:
- Run Metro server for example app via `yarn start` in example app's
directory
- Run `example` app on platform of your choice (currently only Android &
iOS are supported) via `yarn android` or `yarn ios` in example app's
directory
- Run `yarn e2e` in project's root directory to start Jest server
- Select `E2E` tab in example app
- Wait for tests to finish
- You can see test results, as well as diffs (actual rendered svg vs
reference image) in `e2e/diffs` directory
Steps to add new test cases:
- Put SVG of your choice to `e2e/cases` directory
- Run `yarn generateE2eRefrences`, this will open headless chrome
browser via `puppeteer` and snapshot all rendered SVGs to .png files and
later use them as reference in tests
- You should see new .png files in `e2e/references`
- When you run E2E tests again, it will use new test case(s) you've
added
## Test Plan
https://github.com/software-mansion/react-native-svg/assets/41289688/24ee5447-ce9a-43b6-9dde-76229d25a30ahttps://github.com/software-mansion/react-native-svg/assets/41289688/71d1873f-8155-4494-80bd-e4c1fa72a065
### What's required for testing (prerequisites)?
See Summary
### What are the steps to reproduce (after prerequisites)?
See Summary
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
| Web | ❌ |
## Checklist
<!-- Check completed item, when applicable, via: [X] -->
- [X] I have tested this on a device and a simulator
- [x] I added documentation in `README.md`
- [X] I updated the typed files (typescript)
- [X] I added a test for the API in the `__tests__` folder
---------
Co-authored-by: bohdanprog <bohdan.artiukhov@swmansion.com>
Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
# Summary
Since `RNSVGPlatformView` on macOS old arch is just `RCTUIView`, we need
to add `updateReactTransformInternal` to `RNSVGSvgView`.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| MacOS | ✅ |
Bumps [rexml](https://github.com/ruby/rexml) from 3.2.6 to 3.3.3.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/ruby/rexml/releases">rexml's
releases</a>.</em></p>
<blockquote>
<h2>REXML 3.3.3 - 2024-08-01</h2>
<h3>Improvements</h3>
<ul>
<li>
<p>Added support for detecting invalid XML that has unsupported
content before root element</p>
<ul>
<li><a
href="https://redirect.github.com/ruby/rexml/issues/184">GH-184</a></li>
<li>Patch by NAITOH Jun.</li>
</ul>
</li>
<li>
<p>Added support for
<code>REXML::Security.entity_expansion_limit=</code> and
<code>REXML::Security.entity_expansion_text_limit=</code> in SAX2 and
pull
parsers</p>
<ul>
<li><a
href="https://redirect.github.com/ruby/rexml/issues/187">GH-187</a></li>
<li>Patch by NAITOH Jun.</li>
</ul>
</li>
<li>
<p>Added more tests for invalid XMLs.</p>
<ul>
<li><a
href="https://redirect.github.com/ruby/rexml/issues/183">GH-183</a></li>
<li>Patch by Watson.</li>
</ul>
</li>
<li>
<p>Added more performance tests.</p>
<ul>
<li>Patch by Watson.</li>
</ul>
</li>
<li>
<p>Improved parse performance.</p>
<ul>
<li><a
href="https://redirect.github.com/ruby/rexml/issues/186">GH-186</a></li>
<li>Patch by tomoya ishida.</li>
</ul>
</li>
</ul>
<h3>Thanks</h3>
<ul>
<li>
<p>NAITOH Jun</p>
</li>
<li>
<p>Watson</p>
</li>
<li>
<p>tomoya ishida</p>
</li>
</ul>
<h2>REXML 3.3.2 - 2024-07-16</h2>
<h3>Improvements</h3>
<ul>
<li>
<p>Improved parse performance.</p>
<ul>
<li><a
href="https://redirect.github.com/ruby/rexml/issues/160">GH-160</a></li>
<li>Patch by NAITOH Jun.</li>
</ul>
</li>
<li>
<p>Improved parse performance.</p>
<ul>
<li><a
href="https://redirect.github.com/ruby/rexml/issues/169">GH-169</a></li>
<li><a
href="https://redirect.github.com/ruby/rexml/issues/170">GH-170</a></li>
<li><a
href="https://redirect.github.com/ruby/rexml/issues/171">GH-171</a></li>
<li><a
href="https://redirect.github.com/ruby/rexml/issues/172">GH-172</a></li>
<li><a
href="https://redirect.github.com/ruby/rexml/issues/173">GH-173</a></li>
<li><a
href="https://redirect.github.com/ruby/rexml/issues/174">GH-174</a></li>
<li><a
href="https://redirect.github.com/ruby/rexml/issues/175">GH-175</a></li>
<li><a
href="https://redirect.github.com/ruby/rexml/issues/176">GH-176</a></li>
</ul>
</li>
</ul>
<!-- raw HTML omitted -->
</blockquote>
<p>... (truncated)</p>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/ruby/rexml/blob/master/NEWS.md">rexml's
changelog</a>.</em></p>
<blockquote>
<h2>3.3.3 - 2024-08-01 {#version-3-3-3}</h2>
<h3>Improvements</h3>
<ul>
<li>
<p>Added support for detecting invalid XML that has unsupported
content before root element</p>
<ul>
<li><a
href="https://redirect.github.com/ruby/rexml/issues/184">GH-184</a></li>
<li>Patch by NAITOH Jun.</li>
</ul>
</li>
<li>
<p>Added support for
<code>REXML::Security.entity_expansion_limit=</code> and
<code>REXML::Security.entity_expansion_text_limit=</code> in SAX2 and
pull
parsers</p>
<ul>
<li><a
href="https://redirect.github.com/ruby/rexml/issues/187">GH-187</a></li>
<li>Patch by NAITOH Jun.</li>
</ul>
</li>
<li>
<p>Added more tests for invalid XMLs.</p>
<ul>
<li><a
href="https://redirect.github.com/ruby/rexml/issues/183">GH-183</a></li>
<li>Patch by Watson.</li>
</ul>
</li>
<li>
<p>Added more performance tests.</p>
<ul>
<li>Patch by Watson.</li>
</ul>
</li>
<li>
<p>Improved parse performance.</p>
<ul>
<li><a
href="https://redirect.github.com/ruby/rexml/issues/186">GH-186</a></li>
<li>Patch by tomoya ishida.</li>
</ul>
</li>
</ul>
<h3>Thanks</h3>
<ul>
<li>
<p>NAITOH Jun</p>
</li>
<li>
<p>Watson</p>
</li>
<li>
<p>tomoya ishida</p>
</li>
</ul>
<h2>3.3.2 - 2024-07-16 {#version-3-3-2}</h2>
<h3>Improvements</h3>
<ul>
<li>
<p>Improved parse performance.</p>
<ul>
<li><a
href="https://redirect.github.com/ruby/rexml/issues/160">GH-160</a></li>
<li>Patch by NAITOH Jun.</li>
</ul>
</li>
<li>
<p>Improved parse performance.</p>
<ul>
<li><a
href="https://redirect.github.com/ruby/rexml/issues/169">GH-169</a></li>
<li><a
href="https://redirect.github.com/ruby/rexml/issues/170">GH-170</a></li>
<li><a
href="https://redirect.github.com/ruby/rexml/issues/171">GH-171</a></li>
<li><a
href="https://redirect.github.com/ruby/rexml/issues/172">GH-172</a></li>
<li><a
href="https://redirect.github.com/ruby/rexml/issues/173">GH-173</a></li>
<li><a
href="https://redirect.github.com/ruby/rexml/issues/174">GH-174</a></li>
<li><a
href="https://redirect.github.com/ruby/rexml/issues/175">GH-175</a></li>
</ul>
</li>
</ul>
<!-- raw HTML omitted -->
</blockquote>
<p>... (truncated)</p>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="e4a067e112"><code>e4a067e</code></a>
Add 3.3.3 entry</li>
<li><a
href="17ff3e7874"><code>17ff3e7</code></a>
test: add a performance test for attribute list declaration</li>
<li><a
href="be86b3de0a"><code>be86b3d</code></a>
test: fix wrong test name</li>
<li><a
href="b93d790b36"><code>b93d790</code></a>
test: use double quote for string literal</li>
<li><a
href="0fbe7d5a0e"><code>0fbe7d5</code></a>
test: don't use abbreviated name</li>
<li><a
href="1599e8785f"><code>1599e87</code></a>
test: add a performance test for PI with many tabs</li>
<li><a
href="e2546e6eca"><code>e2546e6</code></a>
parse pi: improve invalid case detection</li>
<li><a
href="73661ef281"><code>73661ef</code></a>
test: fix a typo</li>
<li><a
href="850488abf2"><code>850488a</code></a>
test: use double quote for string literal</li>
<li><a
href="46c6397d5c"><code>46c6397</code></a>
test: add performance tests for entity declaration</li>
<li>Additional commits viewable in <a
href="https://github.com/ruby/rexml/compare/v3.2.6...v3.3.3">compare
view</a></li>
</ul>
</details>
<br />
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)
Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/software-mansion/react-native-svg/network/alerts).
</details>
---------
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect -->
# Summary
Closes#1897
In our project, we encountered a problem with SVGs that include RGB/RGBA
color values in percentage format. To address this, I've decided to
handle it within the react-native-svg library.
Also, I found an open issue for this -
https://github.com/software-mansion/react-native-svg/issues/1897
`percentTo255`: Converts a percentage string (e.g., 50%) to its
corresponding integer value on a scale of 0-255. This is done by parsing
the percentage as a float and multiplying by 2.55 (since 100% equals 255
in RGB).
`parseAlpha`: Converts the alpha component to a float between 0 and 1.
If the alpha is a percentage, it divides by 100; otherwise, it parses it
as a float directly.
`parsePercentageRGBColor`: This function takes a color string as input
and attempts to match it against the RGB_PATTERN or RGBA_PATTERN. If a
match is found, it extracts the red, green, blue, and optional alpha
components. It then converts these components from their percentage form
to the 0-255 range (or normalized float for alpha). The function returns
the color in standard rgb(r, g, b) or rgba(r, g, b, a) format. If the
input color string does not match the patterns, it logs a warning and
returns undefined
`transformColorToPercentage`: This function checks if the given color
value (which can be of type ColorValue from React Native) is a string
matching the percentage-based RGB or RGBA patterns. It removes any
whitespace from the color string and tests it against the patterns. If
the color matches, it converts it using `parsePercentageRGBColor`. If
not, it returns the original color value unchanged.
<img width="240" alt="Screenshot 2024-07-23 at 18 45 25"
src="https://github.com/user-attachments/assets/7ba0dcb7-1daa-4f84-9771-6884de76649a">
## Test Plan
Run test-examples with Test2363
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
## Checklist
<!-- Check completed item, when applicable, via: [X] -->
- [X] I have tested this on a device and a simulator
- [X] I added documentation in `README.md`
- [X] I updated the typed files (typescript)
---------
Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
# Summary
Explain the **motivation** for making this change: here are some points
to help you:
* What issues does the pull request solve? Please tag them so that they
will get automatically closed once the PR is merged
* What is the feature? (if applicable)
* How did you implement the solution?
* What areas of the library does it impact?
## Test Plan
Demonstrate the code is solid. Example: The exact commands you ran and
their output, screenshots / videos if the pull request changes UI.
### What's required for testing (prerequisites)?
### What are the steps to reproduce (after prerequisites)?
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| MacOS | ✅❌ |
| Android | ✅ |
| Web | ✅❌ |
# Summary
This PR adds Fabric support and a FabricExample app for Windows.
Windows support for Fabric is experimental and as such APIs are subject
to change/break.
## Test Plan
https://github.com/software-mansion/react-native-svg/assets/1422161/2a7db119-44a8-4ee1-a837-41ca8320d8fa
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ❌ |
| Android | ❌ |
| Windows | ✅ |
## Checklist
- [x] I have tested this on a device and a simulator
- [ ] I added documentation in `README.md`
- [ ] I updated the typed files (typescript)
- [ ] I added a test for the API in the `__tests__` folder
# Summary
* Restructure example apps to one entry-point in `./apps/index.tsx`
where we can change the import between `./examples` and
`./test-examples`
* update pod files
# Summary
Closes#2233
in iOS and old Arch, a callback on `toDataURL` method will only be
called the second time of asking.
Based on that
[PR](https://github.com/software-mansion/react-native-svg/pull/2234)
format `RNSVGSvgViewModule` file.
## Test Plan
We can easily test that fix by running the `Test2233`, we have an
example of the problem.
### What are the steps to reproduce (after prerequisites)?
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
# Summary
Somehow deconstructing `filter` from `styles` are throwing error, when
filter does not exist. These changes ensure that `filter` is always
there (`[]` if not exists).
# Summary
When there is no content of CGImage, ref will return `nil` instead of
empty image and crash, we should ignore that results and continue
applying filters.
## Example
```tsx
<svg width="200" height="200">
<filter id="offset">
<feOffset dx="1000" dy="1000" />
</filter>
<rect
x="0"
y="0"
width="100"
height="100"
fill="green"
filter="url(#offset)" />
</svg>
```
# Summary
We want to make available SvgXml and other components in the web
platform.
## Test Plan
We can easily check how that works by opening `Test1813`.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Web | ✅ |
---------
Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
# Summary
- Require cycles are allowed, but can result in uninitialized values.
Consider refactoring to remove the need for a cycle.
- extract SVG web components.
- extract web types.
- extract utils function.
## Test Plan
You can test that problem by running a test example `Test1813`
### What are the steps to reproduce (after prerequisites)?
Without those changes, you can occur that problem by running a test
example `Test1813`
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
---------
Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect -->
# Summary
Explain the **motivation** for making this change: here are some points
to help you:
* What issues does the pull request solve? Please tag them so that they
will get automatically closed once the PR is merged
* What is the feature? (if applicable)
* How did you implement the solution?
* What areas of the library does it impact?
## Test Plan
Demonstrate the code is solid. Example: The exact commands you ran and
their output, screenshots / videos if the pull request changes UI.
### What's required for testing (prerequisites)?
### What are the steps to reproduce (after prerequisites)?
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅❌ |
| Android | ✅❌ |
## Checklist
<!-- Check completed item, when applicable, via: [X] -->
- [x] I have tested this on a device and a simulator
- [x] I added documentation in `README.md`
- [x] I updated the typed files (typescript)
- [x] I added a test for the API in the `__tests__` folder
# Summary
We want to avoid problems with GitHub workflows.
Create a new Macos example for new and old architecture.
## Test Plan
Run GitHub workflows
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| macOS | ✅ |
---------
Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
# Summary
**What issues does the pull request solve? Please tag them so that they
will get automatically closed once the PR is merged**
When utilizing with `react-native-web`: SvgXml and SvgUri are not
exported in the `src/ReactNativeSVG.web.ts` extension. The logic for
SvgXml and SvgUri do not have native dependencies, so they are safe to
consume on web.
Issues:
- https://github.com/software-mansion/react-native-svg/issues/1279
- https://github.com/software-mansion/react-native-svg/issues/1742
**What is the feature? (if applicable)**
Add SvgXml and SvgUri as consumable exports for `react-native-web`
**How did you implement the solution?**
Extract `tags` to shapes map into separate `tags.tsx` file, where native
shape elements and web shape elements can be provided to their
respective envs.
**What areas of the library does it impact?**
`src` directory
## Test Plan
Demonstrate the code is solid. Example: The exact commands you ran and
their output, screenshots / videos if the pull request changes UI.
### What's required for testing (prerequisites)?
n/a
### What are the steps to reproduce (after prerequisites)?
n/a
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
## Checklist
<!-- Check completed item, when applicable, via: [X] -->
- [x] I have tested this on a device and a simulator
- [x] I added documentation in `README.md`
- [x] I updated the typed files (typescript)
- [ ] I added a test for the API in the `__tests__` folder
---------
Co-authored-by: bohdanprog <bohdan.artiukhov@swmansion.com>
# Summary
This PR contains two small refactors of filters:
* extract common props on ViewManagers on Android
* remove unnecessary extract in `FeOffset` filter
# Summary
Continuation of #2316
Introducing new filter `FeOffset`.
## Test Plan
Example app -> Filters -> FeOffset
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
## Checklist
- [x] I have tested this on a device and a simulator
- [x] I added documentation in `README.md`
- [x] I updated the typed files (typescript)
# Summary
Continuation of #2316
Introducing new filter `FeGaussianBlur`.
### Implementation notes
On Android there is no easy way to fully implement Gaussian blur, as
there is no native api for this. While a basic implementation is
possible with `RenderScript`, it does not allow for blur in one axis and
greater than `25`
## Test Plan
Example app -> Filters -> FeGaussianBlur
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
# Summary
* Export `Filter` and `FeColorMatrix` components on `web`
* Change filter IDs in example to be unique*
* Generate filter ID when using `FilterImage`*
* Hide `FilterImage` example on web, since it's crashing the whole site
(see #2334)
\* ID on web has to be unique, otherwise it'll use the first element
with that ID, even if they are in the separate SVG elements
## Test Plan
run `web-example` app
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Web | ✅ |
# Summary
Provide a **CSS**-like filter API in the `FilterImage` component.
Unlike the SVG filter API, which can be complex and challenging even for
simple tasks, the CSS API is straightforward and allows users to quickly
achieve satisfactory results.
The full API can be viewed here
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
_We support all `<filter-function>` listed in the docs while we do not
support functions from `<url>` (`url()` and `src()`)._
All shorthands are implemented according to the W3 standard described
here
https://www.w3.org/TR/filter-effects-1/#ShorthandEquivalents
This PR also changes the `filters` prop behavior as it adds `fe` in
front of `name` attribute to not introduce any abstract above that
specified in the docs.
```tsx
<FilterImage
source={myImage}
filters={[{ name: 'colorMatrix', type: 'saturate', values: 0.2 }])
/>
```
is now
```tsx
<FilterImage
source={myImage}
filters={[{ name: 'feColorMatrix', type: 'saturate', values: 0.2 }])
/>
```
## Examples
Below are the simple examples of the usage
through `StyleSheet`
```tsx
import React from 'react';
import {StyleSheet, View} from 'react-native';
import {FilterImage} from 'react-native-svg/filter-image';
export default () => {
return (
<FilterImage
style={styles.image}
source={{
uri: 'https://cdn.pixabay.com/photo/2024/05/26/00/40/lizard-8787888_1280.jpg',
}}
/>
);
};
const styles = StyleSheet.create({
image: {
width: 200,
height: 200,
filter: 'saturate(100) grayscale(100%)',
},
});
```
or directly in the `style` prop
```tsx
import React from 'react';
import {StyleSheet, View} from 'react-native';
import {FilterImage} from 'react-native-svg/filter-image';
export default () => {
return (
<FilterImage
style={{
width: 200,
height: 200,
filter: 'saturate(100) grayscale(100%)',
}}
source={{
uri: 'https://cdn.pixabay.com/photo/2024/05/26/00/40/lizard-8787888_1280.jpg',
}}
/>
);
};
```
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
## Checklist
- [x] I have tested this on a device and a simulator
- [x] I added documentation in `README.md`
- [x] I updated the typed files (typescript)
# Summary
Applying multiple `FeColorFilter` instances can cause unexpected
behavior on iOS, likely due to a bug in `CoreImage` where the `CIImage`
recipe isn't applied step by step as it should be. This fix ensures that
the filter result is rendered after each application by converting the
image to `CGImage` and then back to `CIImage`.
## Test Plan
With this simple test, we can prove that these changes are working
```tsx
<Svg height="200" width="200">
<Filter id="filter">
<FeColorMatrix type="matrix" values="78 -70 -7 0 0 -21 29 -7 0 0 -21 -70 0 0 0 0 0 0 1 0"/>
<FeColorMatrix type="matrix" values="0.2126, 0.7152, 0.0722, 0, 0, 0.2126, 0.7152, 0.0722, 0, 0, 0.2126, 0.7152, 0, 0, 0, 0, 0, 0, 1, 0"/>
</Filter>
<Rect width="200" height="200" fill="red" filter="url(#filter)"/>
</Svg>
```
| Web | iOS before changes | iOS after changes |
| --- | --- | --- |
| <img width="242" alt="image"
src="https://github.com/user-attachments/assets/dc683341-b3ca-4fab-86d8-cf72b15c13d4">
| <img width="237" alt="image"
src="https://github.com/user-attachments/assets/d4a1af5d-ae67-4ed9-9dbd-d03540b2c63c">
| <img width="249" alt="image"
src="https://github.com/user-attachments/assets/83e856a6-5bcc-4534-ad7b-a1f188434e1c">
|
# Summary
While debugging #2364 I've noticed that color shift in `FeColorMatrix`
on Android is wrong.
On web, elements 5, 10, 15, 20 is a color shift represented by number
where 1 mean full color shift, while on Android it's 255 for full color
shift.
## Test
```tsx
<svg width="180" height="180" viewBox="0 0 180 180">
<rect width="180" height="180" fill="red" filter="url(#filter)"/>
<filter id="filter">
<feColorMatrix type="matrix" values="0 0 0 0 1
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0"/>
</filter>
</svg>
```
# Summary
Closes#2356
Currently, when `filter` prop is defined, but there is no equivalent
`<Filter>` component, on iOS nothing is rendered, with this fix this
prop would be ignored, and the component should render as expected.
## Test Plan
```tsx
<Svg width="400" height="400" viewBox="0 0 124 124" fill="none">
<Rect width="124" height="124" rx="24" fill="red" filter="url(#nonExistingFilterId)"/>
</Svg>
```
## Affected platforms
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
Changes moved from:
https://github.com/software-mansion/react-native-screens/pull/2224
## Description
When changing native props on Fabric, codegen generates corresponding
interfaces and delegates. To make sure both implementations are
consistent, we implement those interfaces on Paper too. Currently, after
generating interfaces using codegen, developer needs to copy
corresponding files for paper manually. This task adds Gradle task, that
automates this.
## Changes
Current assumption:
Two scripts: `check-archs-consistency` and `sync-archs`. The first one
generates codegen interfaces and compares them with what we have for
paper, the second generates and copies for paper to sync the archs.
- sync is run when staged on changes to `src/paper`
- check is run on CI when `src/paper` or
`android/src/paper/java/com/facebook/react/viewmanagers` changes
## Test code and steps to reproduce
Open `src/fabric/LineNativeComponent.ts` or/and
`src/fabric/NativeSvgRenderableModule.ts` and remove any proper form
interface. Now:
- when building paper, interface should be updated
- when committing, interface should be updated
- if committed and pushed, Test consistency between Paper & Fabric
should fail :)
Brining back the prop and repeating up should cause the interface back
and CI green.
Posting changes in other places should cause CI task to run.
You can also run those commands yourself using `yarn
check-archs-consistency` and `yarn sync-archs`
