From 3718669077463eaf5824c71e21e0773d82aa13ed Mon Sep 17 00:00:00 2001
From: bohdanprog <bohdan.artiukhov@swmansion.com>
Date: Thu, 3 Oct 2024 16:20:40 +0200
Subject: [PATCH 1/3] feat: add test case

---
 apps/test-examples/index.tsx        |  1 +
 apps/test-examples/src/Test1719.tsx | 71 +++++++++++++++++++++++++++++
 2 files changed, 72 insertions(+)
 create mode 100644 apps/test-examples/src/Test1719.tsx

diff --git a/apps/test-examples/index.tsx b/apps/test-examples/index.tsx
index 05d853456..352b6ad21 100644
--- a/apps/test-examples/index.tsx
+++ b/apps/test-examples/index.tsx
@@ -9,6 +9,7 @@ import Test1374 from './src/Test1374';
 import Test1442 from './src/Test1442';
 import Test1451 from './src/Test1451';
 import Test1718 from './src/Test1718';
+import Test1719 from './src/Test1719';
 import Test1790 from './src/Test1790';
 import Test1813 from './src/Test1813';
 import Test1845 from './src/Test1845';
diff --git a/apps/test-examples/src/Test1719.tsx b/apps/test-examples/src/Test1719.tsx
new file mode 100644
index 000000000..6453e3a80
--- /dev/null
+++ b/apps/test-examples/src/Test1719.tsx
@@ -0,0 +1,71 @@
+import {useEffect, useRef} from 'react';
+import {View, Animated} from 'react-native';
+import {Svg, Path, Rect, Defs, ClipPath} from 'react-native-svg';
+
+const AnimatedRect = Animated.createAnimatedComponent(Rect);
+
+function LiquidTank() {
+  const liquidValue = 50;
+
+  const factor = 1.54; // 154 / 100
+  const height = factor * -liquidValue;
+
+  const heightAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    heightAnim.setValue(0);
+    const fillAnimation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(heightAnim, {
+          toValue: height,
+          duration: 500,
+          useNativeDriver: true,
+        }),
+        Animated.timing(heightAnim, {
+          toValue: 0,
+          duration: 500,
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+    fillAnimation.start();
+  }, [height]);
+
+  return (
+    <View>
+      <Svg width={250} height={100} viewBox="0 0 375 154">
+        <Defs>
+          <ClipPath id={`clip-${height}`}>
+            <AnimatedRect x={0} y={154} width={400} height={heightAnim} />
+          </ClipPath>
+        </Defs>
+
+        <Path
+          fill="blue"
+          clipPath={`url(#clip-${height})`}
+          d="M375 77c0-26.515-13.353-50.48-33.922-67.641C335.034 4.316 327.339 2 318.606 2v150c8.733 0 17.362-2.311 23.376-7.377C362.353 127.462 375 103.506 375 77zm-56.394 75V2H56.394v150h262.212zM33.018 9.377C12.647 26.537 0 50.494 0 77c0 26.505 12.647 50.462 33.018 67.623C39.032 149.689 47.66 152 56.394 152V2C47.66 2 39.032 4.311 33.018 9.377z"
+        />
+        <Path
+          fill="blue"
+          clipPath={`url(#clip-${height})`}
+          d="M86.333 0h17.334C104.955 0 105 .43 105 2.04v2.04H85V2.04C85 .43 85.045 0 86.333 0zM85 149.921v2.039c0 1.61.045 2.04 1.333 2.04h17.334c1.288 0 1.333-.43 1.333-2.04v-2.039H85z"
+        />
+        <Path
+          fill="blue"
+          clipPath={`url(#clip-${height})`}
+          d="M85 4.08v145.84h20V4.079H85zM271.333 0h17.334C289.955 0 290 .43 290 2.04v2.04h-20V2.04c0-1.61.045-2.04 1.333-2.04zM270 149.921v2.039c0 1.61.045 2.04 1.333 2.04h17.334c1.288 0 1.333-.43 1.333-2.04v-2.039h-20z"
+        />
+        <Path
+          fill="blue"
+          clipPath={`url(#clip-${height})`}
+          d="M270 4.08v145.84h20V4.079h-20z"
+        />
+
+        {/* It works if I move the AnimatedRect here */}
+        {/* <AnimatedRect fill="#00AFEA" x={0} y={154} width={400} height={heightAnim} /> */}
+      </Svg>
+    </View>
+  );
+}
+
+export default LiquidTank;

From 0558c920206dd823a8a94fc6b80d16ab551cc240 Mon Sep 17 00:00:00 2001
From: bohdanprog <bohdan.artiukhov@swmansion.com>
Date: Thu, 3 Oct 2024 16:23:07 +0200
Subject: [PATCH 2/3] feat: add invalidate to saveDefinition at ClipPathView

---
 android/src/main/java/com/horcrux/svg/ClipPathView.java | 1 +
 1 file changed, 1 insertion(+)

diff --git a/android/src/main/java/com/horcrux/svg/ClipPathView.java b/android/src/main/java/com/horcrux/svg/ClipPathView.java
index a81891674..f0a226680 100644
--- a/android/src/main/java/com/horcrux/svg/ClipPathView.java
+++ b/android/src/main/java/com/horcrux/svg/ClipPathView.java
@@ -32,6 +32,7 @@ void draw(Canvas canvas, Paint paint, float opacity) {
   @Override
   void saveDefinition() {
     getSvgView().defineClipPath(this, mName);
+    invalidate();
   }
 
   @Override

From ccaafee45c10e0870457faa15ed80e194913febd Mon Sep 17 00:00:00 2001
From: Bohdan Artiukhov <bohdanprog@gmail.com>
Date: Fri, 4 Oct 2024 15:32:48 +0200
Subject: [PATCH 3/3] Update
 android/src/main/java/com/horcrux/svg/ClipPathView.java

Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
---
 android/src/main/java/com/horcrux/svg/ClipPathView.java | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/android/src/main/java/com/horcrux/svg/ClipPathView.java b/android/src/main/java/com/horcrux/svg/ClipPathView.java
index f0a226680..275a94f44 100644
--- a/android/src/main/java/com/horcrux/svg/ClipPathView.java
+++ b/android/src/main/java/com/horcrux/svg/ClipPathView.java
@@ -31,8 +31,11 @@ void draw(Canvas canvas, Paint paint, float opacity) {
 
   @Override
   void saveDefinition() {
+    boolean shouldInvalidate = getSvgView().getDefinedClipPath(mName) != null;
     getSvgView().defineClipPath(this, mName);
-    invalidate();
+    if (shouldInvalidate) {
+      invalidate();
+    }
   }
 
   @Override