# Summary
Fixes#2585
Improve the `onPress` events by ignoring touches outside the `Svg` view.
This is implemented as follows:
* on Android by clipping the Android's element dimensions to (0, 0,
canvas width, canvas height)
* on Apple by improving `hitTest` to exclude touches outside the bounds
of (0, 0, bounds width, bounds height)
https://github.com/user-attachments/assets/59417493-d849-47df-84e8-d5b0a6045b00
# 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 the Animated API for animations, it sends the last frame as
JavaScript-parsed (matrix) updates in addition to native (transform)
updates. ~~As a result, we need to ignore one of them.~~ I believe
there's no need to differentiate between native and JavaScript
updates—we can simply save both to the same value (mMatrix). By doing
so, we can avoid duplicating the transforms.
| Before | After |
|--------|--------|
| <video
src="https://github.com/user-attachments/assets/868cc778-4b88-4473-85b5-9665b4b241aa">
| <video
src="https://github.com/user-attachments/assets/c6d17b7b-7c9a-47c3-8286-2d9b5720f261">
|
## Test Plan
```jsx
import React, {useEffect} from 'react';
import {Animated, useAnimatedValue, View} from 'react-native';
import {Rect, Svg} from 'react-native-svg';
const AnimatedRect = Animated.createAnimatedComponent(Rect);
function AnimatedJumpIssue() {
const animatedValue = useAnimatedValue(100);
return (
<>
<View style={{borderColor: 'black', borderWidth: 1}}>
<Svg height="100" width="400">
<AnimatedRect
x="0"
y="0"
width="100"
height="100"
fill="black"
transform={[{translateX: animatedValue}]}
/>
</Svg>
</View>
<Button
title="Press me"
onPress={() => {
Animated.timing(animatedValue, {
toValue: 200,
duration: 3000,
useNativeDriver: true,
}).start();
}}
/>
</>
);
}
```
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Android | ✅ |
| iOS | ✅ |
| macOS | ✅ |
<!-- 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
As per the spec, bbox should not include any transformations, including
scaling. It should also not include any control points. This fixes
getBBox to give correct results matching Google Chrome, Firefox as per
the spec.
* 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)
Bug fix.
* How did you implement the solution?
Like this, see.
* What areas of the library does it impact?
getBBox API.
## Test Plan
I build some stuff that works with SVG, the results on web were
inconsistent, and digging down I realise it was a react-native-svg.
Some fun fact, there was a surprisingly similar bug related to very
confusing named (CGPathGetBoundingBox vs CGPathGetPathBoundingBox) APIs
in Firefox some years ago as well.
https://bugzilla.mozilla.org/show_bug.cgi?id=1369904
### What's required for testing (prerequisites)?
### What are the steps to reproduce (after prerequisites)?
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | 🔘# |
| Web | 🔘 *|
* Depends on the host platform. But works fine in major browsers.
# will create a follow up PR. Currently getBBox on Android doesn't
account for scaling properly.
## 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: Omeid Matten <omeid@kemene.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 | ✅ |
# Summary
Since `RNSVGPlatformView` on macOS old arch is just `RCTUIView`, we need
to add `updateReactTransformInternal` to `RNSVGSvgView`.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| MacOS | ✅ |
# 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
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 | ✅ |
# 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)
<!-- 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 is a sibling PR to:
https://github.com/software-mansion/react-native-svg/pull/2318 which
fixed missing mount/unmount methods to correctly display SVG.
This PR overrides the same `mountChildComponentView` and
`unmountChildComponentView` methods but for `RNSVGSvgView` component.
This will make the components and their behaviour aligned and more
predictable.
I included the test that specifically tests for attaching another
external svg into and already existing SVG, should catch any edge cases
with invalidation/redrawing.
## Test Plan
`TestExample` app -> `TestSvgUriUpdating` example.
https://github.com/software-mansion/react-native-svg/assets/3929868/49499914-7037-4ab0-a9a9-1e139d460117
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
## 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
# 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 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
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.
Apple made a breaking change in Xcode 15 / macOS Sonoma which breaks usages of drawRect:. You can no longer trust that the OS will provide you a dirtyRect will be within the bounds of your view. Specifically (from the appkit release notes):
Filling the dirty rect of a view inside of -drawRect. A fairly common pattern is to simply rect fill the dirty rect passed into an override of NSView.draw(). The dirty rect can now extend outside of your view’s bounds. This pattern can be adjusted by filling the bounds instead of the dirty rect, or by setting clipsToBounds = true.
This led to an unfortunate bug where any SVG drawn took up the full width/height of your window. Let's follow Apple's advice and draw using [self bounds] instead of dirtyRect.
PR restoring macos CI job and restoring usage of UIGraphicsBeginImageContextWithOptions on macos since there is no implementation for UIGraphicsImageRendererFormat there yet.
Since UIGraphicsBeginImageContextWithOptions will be depracated in iOS 17 (developer.apple.com/documentation/uikit/1623912-uigraphicsbeginimagecontextwitho), I changed the implementation to not use it and use UIGraphicsImageRenderer instead.
Also added Mask examples to be able to test it.
Changed `requireNativeComponent` to `codegenNativeComponent` so that upcoming changes (Static View Configs, Bridgeless Mode and idk what more) in `react-native` are available in the library. Also, types and native components are now taken directly from `fabric` folder to make sure the values passed to the native components are the ones defined in props. It should work on all supported versions since `codegenNativeComponent` function exists from RN v. 0.61.0. Suggested by @RSNara and @cipolleschi
Reason for [`5394bbb` (#1847)](5394bbbced):
- on `Paper`, `Animated` uses `setNativeProps` method when we set `useNativeDriver` to `false`, and does not rerender the component. Therefore, new transform lands only in `SvgView` and is parsed in `RCTViewManager.m` .
- on `Fabric`, the same code makes the components rerender. Due to this, information about new transform is passed to the `SvgView` child: `G` , making it apply translations from the transform in its `updateProps` method.
- other than `Animated` use-case, on both archs, if we just passed `transform` prop to `Svg` component, it would end up in double transformations now as well. All of those changes are due to https://github.com/software-mansion/react-native-svg/pull/1895, which added proper parsing of RN style `transform` prop (array of transformations objects) therefore making `G` properly handle `transform` prop passed from `Svg`.
Reason for [`19bcb24` (#1847)](19bcb2464b): Same as https://github.com/software-mansion/react-native-screens/pull/1624
PR aligning handling of transform prop between web and native and adding proper handling of transform prop on web.
origin prop is now treated as transform-origin since it seems like the current behavior of this prop on native platforms.
transform prop cannot be an object with transform properties since it does not provide order of transformations which would lead to undefined behavior so this option has been removed.
RN style of transform prop (array of rotation objects) can now be used
font-size on web seems to be 16px by default and it is 12 in library - maybe we should align it somehow
removed maskTransform prop since it does not exist in SVG standard and did nothing on native side
fixed typo in Fabric Pattern updateProps method
PR adding update of _props after updateProps method in order for e.g. react-native-reanimated to pick correct props when running updates. Coauthored by @tomekzaw. It is needed since RCTMountingManager reads this field as oldProps: facebook/react-native@10e47b8/React/Fabric/Mounting/RCTMountingManager.mm#L306
PR transfering Fabric specs to TS, removing unnecessary @ReactProp adnotations, unifying inheritance hierarchy across platforms, adding custom types for color and image source props so they are parsed by react-native.
Version of #1754 without usage of ComponentViews. It seems like a more proper way, but introduces the necessity of clearing whole state of each component on recycling for it not to be used when view is recycled.
Still known problems:
We stringify props of type NumberProp since codegen only accepts props of a single type. It is the fastest way of dealing with it, but maybe there could be a better way to handle it.
Image resolving should be probably handled the same as in RN core
SvgView needs to set opaque = NO so it is does not have black background (it comes from the fact that RCTViewComponentView overrides backgroundColor setter which in turn somehow messes with the view being opaque). All other svg components do it already so maybe it is not such an issue.
transform prop won't work when set natively since it is not parsed in Fabric
