Fonts

import { useFont } from "@shopify/react-native-skia";

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

  if (!font) {
    return null; // Font is loading
  }

  // Use font with Text component
};

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

if (font) {
  // Measure text bounds
  const bounds = font.measureText("Hello World");
  console.log(bounds.width, bounds.height);

  // Get text width
  const width = font.getTextWidth("Hello");

  // Get individual glyph widths
  const glyphIds = font.getGlyphIDs("Hello");
  const widths = font.getGlyphWidths(glyphIds);
}

if (font) {
  const metrics = font.getMetrics();
  console.log({
    ascent: metrics.ascent,    // Space above baseline (negative)
    descent: metrics.descent,  // Space below baseline (positive)
    leading: metrics.leading,  // Line spacing
    bounds: metrics.bounds     // Bounding box
  });
}

if (font) {
  // Set text size
  font.setSize(32);

  // Set scale and skew
  font.setScaleX(1.2);  // Horizontal stretch
  font.setSkewX(-0.25); // Italic effect

  // Set embolden (synthetic bold)
  font.setEmbolden(true);

  // Configure rendering
  font.setEdging(FontEdging.AntiAlias);
  font.setSubpixel(true);
  font.setLinearMetrics(true);
}

import { FontEdging } from "@shopify/react-native-skia";

// Options:
// - FontEdging.Alias (no anti-aliasing)
// - FontEdging.AntiAlias (smooth edges)
// - FontEdging.SubpixelAntiAlias (best quality)

import { FontHinting } from "@shopify/react-native-skia";

// Options:
// - FontHinting.None
// - FontHinting.Slight
// - FontHinting.Normal
// - FontHinting.Full

import { FontWeight } from "@shopify/react-native-skia";

// Available weights:
// - FontWeight.Invisible (0)
// - FontWeight.Thin (100)
// - FontWeight.ExtraLight (200)
// - FontWeight.Light (300)
// - FontWeight.Normal (400)
// - FontWeight.Medium (500)
// - FontWeight.SemiBold (600)
// - FontWeight.Bold (700)
// - FontWeight.ExtraBold (800)
// - FontWeight.Black (900)
// - FontWeight.ExtraBlack (1000)

import { FontSlant } from "@shopify/react-native-skia";

// Options:
// - FontSlant.Upright
// - FontSlant.Italic
// - FontSlant.Oblique

import { matchFont, FontStyle } from "@shopify/react-native-skia";

const font = matchFont({
  fontFamily: "Helvetica",
  fontSize: 24,
  fontWeight: "bold",
  fontStyle: "italic"
});

import { useFonts } from "@shopify/react-native-skia";

const MyComponent = () => {
  const fontMgr = useFonts({
    Roboto: [
      require("./Roboto-Regular.ttf"),
      require("./Roboto-Bold.ttf"),
      require("./Roboto-Italic.ttf"),
    ],
    "Open Sans": [
      require("./OpenSans-Regular.ttf"),
      require("./OpenSans-Bold.ttf"),
    ],
  });

  if (!fontMgr) {
    return null; // Fonts are loading
  }

  // Use fontMgr with Paragraph component
};

import { listFontFamilies, Skia } from "@shopify/react-native-skia";

const families = listFontFamilies();
console.log(families); // ["Arial", "Helvetica", "Times New Roman", ...]

const glyphIds = font.getGlyphIDs("Hello");
console.log(glyphIds); // [72, 101, 108, 108, 111]

const glyphs = font.getGlyphIDs("Hello");
const positions = [
  { x: 0, y: 0 },
  { x: 20, y: 0 },
  { x: 40, y: 0 },
  { x: 60, y: 0 },
  { x: 80, y: 0 },
];

const intercepts = font.getGlyphIntercepts(
  glyphs,
  positions,
  -2,  // top of line
  2    // bottom of line
);

import { FontStyle } from "@shopify/react-native-skia";

// Available styles:
// - FontStyle.Normal
// - FontStyle.Bold
// - FontStyle.Italic
// - FontStyle.BoldItalic