# Summary
Do not crash on `getCropRect` call when renderableBounds is null
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Android | ✅ |
# Summary
This fix addresses a minor bug/typo that was recently introduced, where
the filter subregion was incorrectly relying on filterUnits instead of
primitiveUnits.
# 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
[apple] Use filter region directly instead of creating new one on every
rerender.
[android] rename some variables and add temporary fix for null lengths
# 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
Without the `maskUnits` attribute, masks may not render correctly, as
seen in issue #2449. This pull request adds support for `maskUnits` and
ensures proper cropping within the mask boundaries.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| MacOS | ✅ |
| Android | ✅ |
# Summary
On Android when element before masked element has strokeOpacity
different from 1, the paint is reused to draw an offscreen layer
resulting in wrong opacity. Partially fixes (only on Android) #2449
## Test Plan
Add `stroke` and `strokeOpacity` to element directly before masked
element.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Android | ✅ |
# 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 | ✅ |
# Summary
Fixes#2428
To not introduce the breaking change in minor version, it restores the
old `SvgViewManager.java` on RN <= 72 using sourceSets
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Android | ✅ |
# Summary
Fixes#2436.
#2403 introduced shared `Paint` between the node render method and the
final bitmap. However, Paint properties are not cleared after drawing,
so we need to call the `.clear()` method and re-enable antialiasing.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Android | ✅ |
# 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 | ✅❌ |
<!-- 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
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
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>
```
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`
# Summary
Closes#2347
Fixed a problem with building an Android app, pattern matching threw an
error when we tried to build an Android app.
[Repository](https://github.com/bohdanprog/react-native-svg-error-pattern-matching)
to reproduce that error.
## Test Plan
We can easily check that build the app.
### What are the steps to reproduce (after prerequisites)?
build the app without that fix.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Android | ✅ |
# 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)
# Summary
Change data structure returned from the Image onLoad event.
Add fix in new arch for returned sizes.
## Test Plan
Manually test in both architectures and platforms.
### What's required for testing (prerequisites)?
### What are the steps to reproduce (after prerequisites)?
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
---------
Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
# Summary
Closes#1442
We want to add new props to the Image Component.
## Test Plan
Added the Test component.
Manually test that in Android and IOS platforms on new and old
Architectures.
### What are the steps to reproduce (after prerequisites)?
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
# Summary
This PR resolves an issue raised in #1451.
Currently, when a mask is used, we render the element as a bitmap (or
platform equivalent), but the bitmap's size does not update accordingly
with transformations. With these changes, the problem is addressed as
follows:
* **Android**: We utilize the original canvas layers to render the mask
and element with the appropriate blending mode.
* **iOS**: We create an offscreen context with the size multiplied by
the screen scale and apply the original UIGraphics CTM (current
transformation matrix) to the offscreen context. This ensures that the
same transformations are applied as on the original context.
Additionally, there is a significant performance improvement on Android
as we are not creating three new Bitmaps and three new Canvases.
## Test Plan
There are many ways for testing these changes, but the required ones
are:
* `TestsExample` app -> `Test1451.tsx`
* `Example` app -> Mask section
* `FabricExample` app -> Mask section
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Android | ✅ |
| iOS | ✅ |
## Preview
<img width="337" alt="image"
src="https://github.com/software-mansion/react-native-svg/assets/39670088/93dbae85-edbd-452a-84b0-9a50107b1361">
<img width="337" alt="image"
src="https://github.com/software-mansion/react-native-svg/assets/39670088/07838dff-cb2d-4072-a2fc-5c16a76f6c33">
Closes#2086
# Summary
The application crashes if an error is thrown when something goes wrong
during path parse.
## Test Plan
You can easily check in that component `Test2086` how it works after the
fix.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
# Summary
Closes#2248.
Add the ability to parse `strokeDasharray` string value on the Android
platform
## Test Plan
Manually test both platforms.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
# Summary
We had similar config in react-native-screens. It caused problem when
building Paper arch app after Fabric. Those changes help, so I'm moving
them here as well.
# Summary
Fixes android packageName by changing it in codegen configuration from
`com.horcrux.rnsvg` to `com.horcrux.svg`
## Tests
Tested with oldest supported `react-native@0.70.0` with an old
architecture and everything is working as expected.
# Summary
This PR removes the flag to include custom line breaks on `toDataUrl`
method. Some software could not read base64 with additional line break
characters, so it could lead to corrupting the image (like in
react-native-share). Fixes#1986.
## Test Plan
`TestsExample` -> `Test1986`
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
# Summary
* Fixed crash on Android when `<RadialGradient r={0}>`.
* Fixed render issue on Android and iOS when radius is zero. According
to [MDN
Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/r#radialgradient)
> A value of lower or equal to zero will cause the area to be painted as
a single color using the color and opacity of the last gradient
`<stop>`.
## Test Plan
Test is available in `TestsExample` as `Test2170`
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
Fixes#2170
# Summary
As per title, when running an app in bridgless mode the following redbox
appears:
> StaticViewConfigValidator: Invalid static view config for
'RNSVGSvgViewAndroid'.
>
> 'validAttributes.borderBlockColor' is missing.
> 'validAttributes.borderBlockEndColor' is missing.
> 'validAttributes.borderBlockStartColor' is missing.
> 'validAttributes.borderEndEndRadius' is missing.
> 'validAttributes.borderEndStartRadius' is missing.
> 'validAttributes.borderStartEndRadius' is missing.
> 'validAttributes.borderStartStartRadius' is missing.
## Test Plan
Tested that the redbox is gone.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | N/A |
| Android | ✅ |
## Checklist
<!-- Check completed item, when applicable, via: [X] -->
- [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
---------
Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
# Summary
According to [MDN
Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width),
when `strokeWidth` is not provided, the default value should be set to
`1`.
On android, when we update the `strokeWidth` prop to `undefined` it was
mistakenly converted to `0` by `SVGLength`.
Fixes#2266
## Test Plan
Test available in `TestsExample/Test2266`
### What are the steps to reproduce (after prerequisites)?
* Run `TestsExample` app
* Replace `ColorTest` with `Test2266` in `App.js`
# Summary
PR bringing proper support for react-native-reanimated in the library by using dynamics instead of strings for props that can be either string or number.
