diff --git a/android/src/main/java/com/horcrux/svg/ClipPathView.java b/android/src/main/java/com/horcrux/svg/ClipPathView.java index a81891674..275a94f44 100644 --- a/android/src/main/java/com/horcrux/svg/ClipPathView.java +++ b/android/src/main/java/com/horcrux/svg/ClipPathView.java @@ -31,7 +31,11 @@ void draw(Canvas canvas, Paint paint, float opacity) { @Override void saveDefinition() { + boolean shouldInvalidate = getSvgView().getDefinedClipPath(mName) != null; getSvgView().defineClipPath(this, mName); + if (shouldInvalidate) { + invalidate(); + } } @Override 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 ( + + + + + + + + + + + + + + {/* It works if I move the AnimatedRect here */} + {/* */} + + + ); +} + +export default LiquidTank;