Skip to main content
React Native Skia provides powerful text rendering capabilities with support for custom fonts, text paths, and advanced typography.

​
Text

The Text component renders text at a specified position.
NameTypeDescription
textstringThe text to render
xnumberX coordinate (default: 0)
ynumberY coordinate (default: 0)
fontSkFontFont object from useFont
import { Canvas, Text, useFont } from "@shopify/react-native-skia";

const TextDemo = () => {
  const font = useFont(require("./my-font.ttf"), 24);

  if (!font) return null;

  return (
    <Canvas style={{ flex: 1 }}>
      <Text x={32} y={32} text="Hello World" font={font} color="black" />
    </Canvas>
  );
};

​
TextPath

Render text along a path for creative typography effects.
NameTypeDescription
textstringThe text to render
pathSkPathPath to follow
fontSkFontFont object
initialOffsetnumberOffset along path (default: 0)
import { Canvas, TextPath, useFont, Skia } from "@shopify/react-native-skia";

const TextPathDemo = () => {
  const font = useFont(require("./my-font.ttf"), 16);
  
  const path = Skia.Path.Make();
  path.moveTo(20, 100);
  path.quadTo(128, 0, 236, 100);

  if (!font) return null;

  return (
    <Canvas style={{ width: 256, height: 256 }}>
      <TextPath 
        path={path} 
        text="Text follows the path!" 
        font={font}
        color="blue"
      />
    </Canvas>
  );
};

​
Glyphs

Render individual glyphs with precise control over positioning.
NameTypeDescription
glyphsnumber[]Array of glyph IDs
xnumberX coordinate (default: 0)
ynumberY coordinate (default: 0)
fontSkFontFont object
import { Canvas, Glyphs, useFont } from "@shopify/react-native-skia";

const GlyphsDemo = () => {
  const font = useFont(require("./my-font.ttf"), 24);

  if (!font) return null;

  const glyphs = font.getGlyphIDs("Hello");

  return (
    <Canvas style={{ flex: 1 }}>
      <Glyphs 
        glyphs={glyphs} 
        x={32} 
        y={32} 
        font={font} 
        color="black" 
      />
    </Canvas>
  );
};

​
TextBlob

Use TextBlob for advanced text rendering with pre-computed glyph positioning. 
import { Canvas, TextBlob, Skia, useFont } from "@shopify/react-native-skia";

const TextBlobDemo = () => {
  const font = useFont(require("./my-font.ttf"), 24);

  if (!font) return null;

  const textBlob = Skia.TextBlob.MakeFromText("Optimized Text", font);

  return (
    <Canvas style={{ flex: 1 }}>
      <TextBlob blob={textBlob} x={32} y={32} color="black" />
    </Canvas>
  );
};

​
Text Styling

All text components support paint properties for styling: 
<Text
  text="Styled Text"
  x={32}
  y={32}
  font={font}
  color="blue"
  style="stroke"
  strokeWidth={2}
  opacity={0.8}
/>

Build docs developers (and LLMs) love

Get started for freeTalk to us