mirror of
https://github.com/zoriya/react-native-svg.git
synced 2026-06-01 14:15:03 +00:00
fix: new arch invalidate on mount/unmount (#2318)
# Summary
On iOS with the new architecture, when mounting or unmounting a
component, changes were not visible because `invalidate` wasn't called.
These changes override `mountChildComponentView` and
`unmountChildComponentView` to ensure that invalidate is called when
`RNSVGNode` is mounted or unmounted.
## Test Plan
`TestExample` app -> `MountUnmount` example
```tsx
import React from 'react';
import {Button, Text, View} from 'react-native';
import {Rect, Svg} from 'react-native-svg';
export default () => {
const [show, setShow] = React.useState(true);
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Blue rect is mounted: {show ? 'true' : 'false'}</Text>
<Svg height="300" width="300">
{show ? (
<Rect x="100" y="100" width="100" height="100" fill="blue" />
) : null}
</Svg>
<Button title="Toggle" onPress={() => setShow(!show)} />
</View>
);
};
```
https://github.com/software-mansion/react-native-svg/assets/39670088/0eaf9a61-b47b-4f89-a7c7-a67375e2e63e
https://github.com/software-mansion/react-native-svg/assets/39670088/709feedf-63c1-47d7-b799-f3899278fe77
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
This commit is contained in:
@@ -59,6 +59,20 @@ CGFloat const RNSVG_DEFAULT_FONT_SIZE = 12;
|
||||
[self invalidate];
|
||||
}
|
||||
|
||||
#ifdef RCT_NEW_ARCH_ENABLED
|
||||
- (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
|
||||
|
||||
- (void)didUpdateReactSubviews
|
||||
{
|
||||
// Do nothing, as subviews are inserted by insertReactSubview:
|
||||
|
||||
Reference in New Issue
Block a user