0
# Text Elements
1

2
Text rendering components with comprehensive typography support, including text spans and text along paths.
3

4
## Capabilities
5

6
### Text
7

8
Primary text element for rendering styled text content in SVG.
9

10
```typescript { .api }
11
/**
12
 * Renders SVG text element with full typography control
13
 * @param children - Text content or TSpan elements
14
 * @param x - X coordinate(s) for text positioning
15
 * @param y - Y coordinate(s) for text positioning  
16
 * @param dx - Relative X offset(s)
17
 * @param dy - Relative Y offset(s)
18
 * @param rotate - Rotation angle(s) for characters
19
 * @param opacity - Text opacity
20
 * @param inlineSize - Maximum line length for text wrapping
21
 */
22
interface TextProps extends TextSpecificProps {
23
  children?: ReactNode;
24
  x?: NumberArray;
25
  y?: NumberArray;
26
  dx?: NumberArray;
27
  dy?: NumberArray;
28
  rotate?: NumberArray;
29
  opacity?: NumberProp;
30
  inlineSize?: NumberProp;
31
}
32

33
declare const Text: React.ComponentType<TextProps>;
34
```
35

36
**Usage Examples:**
37

38
```typescript
39
import Svg, { Text } from "react-native-svg";
40

41
// Basic text
42
<Svg height="100" width="200">
43
  <Text x="10" y="30" fontSize="16" fill="black">
44
    Hello SVG
45
  </Text>
46
</Svg>
47

48
// Styled text
49
<Svg height="100" width="200">
50
  <Text
51
    x="10"
52
    y="50"
53
    fontSize="20"
54
    fontWeight="bold"
55
    fill="blue"
56
    textAnchor="start"
57
  >
58
    Bold Blue Text
59
  </Text>
60
</Svg>
61

62
// Multiple positioning
63
<Svg height="100" width="200">
64
  <Text x={[10, 50, 90]} y="30" fontSize="14" fill="red">
65
    A B C
66
  </Text>
67
</Svg>
68
```
69

70
### TSpan
71

72
Text span element for applying different styles to portions of text within a Text element.
73

74
```typescript { .api }
75
/**
76
 * Text span element for styling portions of text
77
 * @param x - X coordinate(s) for span positioning
78
 * @param y - Y coordinate(s) for span positioning
79
 * @param dx - Relative X offset(s)
80
 * @param dy - Relative Y offset(s)
81
 * @param rotate - Rotation angle(s) for characters
82
 */
83
interface TSpanProps extends TextSpecificProps {
84
  children?: ReactNode;
85
  x?: NumberArray;
86
  y?: NumberArray;
87
  dx?: NumberArray;
88
  dy?: NumberArray;
89
  rotate?: NumberArray;
90
}
91

92
declare const TSpan: React.ComponentType<TSpanProps>;
93
```
94

95
**Usage Examples:**
96

97
```typescript
98
import Svg, { Text, TSpan } from "react-native-svg";
99

100
// Mixed styling within text
101
<Svg height="100" width="300">
102
  <Text x="10" y="30" fontSize="16" fill="black">
103
    This is <TSpan fill="red" fontWeight="bold">red bold</TSpan> text
104
  </Text>
105
</Svg>
106

107
// Multiline text with different styles
108
<Svg height="100" width="200">
109
  <Text x="10" y="30" fontSize="14" fill="blue">
110
    <TSpan x="10" dy="0">First line</TSpan>
111
    <TSpan x="10" dy="20" fill="green">Second line</TSpan>
112
    <TSpan x="10" dy="20" fontSize="12" fill="gray">Third line</TSpan>
113
  </Text>
114
</Svg>
115
```
116

117
### TextPath
118

119
Text element that follows a path, allowing text to curve along shapes.
120

121
```typescript { .api }
122
/**
123
 * Text that follows an SVG path
124
 * @param href - Reference to a path element (e.g., "#myPath")
125
 * @param startOffset - Offset along the path where text starts
126
 * @param method - How text should be fitted to path
127
 * @param spacing - Character spacing method
128
 * @param side - Which side of path to place text
129
 */
130
interface TextPathProps extends TextSpecificProps {
131
  children?: ReactNode;
132
  href?: string;
133
  startOffset?: NumberProp;
134
  method?: TextPathMethod;
135
  spacing?: TextPathSpacing;
136
  side?: 'left' | 'right';
137
}
138

139
declare const TextPath: React.ComponentType<TextPathProps>;
140

141
type TextPathMethod = 'align' | 'stretch';
142
type TextPathSpacing = 'auto' | 'exact';
143
```
144

