mirror of
https://github.com/zoriya/react-native-svg.git
synced 2025-12-06 07:06:11 +00:00
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:
@@ -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 />;
|
||||
|
||||
36
TestsExample/src/Test2327.tsx
Normal file
36
TestsExample/src/Test2327.tsx
Normal 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>
|
||||
);
|
||||
};
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user