From c617dec1c5e06afd7fb45e3a5cf091ea13166191 Mon Sep 17 00:00:00 2001
From: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
Date: Thu, 28 Nov 2024 12:44:55 +0100
Subject: [PATCH] fix: animated transform last frame (#2553)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Summary

When using the Animated API for animations, it sends the last frame as
JavaScript-parsed (matrix) updates in addition to native (transform)
updates. ~~As a result, we need to ignore one of them.~~ I believe
there's no need to differentiate between native and JavaScript
updates—we can simply save both to the same value (mMatrix). By doing
so, we can avoid duplicating the transforms.

| Before | After |
|--------|--------|
| <video
src="https://github.com/user-attachments/assets/868cc778-4b88-4473-85b5-9665b4b241aa">
| <video
src="https://github.com/user-attachments/assets/c6d17b7b-7c9a-47c3-8286-2d9b5720f261">
|




## Test Plan

```jsx
import React, {useEffect} from 'react';
import {Animated, useAnimatedValue, View} from 'react-native';
import {Rect, Svg} from 'react-native-svg';

const AnimatedRect = Animated.createAnimatedComponent(Rect);
function AnimatedJumpIssue() {
  const animatedValue = useAnimatedValue(100);
  return (
    <>
      <View style={{borderColor: 'black', borderWidth: 1}}>
        <Svg height="100" width="400">
          <AnimatedRect
            x="0"
            y="0"
            width="100"
            height="100"
            fill="black"
            transform={[{translateX: animatedValue}]}
          />
        </Svg>
      </View>
      <Button
        title="Press me"
        onPress={() => {
          Animated.timing(animatedValue, {
            toValue: 200,
            duration: 3000,
            useNativeDriver: true,
          }).start();
        }}
      />
    </>
  );
}
```

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| Android |    ✅      |
| iOS |    ✅      |
| macOS |    ✅      |
---
 android/src/main/java/com/horcrux/svg/GroupView.java |  5 +----
 .../main/java/com/horcrux/svg/RenderableView.java    |  2 +-
 .../java/com/horcrux/svg/RenderableViewManager.java  |  4 ++--
 android/src/main/java/com/horcrux/svg/TSpanView.java |  2 +-
 android/src/main/java/com/horcrux/svg/UseView.java   |  2 +-
 .../src/main/java/com/horcrux/svg/VirtualView.java   |  5 +----
 apple/Elements/RNSVGForeignObject.mm                 |  3 +--
 apple/Elements/RNSVGGroup.mm                         |  7 ++-----
 apple/Elements/RNSVGImage.mm                         |  3 +--
 apple/Elements/RNSVGUse.mm                           |  4 +---
 apple/RNSVGNode.h                                    |  4 ++--
 apple/RNSVGNode.mm                                   | 12 +++---------
 apple/RNSVGRenderable.mm                             |  5 +----
 apple/Utils/RNSVGFabricConversions.h                 | 11 ++++++-----
 apple/ViewManagers/RNSVGNodeManager.mm               |  1 -
 15 files changed, 24 insertions(+), 46 deletions(-)

diff --git a/android/src/main/java/com/horcrux/svg/GroupView.java b/android/src/main/java/com/horcrux/svg/GroupView.java
index 9075b7c1..d5df75bc 100644
--- a/android/src/main/java/com/horcrux/svg/GroupView.java
+++ b/android/src/main/java/com/horcrux/svg/GroupView.java
@@ -58,9 +58,6 @@ class GroupView extends RenderableView {
     if (mMatrix != null) {
       mMatrix.mapRect(clipBounds);
     }
-    if (mTransform != null) {
-      mTransform.mapRect(clipBounds);
-    }
     mGlyphContext = new GlyphContext(mScale, clipBounds.width(), clipBounds.height());
   }
 
@@ -258,7 +255,7 @@ class GroupView extends RenderableView {
 
   @Override
   int hitTest(final float[] src) {
-    if (!mInvertible || !mTransformInvertible) {
+    if (!mInvertible) {
       return -1;
     }
 
diff --git a/android/src/main/java/com/horcrux/svg/RenderableView.java b/android/src/main/java/com/horcrux/svg/RenderableView.java
index a0b19ea9..0e7dad7b 100644
--- a/android/src/main/java/com/horcrux/svg/RenderableView.java
+++ b/android/src/main/java/com/horcrux/svg/RenderableView.java
@@ -677,7 +677,7 @@ public abstract class RenderableView extends VirtualView implements ReactHitSlop
 
   @Override
   int hitTest(final float[] src) {
-    if (mPath == null || !mInvertible || !mTransformInvertible) {
+    if (mPath == null || !mInvertible) {
       return -1;
     }
 
diff --git a/android/src/main/java/com/horcrux/svg/RenderableViewManager.java b/android/src/main/java/com/horcrux/svg/RenderableViewManager.java
index 740f3095..eedd4f46 100644
--- a/android/src/main/java/com/horcrux/svg/RenderableViewManager.java
+++ b/android/src/main/java/com/horcrux/svg/RenderableViewManager.java
@@ -518,8 +518,8 @@ class VirtualViewManager<V extends VirtualView> extends ViewGroupManager<Virtual
     }
 
     Matrix m = node.getMatrix();
-    node.mTransform = m;
-    node.mTransformInvertible = m.invert(node.mInvTransform);
+    node.mMatrix = m;
+    node.mInvertible = m.invert(node.mInvMatrix);
   }
 
   @ReactProp(name = "transform")
diff --git a/android/src/main/java/com/horcrux/svg/TSpanView.java b/android/src/main/java/com/horcrux/svg/TSpanView.java
index 9b5cb6b2..708f17fc 100644
--- a/android/src/main/java/com/horcrux/svg/TSpanView.java
+++ b/android/src/main/java/com/horcrux/svg/TSpanView.java
@@ -1212,7 +1212,7 @@ class TSpanView extends TextView {
     if (mContent == null) {
       return super.hitTest(src);
     }
-    if (mPath == null || !mInvertible || !mTransformInvertible) {
+    if (mPath == null || !mInvertible) {
       return -1;
     }
 
diff --git a/android/src/main/java/com/horcrux/svg/UseView.java b/android/src/main/java/com/horcrux/svg/UseView.java
index b0cf2b7c..7e49f8c4 100644
--- a/android/src/main/java/com/horcrux/svg/UseView.java
+++ b/android/src/main/java/com/horcrux/svg/UseView.java
@@ -101,7 +101,7 @@ class UseView extends RenderableView {
 
   @Override
   int hitTest(float[] src) {
-    if (!mInvertible || !mTransformInvertible) {
+    if (!mInvertible) {
       return -1;
     }
 
diff --git a/android/src/main/java/com/horcrux/svg/VirtualView.java b/android/src/main/java/com/horcrux/svg/VirtualView.java
index 7846906c..80bbf0cd 100644
--- a/android/src/main/java/com/horcrux/svg/VirtualView.java
+++ b/android/src/main/java/com/horcrux/svg/VirtualView.java
@@ -54,13 +54,11 @@ public abstract class VirtualView extends ReactViewGroup {
   float mOpacity = 1f;
   Matrix mCTM = new Matrix();
   Matrix mMatrix = new Matrix();
-  Matrix mTransform = new Matrix();
   Matrix mInvCTM = new Matrix();
   Matrix mInvMatrix = new Matrix();
   final Matrix mInvTransform = new Matrix();
   boolean mInvertible = true;
   boolean mCTMInvertible = true;
-  boolean mTransformInvertible = true;
   private RectF mClientRect;
 
   int mClipRule;
@@ -249,7 +247,7 @@ public abstract class VirtualView extends ReactViewGroup {
    */
   int saveAndSetupCanvas(Canvas canvas, Matrix ctm) {
     int count = canvas.save();
-    mCTM.setConcat(mMatrix, mTransform);
+    mCTM.set(mMatrix);
     canvas.concat(mCTM);
     mCTM.preConcat(ctm);
     mCTMInvertible = mCTM.invert(mInvCTM);
@@ -360,7 +358,6 @@ public abstract class VirtualView extends ReactViewGroup {
                 ? mClipNode.getPath(canvas, paint)
                 : mClipNode.getPath(canvas, paint, Region.Op.UNION);
         clipPath.transform(mClipNode.mMatrix);
-        clipPath.transform(mClipNode.mTransform);
         switch (mClipRule) {
           case CLIP_RULE_EVENODD:
             clipPath.setFillType(Path.FillType.EVEN_ODD);
diff --git a/apple/Elements/RNSVGForeignObject.mm b/apple/Elements/RNSVGForeignObject.mm
index 16472611..7b8b531f 100644
--- a/apple/Elements/RNSVGForeignObject.mm
+++ b/apple/Elements/RNSVGForeignObject.mm
@@ -160,9 +160,8 @@ using namespace facebook::react;
     self.ctm = svgToClientTransform;
     self.screenCTM = current;
 
-    CGAffineTransform transform = CGAffineTransformConcat(self.matrix, self.transforms);
     CGPoint mid = CGPointMake(CGRectGetMidX(bounds), CGRectGetMidY(bounds));
-    CGPoint center = CGPointApplyAffineTransform(mid, transform);
+    CGPoint center = CGPointApplyAffineTransform(mid, self.matrix);
 
     self.bounds = bounds;
     if (!isnan(center.x) && !isnan(center.y)) {
diff --git a/apple/Elements/RNSVGGroup.mm b/apple/Elements/RNSVGGroup.mm
index 44acf630..f62c11de 100644
--- a/apple/Elements/RNSVGGroup.mm
+++ b/apple/Elements/RNSVGGroup.mm
@@ -139,9 +139,8 @@ using namespace facebook::react;
     self.ctm = svgToClientTransform;
     self.screenCTM = current;
 
-    CGAffineTransform transform = CGAffineTransformConcat(self.matrix, self.transforms);
     CGPoint mid = CGPointMake(CGRectGetMidX(bounds), CGRectGetMidY(bounds));
-    CGPoint center = CGPointApplyAffineTransform(mid, transform);
+    CGPoint center = CGPointApplyAffineTransform(mid, self.matrix);
 
     self.bounds = bounds;
     if (!isnan(center.x) && !isnan(center.y)) {
@@ -163,7 +162,6 @@ using namespace facebook::react;
   }
 #endif // macOS]
   clipBounds = CGRectApplyAffineTransform(clipBounds, self.matrix);
-  clipBounds = CGRectApplyAffineTransform(clipBounds, self.transforms);
   CGFloat width = CGRectGetWidth(clipBounds);
   CGFloat height = CGRectGetHeight(clipBounds);
 
@@ -200,7 +198,7 @@ using namespace facebook::react;
   CGMutablePathRef __block path = CGPathCreateMutable();
   [self traverseSubviews:^(RNSVGNode *node) {
     if ([node isKindOfClass:[RNSVGNode class]] && ![node isKindOfClass:[RNSVGMask class]]) {
-      CGAffineTransform transform = CGAffineTransformConcat(node.matrix, node.transforms);
+      CGAffineTransform transform = node.matrix;
       CGPathAddPath(path, &transform, [node getPath:context]);
       CGPathAddPath(path, &transform, [node markerPath]);
       node.dirty = false;
@@ -216,7 +214,6 @@ using namespace facebook::react;
 - (RNSVGPlatformView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
 {
   CGPoint transformed = CGPointApplyAffineTransform(point, self.invmatrix);
-  transformed = CGPointApplyAffineTransform(transformed, self.invTransform);
 
   if (!CGRectContainsPoint(self.pathBounds, transformed)) {
     return nil;
diff --git a/apple/Elements/RNSVGImage.mm b/apple/Elements/RNSVGImage.mm
index ffe2486c..4f851495 100644
--- a/apple/Elements/RNSVGImage.mm
+++ b/apple/Elements/RNSVGImage.mm
@@ -356,9 +356,8 @@ using namespace facebook::react;
   self.ctm = svgToClientTransform;
   self.screenCTM = current;
 
-  CGAffineTransform transform = CGAffineTransformConcat(self.matrix, self.transforms);
   CGPoint mid = CGPointMake(CGRectGetMidX(bounds), CGRectGetMidY(bounds));
-  CGPoint center = CGPointApplyAffineTransform(mid, transform);
+  CGPoint center = CGPointApplyAffineTransform(mid, self.matrix);
 
   self.bounds = bounds;
   if (!isnan(center.x) && !isnan(center.y)) {
diff --git a/apple/Elements/RNSVGUse.mm b/apple/Elements/RNSVGUse.mm
index 63b987c5..9a2d2d2d 100644
--- a/apple/Elements/RNSVGUse.mm
+++ b/apple/Elements/RNSVGUse.mm
@@ -176,9 +176,8 @@ using namespace facebook::react;
   self.ctm = svgToClientTransform;
   self.screenCTM = current;
 
-  CGAffineTransform transform = CGAffineTransformConcat(self.matrix, self.transforms);
   CGPoint mid = CGPointMake(CGRectGetMidX(bounds), CGRectGetMidY(bounds));
-  CGPoint center = CGPointApplyAffineTransform(mid, transform);
+  CGPoint center = CGPointApplyAffineTransform(mid, self.matrix);
 
   self.bounds = bounds;
   if (!isnan(center.x) && !isnan(center.y)) {
@@ -190,7 +189,6 @@ using namespace facebook::react;
 - (RNSVGPlatformView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
 {
   CGPoint transformed = CGPointApplyAffineTransform(point, self.invmatrix);
-  transformed = CGPointApplyAffineTransform(transformed, self.invTransform);
   RNSVGNode const *definedTemplate = [self.svgView getDefinedTemplate:self.href];
   if (event) {
     self.active = NO;
diff --git a/apple/RNSVGNode.h b/apple/RNSVGNode.h
index 51cb6959..1da838eb 100644
--- a/apple/RNSVGNode.h
+++ b/apple/RNSVGNode.h
@@ -48,9 +48,7 @@ extern CGFloat const RNSVG_DEFAULT_FONT_SIZE;
 @property (nonatomic, assign) CGAffineTransform ctm;
 @property (nonatomic, assign) CGAffineTransform screenCTM;
 @property (nonatomic, assign) CGAffineTransform matrix;
-@property (nonatomic, assign) CGAffineTransform transforms;
 @property (nonatomic, assign) CGAffineTransform invmatrix;
-@property (nonatomic, assign) CGAffineTransform invTransform;
 @property (nonatomic, assign) BOOL active;
 @property (nonatomic, assign) BOOL dirty;
 @property (nonatomic, assign) BOOL merging;
@@ -148,4 +146,6 @@ extern CGFloat const RNSVG_DEFAULT_FONT_SIZE;
 
 - (CGFloat)getCanvasHeight;
 
+- (void)setTransforms:(CGAffineTransform)transforms;
+
 @end
diff --git a/apple/RNSVGNode.mm b/apple/RNSVGNode.mm
index 6dfa3a12..7e7b98fc 100644
--- a/apple/RNSVGNode.mm
+++ b/apple/RNSVGNode.mm
@@ -38,8 +38,6 @@ CGFloat const RNSVG_DEFAULT_FONT_SIZE = 12;
     self.opaque = false;
 #endif
     self.matrix = CGAffineTransformIdentity;
-    self.transforms = CGAffineTransformIdentity;
-    self.invTransform = CGAffineTransformIdentity;
     _merging = false;
     _dirty = false;
   }
@@ -250,11 +248,11 @@ CGFloat const RNSVG_DEFAULT_FONT_SIZE = 12;
 
 - (void)setTransforms:(CGAffineTransform)transforms
 {
-  if (CGAffineTransformEqualToTransform(transforms, _transforms)) {
+  if (CGAffineTransformEqualToTransform(transforms, _matrix)) {
     return;
   }
 
-  _transforms = transforms;
+  _matrix = transforms;
   [self invalidate];
 }
 
@@ -377,7 +375,7 @@ CGFloat const RNSVG_DEFAULT_FONT_SIZE = 12;
     if (_cachedClipPath) {
       CGPathRelease(_cachedClipPath);
     }
-    CGAffineTransform transform = CGAffineTransformConcat(_clipNode.matrix, _clipNode.transforms);
+    CGAffineTransform transform = _clipNode.matrix;
     _cachedClipPath = CGPathCreateCopyByTransformingPath([_clipNode getPath:context], &transform);
   }
 
@@ -630,8 +628,6 @@ CGFloat const RNSVG_DEFAULT_FONT_SIZE = 12;
   self.opaque = false;
 #endif
   self.matrix = CGAffineTransformIdentity;
-  self.transforms = CGAffineTransformIdentity;
-  self.invTransform = CGAffineTransformIdentity;
   _merging = false;
   _dirty = false;
 
@@ -652,9 +648,7 @@ CGFloat const RNSVG_DEFAULT_FONT_SIZE = 12;
   _ctm = CGAffineTransformIdentity;
   _screenCTM = CGAffineTransformIdentity;
   _matrix = CGAffineTransformIdentity;
-  _transforms = CGAffineTransformIdentity;
   _invmatrix = CGAffineTransformIdentity;
-  _invTransform = CGAffineTransformIdentity;
   _active = NO;
   _skip = NO;
   if (_markerPath) {
diff --git a/apple/RNSVGRenderable.mm b/apple/RNSVGRenderable.mm
index 6319a91a..5f7bdd19 100644
--- a/apple/RNSVGRenderable.mm
+++ b/apple/RNSVGRenderable.mm
@@ -255,7 +255,6 @@ UInt32 saturate(CGFloat value)
   // This needs to be painted on a layer before being composited.
   CGContextSaveGState(context);
   CGContextConcatCTM(context, self.matrix);
-  CGContextConcatCTM(context, self.transforms);
   CGContextSetAlpha(context, self.opacity);
 
   [self beginTransparencyLayer:context];
@@ -530,8 +529,7 @@ UInt32 saturate(CGFloat value)
   }
 
   CGAffineTransform vbmatrix = self.svgView.getViewBoxTransform;
-  CGAffineTransform transform = CGAffineTransformConcat(self.matrix, self.transforms);
-  CGAffineTransform matrix = CGAffineTransformConcat(transform, vbmatrix);
+  CGAffineTransform matrix = CGAffineTransformConcat(self.matrix, vbmatrix);
 
   CGRect bounds = CGRectMake(0, 0, CGRectGetWidth(clientRect), CGRectGetHeight(clientRect));
   CGPoint mid = CGPointMake(CGRectGetMidX(pathBounds), CGRectGetMidY(pathBounds));
@@ -687,7 +685,6 @@ UInt32 saturate(CGFloat value)
   }
 
   CGPoint transformed = CGPointApplyAffineTransform(point, self.invmatrix);
-  transformed = CGPointApplyAffineTransform(transformed, self.invTransform);
 
   if (!CGRectContainsPoint(self.pathBounds, transformed) && !CGRectContainsPoint(self.markerBounds, transformed)) {
     return nil;
diff --git a/apple/Utils/RNSVGFabricConversions.h b/apple/Utils/RNSVGFabricConversions.h
index ffdb0699..66203341 100644
--- a/apple/Utils/RNSVGFabricConversions.h
+++ b/apple/Utils/RNSVGFabricConversions.h
@@ -71,11 +71,12 @@ void setCommonNodeProps(const T &nodeProps, RNSVGNode *node)
         nodeProps.matrix.at(4),
         nodeProps.matrix.at(5));
   }
-  auto newTransform = nodeProps.resolveTransform(MinimalLayoutMetrics);
-  CATransform3D transform3d = RCTCATransform3DFromTransformMatrix(newTransform);
-  CGAffineTransform transform = CATransform3DGetAffineTransform(transform3d);
-  node.invTransform = CGAffineTransformInvert(transform);
-  node.transforms = transform;
+  if (nodeProps.transform.operations.size() > 0) {
+    auto newTransform = nodeProps.resolveTransform(MinimalLayoutMetrics);
+    CATransform3D transform3d = RCTCATransform3DFromTransformMatrix(newTransform);
+    CGAffineTransform transform = CATransform3DGetAffineTransform(transform3d);
+    node.transforms = transform;
+  }
   node.mask = RCTNSStringFromStringNilIfEmpty(nodeProps.mask);
   node.markerStart = RCTNSStringFromStringNilIfEmpty(nodeProps.markerStart);
   node.markerMid = RCTNSStringFromStringNilIfEmpty(nodeProps.markerMid);
diff --git a/apple/ViewManagers/RNSVGNodeManager.mm b/apple/ViewManagers/RNSVGNodeManager.mm
index 7a483687..dd563eb0 100644
--- a/apple/ViewManagers/RNSVGNodeManager.mm
+++ b/apple/ViewManagers/RNSVGNodeManager.mm
@@ -32,7 +32,6 @@ RCT_CUSTOM_VIEW_PROPERTY(transform, CATransform3D, RNSVGNode)
 {
   CATransform3D transform3d = json ? [RCTConvert CATransform3D:json] : defaultView.layer.transform;
   CGAffineTransform transform = CATransform3DGetAffineTransform(transform3d);
-  view.invTransform = CGAffineTransformInvert(transform);
   view.transforms = transform;
 }
 RCT_EXPORT_VIEW_PROPERTY(mask, NSString)