From e2d9cbf1e357edea7c625a1063e6b3cc1c4d6930 Mon Sep 17 00:00:00 2001
From: Mateusz Titz <titzmateusz@gmail.com>
Date: Thu, 4 Jul 2024 15:28:47 +0200
Subject: [PATCH] fix: add correct invalidate calls to SvgView on ios with test
 (#2327)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- 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
---
 TestsExample/App.js            |  1 +
 TestsExample/src/Test2327.tsx  | 36 ++++++++++++++++++++++++++++++++++
 apple/Elements/RNSVGSvgView.mm | 13 ++++++++++++
 3 files changed, 50 insertions(+)
 create mode 100644 TestsExample/src/Test2327.tsx

diff --git a/TestsExample/App.js b/TestsExample/App.js
index d945a486..7ed18944 100644
--- a/TestsExample/App.js
+++ b/TestsExample/App.js
@@ -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 />;
diff --git a/TestsExample/src/Test2327.tsx b/TestsExample/src/Test2327.tsx
new file mode 100644
index 00000000..e4d07452
--- /dev/null
+++ b/TestsExample/src/Test2327.tsx
@@ -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>
+  );
+};
diff --git a/apple/Elements/RNSVGSvgView.mm b/apple/Elements/RNSVGSvgView.mm
index 7addf84e..eca7cd34 100644
--- a/apple/Elements/RNSVGSvgView.mm
+++ b/apple/Elements/RNSVGSvgView.mm
@@ -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