Fix SVG adapter

[karol-bisztyga]

Description

There were two bugs in the SVG adapter's implementation:

• overwriting translateX
• lack of parsing translate values to numbers

Fixes #1593

code

import React, { useEffect } from 'react';
import { StyleSheet, View } from 'react-native';
import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedProps,
  Easing,
  interpolate,
  SVGAdapter,
} from 'react-native-reanimated';
import { G, Svg, Rect } from 'react-native-svg';

const AnimatedG = Animated.createAnimatedComponent(G);

export default function AnimatedSVGPropsUpdateExample(props) {
  const valueToAnimate = useSharedValue(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      valueToAnimate.value = withTiming(Math.floor(Math.random() * 15000), {
        duration: 1000,
        easing: Easing.linear,
      });
    }, 1000);
    return () => clearInterval(intervalId);
  }, []);

  const failingTransform = useAnimatedProps(
    () => {
      const yTranslate = Math.trunc(
        interpolate(valueToAnimate.value, [0, 15000], [-150, 150], {
          extrapolateLeft: 'extend',
          extrapolateRight: 'extend',
        })
      );
      return { transform: `translate(0 ${yTranslate})` };
    },
    null,
    SVGAdapter
  );

  return (
    <View
      style={[
        StyleSheet.absoluteFill,
        { alignItems: 'center', justifyContent: 'center' },
      ]}>
      <Svg style={{ position: 'absolute' }}>
        <AnimatedG animatedProps={failingTransform}>
          <Rect
            x="50"
            y="200"
            width="70"
            height="70"
            stroke="red"
            strokeWidth="2"
            fill="yellow"
          />
        </AnimatedG>
      </Svg>
    </View>
  );
}

[jakub-gonet]

Nice catch!