fix: animated transform last frame

[jakex7]

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
before.fix.2024-11-28.mov	after.fix.2024-11-28.mov

Test Plan

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	✅