Text Animation of text drawing

[ronickg]

I currently doing a small test project for fun and was trying to get text animation to work like the skia logo one.
The best solution I have so far is using a Skia Text Path and then just setting the start to 0 and the end to a Skia value which updates. But as one can see in the gif it doesnt do exactly what one wants. Also tried using a gradient but that doesn't help either as it doesnt follow the path. Here is the gif: https://gyazo.com/0e3124b78a34968671667a050b94242f

const Content = ({font}) => {
  const {width, height} = useWindowDimensions();
  const fontSize = 32;

  const text = 'Hallo Skia';
  const opacity = useValue(0);
  const drawPos = useValue(0);

  const position = useValue(width / 2 - font.getTextWidth(text) / 2);

  const textPath = useComputedValue(() => {
    const path = Skia.Path.MakeFromText(
      text,
      width / 2 - font.getTextWidth(text) / 2,
      // position.current,
      height / 2,
      font,
    );
    return path;
  }, [position]);

  return (
    <View style={{flex: 1}}>
      <Canvas style={{flex: 1}}>
        <Path path={textPath} start={0} end={drawPos} antiAlias={true} />
        {/* <Text
          x={width / 2 - font.getTextWidth(text) / 2}
          y={position}
          opacity={opacity}
          text={text}
          font={font}></Text> */}
      </Canvas>
      <View
        style={{
          position: 'absolute',
          top: height / 1.5,
          left: 40,
          right: 40,
          bottom: 0,
        }}>
        <Button
          title="Press Me"
          onPress={() => {
            opacity.current = 1;
            // position.current = 0;
            drawPos.current = 0;
            // runTiming(opacity, 1, 5000);
            // runSpring(position, height / 2 - fontSize);
            runTiming(drawPos, 1, {duration: 5000});
          }}
        />
      </View>
    </View>
  );
};

[ronickg]

Nevermind figured it out. Instead of using text from a font one has to draw one's own text svg and use that. https://gyazo.com/8b873c99c8df53926ca1b2c07d09122f