145
**Usage Examples:**
146

147
```typescript
148
import Svg, { Defs, Path, Text, TextPath } from "react-native-svg";
149

150
// Text following a curved path
151
<Svg height="100" width="200">
152
  <Defs>
153
    <Path
154
      id="textPath"
155
      d="M 20 50 Q 100 20 180 50"
156
    />
157
  </Defs>
158
  <Text fontSize="14" fill="purple">
159
    <TextPath href="#textPath">
160
      Text following a curved path
161
    </TextPath>
162
  </Text>
163
</Svg>
164

165
// Text on a circle
166
<Svg height="200" width="200">
167
  <Defs>
168
    <Path
169
      id="circle"
170
      d="M 100 20 A 80 80 0 1 1 99 20"
171
    />
172
  </Defs>
173
  <Text fontSize="12" fill="darkblue">
174
    <TextPath href="#circle" startOffset="25%">
175
      Circular text goes around and around
176
    </TextPath>
177
  </Text>
178
</Svg>
179
```
180

181
## Typography Properties
182

183
All text elements support comprehensive typography through `TextSpecificProps`:
184

185
```typescript { .api }
186
interface TextSpecificProps extends CommonPathProps, FontProps {
187
  alignmentBaseline?: AlignmentBaseline;
188
  baselineShift?: BaselineShift;
189
  verticalAlign?: NumberProp;
190
  lengthAdjust?: LengthAdjust;
191
  textLength?: NumberProp;
192
  fontData?: null | { [name: string]: unknown };
193
  fontFeatureSettings?: string;
194
}
195

196
interface FontProps extends FontObject {
197
  font?: FontObject;
198
}
199

200
interface FontObject {
201
  fontStyle?: FontStyle;
202
  fontVariant?: FontVariant;
203
  fontWeight?: FontWeight;
204
  fontStretch?: FontStretch;
205
  fontSize?: NumberProp;
206
  fontFamily?: string;
207
  textAnchor?: TextAnchor;
208
  textDecoration?: TextDecoration;
209
  letterSpacing?: NumberProp;
210
  wordSpacing?: NumberProp;
211
  kerning?: NumberProp;
212
  fontFeatureSettings?: string;
213
  fontVariantLigatures?: FontVariantLigatures;
214
  fontVariationSettings?: string;
215
}
216

217
type TextAnchor = 'start' | 'middle' | 'end';
218
type FontStyle = 'normal' | 'italic' | 'oblique';
219
type FontVariant = 'normal' | 'small-caps';
220
type FontWeight = NumberProp | 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
221
type TextDecoration = 'none' | 'underline' | 'overline' | 'line-through' | 'blink';
222
type AlignmentBaseline = 'baseline' | 'text-bottom' | 'alphabetic' | 'ideographic' | 'middle' | 'central' | 'mathematical' | 'text-top' | 'bottom' | 'center' | 'top' | 'text-before-edge' | 'text-after-edge' | 'before-edge' | 'after-edge' | 'hanging';
223
type BaselineShift = 'sub' | 'super' | 'baseline' | ReadonlyArray<NumberProp> | NumberProp;
224
type LengthAdjust = 'spacing' | 'spacingAndGlyphs';
225
```
226

227
## Advanced Text Techniques
228

229
### Text Alignment
230

231
```typescript
232
// Left-aligned text (default)
233
<Text x="50" y="30" textAnchor="start">Left aligned</Text>
234

235
// Center-aligned text
236
<Text x="100" y="50" textAnchor="middle">Center aligned</Text>
237

238
// Right-aligned text  
239
<Text x="150" y="70" textAnchor="end">Right aligned</Text>
240
```
241

242
### Vertical Text Positioning
243

244
```typescript
245
// Different baseline alignments
246
<Text x="50" y="50" alignmentBaseline="hanging">Hanging</Text>
247
<Text x="50" y="50" alignmentBaseline="middle">Middle</Text>
248
<Text x="50" y="50" alignmentBaseline="baseline">Baseline</Text>
249
```
250

251
### Text Effects
252

253
```typescript
254
// Outlined text
255
<Text
256
  x="50"
257
  y="50"
258
  fontSize="24"
259
  fill="white"
260
  stroke="black"
261
  strokeWidth="1"
262
>
263
  Outlined Text
264
</Text>
265

266
// Text with opacity
267
<Text x="50" y="50" fontSize="20" fill="blue" opacity="0.7">
268
  Semi-transparent
269
</Text>
270
```