How to use remote resources with useFonts ?

[natuanorg]

Hi,
I'm building a photo editing application using react native and one of the important features is that users can load fonts remotely (currently I'm using expo-font). How can I implement this feature using react-native-skia?

Thanks!

[wcandillon]

I strongly recomment using expo-assets for that. this is our recommended approach. Please let me know if that makes sense.

[natuanorg]

Thank you for your response, let me clarify about the question above:

When using the Skia Paragraph API, is there a way for us to declare custom fonts from remote resources?

Something like this:

import { useMemo } from "react";
import { Paragraph, Skia, useFonts, TextAlign, Canvas } from "@shopify/react-native-skia";
 
const MyParagraph = () => {
  const customFontMgr = useFonts({
    Roboto: [
      "https://github.com/openmaptiles/fonts/raw/master/roboto/Roboto-Regular.ttf"
      "https://github.com/openmaptiles/fonts/raw/master/roboto/Roboto-Medium.ttf"
    ]
  });
 
  const paragraph = useMemo(() => {
    // Are the font loaded already?
    if (!customFontMgr) {
      return null;
    }
    const paragraphStyle = {
      textAlign: TextAlign.Center
    };
    const textStyle = {
      color: Skia.Color("black"),
      fontFamilies: ["Roboto"],
      fontSize: 50,
    };
    return Skia.ParagraphBuilder.Make(paragraphStyle, customFontMgr)
      .pushStyle(textStyle)
      .addText("Say Hello to ")
      .pushStyle({ ...textStyle, fontStyle: { weight: 500 } })
      .addText("Skia 🎨")
      .pop()
      .build();
  }, [customFontMgr]);
 
  // Render the paragraph
  return (
    <Canvas style={{ width: 256, height: 256 }}>
      <Paragraph paragraph={paragraph} x={0} y={0} width={300} />
    </Canvas>
  );
};