Animating SVGs with reanimated are not native animations

I have noticed that when I use this library to perform animations on svgs from react-native-svg, the animations are all occurring on the javascript thread. I have included a basic snippet of animating a Circle using both reanimated and core animated library, you will notice there is no communication across the bridge for the core animated version, but many for the reanimated version.

import { View, Button, Animated as RNAnimated } from 'react-native';
import Animated, { Easing } from 'react-native-reanimated';
import Svg, { Circle } from 'react-native-svg';
import React from 'react';

const AnimatedCircle = Animated.createAnimatedComponent(Circle);
const AnimatedCircleRN = RNAnimated.createAnimatedComponent(Circle);

export default function App() {
  const transX = React.useRef(new Animated.Value(0));
  const transXRN = React.useRef(new RNAnimated.Value(0));

  const anim = Animated.timing(transX.current, {
    duration: 2000,
    toValue: 1,
    easing: Easing.inOut(Easing.ease),
  });

  const animRN = RNAnimated.timing(transXRN.current, {
    duration: 2000,
    toValue: 1,
    useNativeDriver: true,
  });

  const translateX = Animated.interpolate(transX.current, {
    inputRange: [0, 1],
    outputRange: [20, 200],
  });

  const translateXRN = transXRN.current.interpolate({
    inputRange: [0, 1],
    outputRange: [20, 200],
  });

  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <Svg width="300" height="100">
        <AnimatedCircle fill="red" r="50" y={50} cx={translateX} />
      </Svg>

      <Button title="Animated With Reanimated" onPress={() => anim.start()} />

      <Svg width="300" height="100">
        <AnimatedCircleRN fill="red" r="50" y={50} cx={translateXRN} />
      </Svg>

      <Button title="Animated with core React Native" onPress={() => animRN.start()} />
    </View>
  );
}

[owinter86]

Looks like the undocumented addWhitelistedNativeProps solves this issue.

Animated.addWhitelistedNativeProps({ cx: true }); will ensure that this animated value is not sent back as a prop update to JS.

[owinter86]

So the issue seems to be that the react native svg props are not inferred as nativeProps so when they are updated on the native side for ios

https://github.com/software-mansion/react-native-reanimated/blob/8c0fc3f20bc7b6e1f9802b87a4918238db98054e/ios/Nodes/REAPropsNode.m#L67-L82

They will update on the native side, then trigger an event to update the values on the JS side onReanimatedPropsChange, which will then trigger a updateView message across the bridge to then update tme native side.

for this particular issue If I change theif (jsProps.count > 0) conditional to then update the nativeProps rather than emit the event back to JS, then this solves the issue shown above.

[self.nodesManager enqueueUpdateViewOnNativeThread:_connectedViewTag viewName:_connectedViewName nativeProps:jsProps];

So to solve the SVG animations issues then you would need to directly set the nativeProps.