0
# Text Rendering
1

2
Typography system with fonts, text shaping, paragraph layout, and text-along-path capabilities in React Native Skia.
3

4
## Capabilities
5

6
### Text Component
7

8
Basic text rendering with font and positioning control.
9

10
```typescript { .api }
11
/**
12
 * Basic text rendering with font and positioning control
13
 * @param props - Text properties
14
 * @returns JSX text element
15
 */
16
function Text(props: TextProps): JSX.Element;
17

18
interface TextProps extends DrawingNodeProps {
19
  /** Text content to render */
20
  text: string;
21
  /** Font object for text rendering */
22
  font: SkFont;
23
  /** X coordinate (default: 0) */
24
  x?: number;
25
  /** Y coordinate (default: 0) */
26
  y?: number;
27
}
28
```
29

30
### TextPath Component
31

32
Text that follows a path curve.
33

34
```typescript { .api }
35
/**
36
 * Text that follows a path curve
37
 * @param props - TextPath properties
38
 * @returns JSX text path element
39
 */
40
function TextPath(props: TextPathProps): JSX.Element;
41

42
interface TextPathProps extends DrawingNodeProps {
43
  /** Text content to render */
44
  text: string;
45
  /** Font object for text rendering */
46
  font: SkFont;
47
  /** Path to follow (SVG string or SkPath) */
48
  path: PathDef;
49
  /** Starting offset along the path */
50
  offset?: number;
51
}
52
```
53

54
### TextBlob Component
55

56
Pre-shaped text blob for optimal performance.
57

58
```typescript { .api }
59
/**
60
 * Pre-shaped text blob for optimal performance
61
 * @param props - TextBlob properties
62
 * @returns JSX text blob element
63
 */
64
function TextBlob(props: TextBlobProps): JSX.Element;
65

66
interface TextBlobProps extends DrawingNodeProps {
67
  /** Pre-shaped text blob object */
68
  blob: SkTextBlob;
69
  /** X coordinate */
70
  x: number;
71
  /** Y coordinate */
72
  y: number;
73
}
74
```
75

76
### Glyphs Component
77

78
Individual glyph rendering with precise control.
79

80
```typescript { .api }
81
/**
82
 * Individual glyph rendering with precise control
83
 * @param props - Glyphs properties
84
 * @returns JSX glyphs element
85
 */
86
function Glyphs(props: GlyphsProps): JSX.Element;
87

88
interface GlyphsProps extends DrawingNodeProps {
89
  /** Font object for glyph rendering */
90
  font: SkFont;
91
  /** Array of glyphs to render */
92
  glyphs: Glyph[];
93
  /** X coordinate */
94
  x: number;
95
  /** Y coordinate */
96
  y: number;
97
}
98

99
interface Glyph {
100
  /** Glyph ID in the font */
101
  id: number;
102
  /** X position relative to component position */
103
  pos: SkPoint;
104
}
105
```
106

107
### Paragraph Component
108

109
Rich text paragraph with advanced layout capabilities.
110

111
```typescript { .api }
112
/**
113
 * Rich text paragraph with advanced layout capabilities
114
 * @param props - Paragraph properties
115
 * @returns JSX paragraph element
116
 */
117
function Paragraph(props: ParagraphProps): JSX.Element;
118

119
interface ParagraphProps extends DrawingNodeProps {
120
  /** Paragraph object with layout and styling */
121
  paragraph: SkParagraph;
122
  /** X coordinate */
123
  x: number;
124
  /** Y coordinate */
125
  y: number;
126
  /** Maximum width for text wrapping */
127
  width: number;
128
}
129
```
130

131
**Usage Examples:**
132

133
```typescript
134
import { Text, TextPath, Skia } from "@shopify/react-native-skia";
135

136
// Basic text
137
const font = Skia.Font(null, 16);
138

139
<Text text="Hello World" font={font} x={10} y={30}>
140
  <Paint color="black" />
141
</Text>
142

143
// Text along a path
144
const path = Skia.Path.Make();
145
path.addCircle(100, 100, 50);
146

147
<TextPath text="Curved Text" font={font} path={path}>
148
  <Paint color="blue" />
149
</TextPath>
150

151
// Text with custom styling
152
<Text text="Styled Text" font={font} x={10} y={60}>
153
  <Paint color="red" style="stroke" strokeWidth={1} />
154
</Text>
155
```
156

157
## Font System
158

159
### Font Creation and Management
160

161
```typescript { .api }
162
// Font factory from main Skia API
163
interface FontFactory {
164
  /** Create font from typeface with size */
165
  (typeface?: SkTypeface, size?: number): SkFont;
166
}
167

168
// Font object interface
169
interface SkFont {
170
  /** Get the typeface used by this font */
171
  getTypeface(): SkTypeface | null;
172
  /** Get the font size */
173
  getSize(): number;
174
  /** Set the font size */
175
  setSize(size: number): void;
176
  /** Get font metrics */
177
  getMetrics(): FontMetrics;
178
  /** Get text width */
179
  getTextWidth(text: string): number;
180
  /** Get glyph IDs for text */
181
  getGlyphIDs(text: string): number[];
182
  /** Get glyph widths */
183
  getGlyphWidths(glyphs: number[]): number[];
184
}
185

186
interface FontMetrics {
187
  ascent: number;
188
  descent: number;
189
  leading: number;
190
  bounds?: SkRect;
191
}
192
```
193

