Is it possible to use Reanimated SharedValue with the Paragraph API?

[peterjskaltsis]

Hi all, just trying out Skia for a graph library and I was wondering if it was possible for me to pass a SharedValue to the Paragraph like I have been doing with Skia Text component?

Thank you in advance for your help 🙏

import {Text} from '@skia..';

const text = useSharedValue('0.00');

// ... some animated reaction etc that updates this constantly

// how do I make Paragraph update?
return  (
<Canvas>
 <Paragraph></Paragraph>
</Canvas>
)

// What I used to do which worked:
// return (
// <Canvas>
//   <Text text={text} x={0} y={24} font={bigFont} />
// </Canvas>
// )

[wcandillon]

yes indeed this is possible

[peterjskaltsis]

Thank you for the reply @wcandillon!

Would this involve passing the paragraph prop a SharedValue? I couldn't seem to find any docs on this one.

[lundenmiika]

You're correct in that the paragraph prop can be a SharedValue, but the addText only accepts text. Here's an example that uses a pattern that I found in SpeedTest Example that should be quite efficient for rendering text from a SharedValue. 👍

const AnimatedTextParagraph = (sharedValueText) => {
  const paragraphBuilder = useMemo(() => {
    const paragraphStyle = {
      textAlign: TextAlign.Center,
    };
    return Skia.ParagraphBuilder.Make(paragraphStyle);
  }, []);
  const paragraph = useDerivedValue(() => {
    const text = `${sharedValueText.value}`;
    paragraphBuilder.reset();
    return paragraphBuilder.pushStyle(textStyle).addText(text).build();
  });

  return (
    <Canvas>
      <Paragraph paragraph={paragraph} x={0} y={0} width={200}  />
    </Canvas>
  );
};

[umarluqman]

not sure if it's the right way but it works