Not able to change svgs dynamically on UI thread using useAnimatedProps

[vkukade-altir]

First of all thank you for such a great library and all your efforts team!!. Highly appreciated.

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} />

Link to similar thread - #5543 (comment). This can also be closed once current one is closed.

@efstathiosntonas
@piaskowyk
@tomekzaw
@tjzel
@jakub-gonet
@karol-bisztyga
@msand
@WoLewicki

[WoLewicki]

Reanimated team please correct me if I am wrong, but since xml value is parsed on the JS side, it is not a valid use case to try and use animatedProps here, because it skips the render method and tries to apply the prop directly to native component, and it is not even present there. Or am I missing something?

[vkukade-altir]

Thank you @WoLewicki . Got it.
If we need to change the icons dynamically, then we would need to re-render the block of icon/icon itself so that it first parses itself in js thread and then goes to UI thread for rendering.

I wanted to stay completely on UI thread because of the use case I am trying which is - based on pan gesture handler updates( lets say slider) in x direction, I am trying to change the texts and icons on the screen. Updates would need to be done every 30 unit change in x direction. I was able to achieve text changes on UI thread. This animation was 60fps. But for icons, right now I am re-rendering the icon component for every 30 units change in x direction in JS thread. Here animation dropped to 55 fps.

Do you have any other suggestion? Thanks.

[WoLewicki]

Are you changing the props of the svg in any way? If not, maybe react-native-svg is not the best option. expo-image gives you the ability to handle svgs and, since they are parsed on the native side, it should work correctly.

[vkukade-altir]

Nope. I am not changing any other props. Let me try expo-image. Thank you so much!!

[WoLewicki]

Please let me know how it went 🚀

[vkukade-altir]

Sure @WoLewicki

[vkukade-altir]

@WoLewicki I could integrate expo-image with reanimated. Its working fine but still involves trip to JS thread.
But I was able to update images in UI thread completely using RNA using one hack. Basically I rendered all images at once on top of each other using absolute positioning and changed the opacity dynamically for every image using useAnimatedStyle