194
### Typeface Loading
195

196
```typescript { .api }
197
// Typeface factory
198
interface TypefaceFactory {
199
  /** Create typeface from font data */
200
  MakeFreeTypeFaceFromData(data: SkData): SkTypeface | null;
201
  /** Get default typeface */
202
  Default(): SkTypeface;
203
}
204

205
interface SkTypeface {
206
  /** Get the font family name */
207
  getFamilyName(): string;
208
  /** Get font style information */
209
  getFontStyle(): FontStyle;
210
}
211

212
interface FontStyle {
213
  weight: number;  // 100-900
214
  width: number;   // 1-9
215
  slant: FontSlant;
216
}
217

218
enum FontSlant {
219
  Upright = 0,
220
  Italic = 1,
221
  Oblique = 2
222
}
223
```
224

225
### Text Blob Creation
226

227
```typescript { .api }
228
// TextBlob factory
229
interface TextBlobFactory {
230
  /** Create text blob from text and font */
231
  MakeFromText(text: string, font: SkFont): SkTextBlob;
232
  /** Create text blob from glyphs */
233
  MakeFromGlyphs(glyphs: number[], font: SkFont): SkTextBlob;
234
  /** Create text blob with custom positioning */
235
  MakeFromRSXform(text: string, rsxforms: SkRSXform[], font: SkFont): SkTextBlob;
236
}
237

238
interface SkTextBlob {
239
  /** Get the bounds of the text blob */
240
  getBounds(): SkRect;
241
}
242
```
243

244
## Advanced Typography
245

246
### Paragraph Builder
247

248
```typescript { .api }
249
// Paragraph builder for rich text
250
interface ParagraphBuilderFactory {
251
  /** Create paragraph builder with style */
252
  Make(style: ParagraphStyle, fontManager?: SkFontMgr): SkParagraphBuilder;
253
}
254

255
interface SkParagraphBuilder {
256
  /** Add text with current style */
257
  addText(text: string): void;
258
  /** Push text style */
259
  pushStyle(style: TextStyle): void;
260
  /** Pop text style */
261
  pop(): void;
262
  /** Build the paragraph */
263
  build(): SkParagraph;
264
}
265

266
interface ParagraphStyle {
267
  textAlign?: TextAlign;
268
  textDirection?: TextDirection;
269
  maxLines?: number;
270
  ellipsis?: string;
271
  textHeightBehavior?: TextHeightBehavior;
272
}
273

274
interface TextStyle {
275
  color?: Color;
276
  decoration?: TextDecoration;
277
  decorationColor?: Color;
278
  decorationStyle?: TextDecorationStyle;
279
  fontFamilies?: string[];
280
  fontSize?: number;
281
  fontStyle?: FontStyle;
282
  letterSpacing?: number;
283
  wordSpacing?: number;
284
  height?: number;
285
}
286
```
287

288
### Font Management
289

290
```typescript { .api }
291
// Font manager for system fonts
292
interface FontMgrFactory {
293
  /** Get system font manager */
294
  System(): SkFontMgr;
295
  /** Create font manager from typeface provider */
296
  FromData(fontData: SkData[]): SkFontMgr;
297
}
298

299
interface SkFontMgr {
300
  /** Count available font families */
301
  countFamilies(): number;
302
  /** Get font family name by index */
303
  getFamilyName(index: number): string;
304
  /** Create typeface from family name and style */
305
  makeTypeface(familyName?: string, fontStyle?: FontStyle): SkTypeface | null;
306
}
307

308
// Typeface font provider
309
interface TypefaceFontProviderFactory {
310
  /** Create empty typeface font provider */
311
  Make(): SkTypefaceFontProvider;
312
}
313

314
interface SkTypefaceFontProvider extends SkFontMgr {
315
  /** Register a typeface with family names */
316
  registerTypeface(typeface: SkTypeface, familyName?: string): void;
317
}
318
```
319

320
## Core Types
321

322
```typescript { .api }
323
// Text-related types
324
type PathDef = string | SkPath;
325

326
interface SkPoint {
327
  x: number;
328
  y: number;
329
}
330

331
interface SkRect {
332
  x: number;
333
  y: number;
334
  width: number;
335
  height: number;
336
}
337

338
// Text alignment and direction
339
enum TextAlign {
340
  Left = 0,
341
  Right = 1,
342
  Center = 2,
343
  Justify = 3,
344
  Start = 4,
345
  End = 5
346
}
347

348
enum TextDirection {
349
  RTL = 0,
350
  LTR = 1
351
}
352

353
// Text decoration
354
enum TextDecoration {
355
  None = 0,
356
  Underline = 1,
357
  Overline = 2,
358
  LineThrough = 4
359
}
360

361
enum TextDecorationStyle {
362
  Solid = 0,
363
  Double = 1,
364
  Dotted = 2,
365
  Dashed = 3,
366
  Wavy = 4
367
}
368
```