Text Rendering

Render text with custom fonts and styles in React Native Skia

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.

Name	Type	Description
text	string	The text to render
x	number	X coordinate (default: 0)
y	number	Y coordinate (default: 0)
font	SkFont	Font 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.

Name	Type	Description
text	string	The text to render
path	SkPath	Path to follow
font	SkFont	Font object
initialOffset	number	Offset 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.

Name	Type	Description
glyphs	number[]	Array of glyph IDs
x	number	X coordinate (default: 0)
y	number	Y coordinate (default: 0)
font	SkFont	Font 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}
/>

Related

• Fonts - Load and manage custom fonts
• Paragraphs - Advanced text layout and formatting
• Paint Properties - Styling options for text