# 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>
# 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
Introducing the long-awaited **Filters** in `react-native-svg` 🎉
### Motivation
This PR is the beginning of bringing support of SVG Filters into
`react-native-svg`.
* **related issues**: This PR series will address the following issues:
#150, #176, #635, #883, #994, #996, #1216
* **feature overview**: This PR is a boilerplate for Filters
* introducing `Filter` component and `FeColorMatrix` as a start.
* It also introduces a new subdirectory called
`react-native-svg/filter-image` with a `FilterImage` component.
# Usage
## Filter and Fe...
Filters are compatible with the web familiar standard, so most things
should be compatible out-of-the-box and changes will be limited to using
a capital letter as it's component.
### Example
```tsx
import React from 'react';
import { FeColorMatrix, Filter, Rect, Svg } from 'react-native-svg';
export default () => {
return (
<Svg height="300" width="300">
<Filter id="myFilter">
<FeColorMatrix type="saturate" values="0.2" />
</Filter>
<Rect
x="0"
y="0"
width="300"
height="300"
fill="red"
filter="url(#myFilter)"
/>
</Svg>
);
};
```
## Filter Image
`FilterImage` is a new component that is not strictly related to SVG.
Its behavior should be the same as a regular `Image` component from
React Native with one exception - the additional prop `filters`, which
accepts an array of filters to apply to the image.
### Example
```tsx
import React from 'react';
import { StyleSheet } from 'react-native';
import { FilterImage } from 'react-native-svg/filter-image';
const myImage = require('./myImage.jpg');
export default () => {
return (
<FilterImage
style={styles.image}
source={myImage}
filters={[
{ name: 'colorMatrix', type: 'saturate', values: 0.2 },
{
name: 'colorMatrix',
type: 'matrix',
values: [
0.2, 0.2, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0,
0, 1, 0,
],
},
]}
/>
);
};
const styles = StyleSheet.create({
image: {
width: 200,
height: 200,
},
});
```
## Test Plan
**Example App**: Updated the example app with various filter effects,
showcasing real-world usage.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
## Checklist
- [x] I have tested this on a device and a simulator
- [x] I added documentation in `README.md` and `USAGE.md`
- [x] I updated the typed files (typescript)
