fix: add correct invalidate calls to SvgView on ios with test (#2327)

<!-- 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
This commit is contained in:
Mateusz Titz
2024-07-04 15:28:47 +02:00
committed by GitHub
parent fe94bd9439
commit e2d9cbf1e3
3 changed files with 50 additions and 0 deletions

View File

@@ -20,6 +20,7 @@ import Test2196 from './src/Test2196';
import Test2248 from './src/Test2248';
import Test2266 from './src/Test2266';
import Test2276 from './src/Test2276';
import Test2327 from './src/Test2327';
export default function App() {
return <ColorTest />;

View File

@@ -0,0 +1,36 @@
import React from 'react';
import {SvgUri, Circle, Svg} from 'react-native-svg';
import {Button, View} from 'react-native';
export default () => {
const [uri, setUri] = React.useState<string | null>(null);
return (
<View style={{flex: 1, paddingTop: 100}}>
<Svg width={200} height={200}>
<Circle
cx={60}
cy={60}
r={50}
stroke="black"
strokeWidth={5}
fill="none"
/>
{uri && <SvgUri uri={uri} width={80} height={80} />}
</Svg>
<Button
color={'#000000'}
title="Toggle image"
onPress={() => {
if (!uri) {
setUri(
'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/ruby.svg',
);
} else {
setUri(null);
}
}}
/>
</View>
);
};

View File

@@ -116,6 +116,19 @@ using namespace facebook::react;
_invviewBoxTransform = CGAffineTransformIdentity;
rendered = NO;
}
- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
{
[super mountChildComponentView:childComponentView index:index];
[self invalidate];
}
- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
{
[super unmountChildComponentView:childComponentView index:index];
[self invalidate];
}
#endif // RCT_NEW_ARCH_ENABLED
- (void)insertReactSubview:(RNSVGView *)subview atIndex:(NSInteger)atIndex