# Summary
* Add results alias in `FeDropShadow`
* Import React in every tsx filter file to satisfy typescript/eslint
* Replace `<>` with `<React.Fragment>` in `FeDropShadow`
# Summary
* Bump react-native and other packages (babel, eslint, prettier,
`@types`) to resolve errors in
https://github.com/software-mansion/react-native-svg/pull/2586
* Cleanup unused/unnecessary devDependencies
## Test Plan
Lib should work exactly the same as before.
# Summary
The SVG specification does not strictly standardize linking, and most
browsers permit the use of `'` as a wrapper in `url` links. As a result,
I've added support for URLs such as `url('#id')`.
## Test Plan
`url(#id)` and `url('#id')` should do the exact same thing.
Closes#1768
# Summary
Implement custom shadow nodes for nearly all `Svg` components. While
it's a foundation for numerous upcoming changes, it currently addresses
and resolves#2544.
## Test Plan
There shouldn't be any noticeable changes, and everything should
function as before, except that `onLayout` will now be triggered only
once and with the correct dimensions.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| MacOS | ✅ |
| Android | ✅ |
---------
Co-authored-by: Jakub Piasecki <jakubpiasecki67@gmail.com>
# Summary
When using `SvgXml` or `SvgCss`, an `id` attribute gets converted into a
`number` instead of a `string`, which causes a crash because the native
side expects a string value.
```js
import {SvgXml} from 'react-native-svg';
import {SvgCss} from 'react-native-svg/css';
```
## Test Plan
This example should not crash:
```jsx
import {SvgCss} from 'react-native-svg/css';
const svgXml = `
<svg width="100" height="100" viewBox="0 0 100 100">
<filter x="0%" y="0%" width="100" height="100" id="0123456789">
<feFlood flood-color="red" />
</filter>
<circle cx="50" cy="50" r="50" filter="url(#0123456789)" />
</svg>
`;
function Example() {
return <SvgCss xml={svgXml} />;
}
```
# 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
Fixes#2529
`FeBlend` should have default blend mode set to `normal`
## Test Plan
Test case specified in #2529
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Android | ✅ |
# Summary
Closes#2523
Since `FeBlend`, `FeComposite`, `FeDropShadow` and `FeFlood` is already
supported (see: #2362) we should remove it from
`warnUnimplementedFilter` list
# Summary
Add basic support for React Server Components support. This package
could surely be improved (at least on web) but there are a lot of class
components (unsupported in RSC) which need to be rewritten to function
components in order to compile down further. For now, I'm opting the
entire package.
Related PRs for more context:
- https://github.com/necolas/react-native-web/pull/2678
- https://github.com/th3rdwave/react-native-safe-area-context/pull/502
- I've added more support for mixing export types, but it isn't perfect
https://github.com/expo/expo/pull/29426
## Test Plan
- It's kinda hard to test this E2E. I wrote a small jest runner in
jest-expo which executes in RSC mode, but it requires React 19 to work.
Here's where I tested this patch https://github.com/expo/expo/pull/29404
# Summary
After deep dive into the specification, I found out that the default
filter subregion is not equal to `0% 0% 100% 100%`, rather the size of
the parent filter region.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| MacOS | ✅ |
| 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
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
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
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
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>
# 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
Fix bug introduced in #2189,
if `style` is not provided, then `StyleSheet.flatten` returns
`undefined`, and we're trying to access `transform` of it.
## Test Plan
Run `example` app
# 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)
