# Summary
Bumped package and tests-example app from *last* golden release
`react-native@0.77.0-rc.7` to stable `react-native@0.77.0` and tested
for regression.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
## Checklist
<!-- Check completed item, when applicable, via: [X] -->
- [x] I have tested this on a device and a simulator
# Summary
With react-native@0.77 `yoga::value` is no longer available and we
should use `yoga::StyleLength`.
## Test Plan
App should build again on 0.77.rc-3
# Summary
Bump TestsExample to `react-native@0.77.0-rc.1` to track compatibility
with the latest version
## Test Plan
`TestsExample` should compile.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
# Summary
Regenerate pods to fix `paper-macos-example` workflow.
`fabric-macos-example` will still fail as it doesn't have any startup
command, but it's not our fault.
## Test Plan
CI for `peper-macos-example` should be green
# Summary
There are two main things going on with the PR. Both involve a reworking
of the new arch implementation of rn-svg for windows.
The current implementation attempts to implement a svg renderer from
scratch. There are numerous edge cases that it wasn't handling
correctly, and the performance had some serious issues. This
implementation switches to use the svg rendering path built into
Direct2D. This brings significant performance improvements.
The 2nd issue is there have been various breaking changes in
react-native-windows for how new arch native components are implemented.
This brings the rn-svg implementation in line with those latest changes.
## Test Plan
Primary testing right now is loading up the example app in the repo.
New arch on react-native-windows is still in somewhat early days - so
there are not really current users of this code. I am integrating this
code into Microsoft Office, where I have tested some scenarios. But we
will get expanded testing as we roll out the new arch. I expect there to
be some follow-ups as we expand our usage. The version of rn-svg before
this PR doesn't build with the latest new arch react-native-windows
versions. - So its hard to get worse than that.
### What's required for testing (prerequisites)?
### What are the steps to reproduce (after prerequisites)?
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | N/A |
| MacOS | N/A |
| Android | N/A |
| Web | ✅ |
## 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
Due to the large number of example apps in the repository, I decided to
change the structure and move all applications into an "apps" folder to
maintain a clear structure.
# Summary
Do not crash on `getCropRect` call when renderableBounds is null
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Android | ✅ |
# Summary
Currently on Fabric, you cannot animate color properties like `fill` or
`stroke` using Animated with `useNativeDriver: true` or Reanimated.
That's because we have custom structure that needs to be parsed on `JS`
and looks like:
```ts
type ColorStruct = Readonly<{
type?: WithDefault<Int32, -1>;
payload?: ColorValue;
brushRef?: string;
}>;
```
However, special values like `currentColor` / `context-fill` /
`context-stroke` / `/^url\(#(.+)\)$/` can not be animated anyway.
Instead, we should allow passing `ColorValue` directly and detect on the
native side if its ColorValue or ColorStruct.
## Test Plan
Example app -> TestX
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| MacOS | ✅ |
| Android | ✅ |
## Checklist
- [x] I have tested this on a device and a simulator
- [ ] I added documentation in `README.md`
# Summary
Feature #2380
We want to add support for CSS variables when passing them to parse the
SVG XML source function.
## Test Plan
Test app -> src -> Test2380
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| MacOS | ✅ |
| Android | ✅ |
| Web | ✅ |
---------
Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
# Summary
Fixes#2455. When the shared modal was triggered, the `currentColor`
(which is `tintColor` under the hood) was being greyscaled because the
default value of `tintAdjustmentMode` was set to
`UIViewTintAdjustmentModeDimmed`. Changing it to
`UIViewTintAdjustmentModeNormal` resolves the issue.
## Test Plan
Example apps -> `Test2455`
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
# Summary
Implement proper handling for filter region according to the specs:
*
[FilterEffectsRegion](https://www.w3.org/TR/SVG11/filters.html#FilterEffectsRegion)
*
[FilterPrimitiveSubRegion](https://www.w3.org/TR/SVG11/filters.html#FilterPrimitiveSubRegion)
enabling user to specify
* `filterUnits`
* `primitiveUnits`
* `x`
* `y`
* `width`
* `height`
on `Filter` element and the last four on filter primitives.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| MacOS | ✅ |
| Android | ✅ |
| Web | ✅ |
<!-- 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>
<!-- 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
- 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>
