Text Path

Draws text along a path.

Name	Type	Description
path	`Path` or `string`	Path to draw. Can be a string using the SVG Path notation or an object created with `Skia.Path.Make()`
text	`string`	Text to draw
font	`SkFont`	Font to use

Example

tsx
import {Canvas, Group, TextPath, Skia, useFont, vec, Fill} from "@shopify/react-native-skia";
 
const size = 128;
const path = Skia.Path.Make();
path.addCircle(size, size, size/2);
 
export const HelloWorld = () => {
  const font = useFont(require("./my-font.ttf"), 24);
  return (
    <Canvas style={{ flex: 1 }}>
      <Fill color="white" />
      <Group transform={[{ rotate: Math.PI }]} origin={vec(size, size)}>
        <TextPath font={font} path={path} text="Hello World!" />
      </Group>
    </Canvas>
  );
};

tsx
import {Canvas, Group, TextPath, Skia, useFont, vec, Fill} from "@shopify/react-native-skia";
 
const size = 128;
const path = Skia.Path.Make();
path.addCircle(size, size, size/2);
 
export const HelloWorld = () => {
  const font = useFont(require("./my-font.ttf"), 24);
  return (
    <Canvas style={{ flex: 1 }}>
      <Fill color="white" />
      <Group transform={[{ rotate: Math.PI }]} origin={vec(size, size)}>
        <TextPath font={font} path={path} text="Hello World!" />
      </Group>
    </Canvas>
  );
};

Example​

Example