React native SVG + Reanimated

[vkukade-altir]

I am trying to achieve something related to react-native-svg and reanimated. I am using SvgXml to dynamically re-render/change the svgs on UI thread. For that, I am using useAnimatedProps. But somehow it is not working. Does it have to do something with adaptors that we need to pass with useAnimatedProps ?

I am thinking its not working as xml is just a normal prop here and even if we use it in useAnimatedProps and use addWhitelistedNativeProps to add it as property, it won't work.

I have used following code :

import { SvgXml } from 'react-native-svg';

const AnimatedSVGXml = withAnimated(SvgXml); //withAnimated wraps SvgXml into class component

const svgXml = useSharedValue<string>(EmptySVG);

 useAnimatedReaction(
      () => {
        return position;
      },
      (currentValue, previousValue) => {
        if (currentValue !== previousValue) {
          console.log('in useAnimatedReaction svg value', currentValue, previousValue);
          //based on changes in position, I am updating svg 
          svgXml.value = currentValue;
        }
      },
    );
    
const animatedSvgProps = useAnimatedProps(() => {
      console.log('svgXml.value', svgXml.value); 
      // here I see that svgXml.value is updated. But not updated on screen. But if I remove svgXml.value and give the SVG directly it renders.
      return {
        xml: svgXml.value,
        //xml : '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>'
      };
    });
    
    
    
<AnimatedSVGXml animatedProps={animatedSvgProps} />

[AlexandrosMelissas]

Hello, im having a similar problem. Have you found a solution yet?