0
# Typography Components
1

2
Text display and typography components with comprehensive styling, responsive design, and theme integration.
3

4
## Capabilities
5

6
### Text Component
7

8
Primary text component with full styling and responsive capabilities.
9

10
```typescript { .api }
11
/**
12
 * Primary text component with styling and theme integration
13
 * @param props - Text component props
14
 * @returns JSX element representing styled text
15
 */
16
function Text(props: ITextProps): JSX.Element;
17

18
interface ITextProps extends StyledProps {
19
  children?: React.ReactNode;
20
  // Typography props
21
  fontSize?: ResponsiveValue<string | number>;
22
  fontWeight?: ResponsiveValue<string | number>;
23
  fontFamily?: ResponsiveValue<string>;
24
  lineHeight?: ResponsiveValue<string | number>;
25
  letterSpacing?: ResponsiveValue<string | number>;
26
  textAlign?: ResponsiveValue<"left" | "right" | "center" | "justify">;
27
  textTransform?: ResponsiveValue<"none" | "capitalize" | "uppercase" | "lowercase">;
28
  textDecoration?: ResponsiveValue<"none" | "underline" | "line-through">;
29
  textDecorationLine?: ResponsiveValue<"none" | "underline" | "line-through" | "underline line-through">;
30
  textDecorationStyle?: ResponsiveValue<"solid" | "double" | "dotted" | "dashed">;
31
  textDecorationColor?: ResponsiveValue<string>;
32
  textShadowColor?: ResponsiveValue<string>;
33
  textShadowOffset?: ResponsiveValue<{ width: number; height: number }>;
34
  textShadowRadius?: ResponsiveValue<number>;
35
  
36
  // Color props
37
  color?: ResponsiveValue<string>;
38
  
39
  // Responsive text props
40
  isTruncated?: boolean;
41
  noOfLines?: number;
42
  
43
  // Text-specific props
44
  bold?: boolean;
45
  italic?: boolean;
46
  underline?: boolean;
47
  strikeThrough?: boolean;
48
  sub?: boolean;
49
  sup?: boolean;
50
  highlight?: boolean;
51
  
52
  // React Native Text props
53
  allowFontScaling?: boolean;
54
  ellipsizeMode?: "head" | "middle" | "tail" | "clip";
55
  numberOfLines?: number;
56
  onPress?: () => void;
57
  onLongPress?: () => void;
58
  selectable?: boolean;
59
  selectionColor?: string;
60
  suppressHighlighting?: boolean;
61
  testID?: string;
62
  
63
  // Accessibility props
64
  accessible?: boolean;
65
  accessibilityLabel?: string;
66
  accessibilityHint?: string;
67
  accessibilityRole?: string;
68
}
69
```
70

71
**Usage Examples:**
72

73
```typescript
74
import { Text, VStack } from "native-base";
75

76
function TypographyExample() {
77
  return (
78
    <VStack space={4}>
79
      {/* Basic text */}
80
      <Text>Basic text content</Text>
81
      
82
      {/* Styled text */}
83
      <Text fontSize="lg" fontWeight="bold" color="blue.500">
84
        Large bold blue text
85
      </Text>
86
      
87
      {/* Responsive text */}
88
      <Text 
89
        fontSize={{ base: "sm", md: "lg" }} 
90
        textAlign={{ base: "center", md: "left" }}
91
      >
92
        Responsive text size and alignment
93
      </Text>
94
      
95
      {/* Truncated text */}
96
      <Text isTruncated maxW="200">
97
        This is a very long text that will be truncated when it exceeds the maximum width
98
      </Text>
99
      
100
      {/* Multi-line text with line limit */}
101
      <Text noOfLines={2}>
102
        This is a longer text that will be limited to exactly two lines and will show ellipsis when the content exceeds this limit
103
      </Text>
104
      
105
      {/* Text with styling shortcuts */}
106
      <Text bold italic underline color="green.600">
107
        Bold, italic, underlined text
108
      </Text>
109
      
110
      {/* Interactive text */}
111
      <Text onPress={() => console.log('Text pressed')} color="blue.400" underline>
112
        Pressable text link
113
      </Text>
114
    </VStack>
115
  );
116
}
117
```
118

119
### Heading Component
120

121
Semantic heading component with predefined sizes and styling.
122

123
```typescript { .api }
124
/**
125
 * Semantic heading component with predefined typography scales
126
 * @param props - Heading component props
127
 * @returns JSX element representing a semantic heading
128
 */
129
function Heading(props: IHeadingProps): JSX.Element;
130

131
interface IHeadingProps extends ITextProps {
132
  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
133
}
134
```
135

136
**Usage Examples:**
137

138
```typescript
139
import { Heading, VStack } from "native-base";
140

141
function HeadingExample() {
142
  return (
143
    <VStack space={4}>
144
      {/* Different heading sizes */}
145
      <Heading size="4xl">Main Title (4xl)</Heading>
146
      <Heading size="3xl">Section Title (3xl)</Heading>
147
      <Heading size="2xl">Subsection Title (2xl)</Heading>
148
      <Heading size="xl">Heading XL</Heading>
149
      <Heading size="lg">Heading Large</Heading>
150
      <Heading size="md">Heading Medium</Heading>
151
      <Heading size="sm">Heading Small</Heading>
152
      <Heading size="xs">Heading XS</Heading>
153
      
154
      {/* Styled headings */}
155
      <Heading size="xl" color="primary.600" textAlign="center">
156
        Centered Primary Heading
157
      </Heading>
158
      
159
      {/* Responsive heading */}
160
      <Heading 
161
        size={{ base: "lg", md: "xl", lg: "2xl" }}
162
        color={{ base: "gray.800", dark: "gray.100" }}
163
      >
164
        Responsive Heading
165
      </Heading>
166
    </VStack>
167
  );
168
}
169
```
170

171
## Typography System Integration
172

173
### Theme Integration
174

175
Text and Heading components integrate with the theme system for consistent typography:
176

177
```typescript
178
// Theme typography tokens
179
const theme = extendTheme({
180
  fonts: {
181
    heading: "Inter",
182
    body: "Inter",
183
    mono: "Menlo",
184
  },
185
  fontSizes: {
186
    xs: 12,
187
    sm: 14,
188
    md: 16,
189
    lg: 18,
190
    xl: 20,
191
    "2xl": 24,
192
    "3xl": 30,
193
    "4xl": 36,
194
  },
195
  fontWeights: {
196
    hairline: 100,
197
    thin: 200,                    
198
    light: 300,
199
    normal: 400,
200
    medium: 500,
201
    semibold: 600,
202
    bold: 700,
203
    extrabold: 800,
204
    black: 900,
205
  },
206
  lineHeights: {
207
    xs: "16px",
208
    sm: "20px", 
209
    md: "24px",
210
    lg: "28px",
211
    xl: "32px",
212
  },
213
  letterSpacing: {
214
    xs: "-0.05em",
215
    sm: "-0.025em",
216
    md: "0",
217
    lg: "0.025em",
218
    xl: "0.05em",
219
  }
220
});
221
```
222

223
### Responsive Typography
224

225
Typography components support responsive design patterns:
226

227
```typescript
228
import { Text, useBreakpointValue } from "native-base";
229

230
function ResponsiveTypography() {
231
  const textSize = useBreakpointValue({
232
    base: "sm",
233
    sm: "md",
234
    md: "lg",
235
    lg: "xl"
236
  });
237
  
238
  return (
239
    <Text fontSize={textSize}>
240
      This text size adapts to screen breakpoints
241
    </Text>
242
  );
243
}
244
```
245

246
### Accessibility Features
247

248
Typography components include built-in accessibility support:
249

250
```typescript
251
import { Text, Heading } from "native-base";
252

253
function AccessibleTypography() {
254
  return (
255
    <>
256
      <Heading 
257
        accessibilityRole="header"
258
        accessibilityLabel="Main page heading"
259
      >
260
        Page Title
261
      </Heading>
262
      
263
      <Text 
264
        accessibilityLabel="Article content"
265
        selectable={true}
266
        allowFontScaling={true}
267
      >
268
        This text is accessible and supports font scaling
269
      </Text>
270
    </>
271
  );
272
}
273
```
274

275
### Color Mode Integration
276

277
Typography automatically adapts to light/dark themes:
278

279
```typescript
280
import { Text, Heading, useColorModeValue } from "native-base";
281

282
function ThemedTypography() {
283
  const textColor = useColorModeValue("gray.800", "gray.100");
284
  const headingColor = useColorModeValue("gray.900", "gray.50");
285
  
286
  return (
287
    <>
288
      <Heading color={headingColor}>
289
        Theme-aware heading
290
      </Heading>
291
      <Text color={textColor}>
292
        Theme-aware body text
293
      </Text>
294
      
295
      {/* Or use theme-aware props directly */}
296
      <Text color={{ base: "gray.800", _dark: "gray.100" }}>
297
        Direct theme-aware text
298
      </Text>
299
    </>
300
  );
301
}
302
```
303

304
### Typography Composition Patterns
305

306
Common patterns for combining typography components:
307

308
```typescript
309
import { VStack, Heading, Text, Divider } from "native-base";
310

311
function TypographyComposition() {
312
  return (
313
    <VStack space={4}>
314
      {/* Article header */}
315
      <VStack space={2}>
316
        <Heading size="2xl" color="primary.600">
317
          Article Title
318
        </Heading>
319
        <Text fontSize="sm" color="gray.500">
320
          Published on March 15, 2024
321
        </Text>
322
        <Divider />
323
      </VStack>
324
      
325
      {/* Article content */}
326
      <VStack space={3}>
327
        <Text fontSize="lg" lineHeight="xl">
328
          This is the article introduction with larger text and increased line height for better readability.
329
        </Text>
330
        
331
        <Heading size="lg">Section Heading</Heading>
332
        
333
        <Text>
334
          Regular body text with default styling. This text maintains consistent spacing and typography throughout the article.
335
        </Text>
336
        
337
        <Text italic color="gray.600" fontSize="sm">
338
          This is a caption or note in smaller, italic text.
339
        </Text>
340
      </VStack>
341
    </VStack>
342
  );
343
}
344
```
345

346
### Platform-Specific Typography
347

348
Handle platform differences in typography:
349

350
```typescript
351
import { Text, Platform } from "native-base";
352

353
function PlatformTypography() {
354
  return (
355
    <Text 
356
      fontFamily={Platform.OS === 'ios' ? 'San Francisco' : 'Roboto'}
357
      fontSize={{ base: "md", web: "lg" }}
358
    >
359
      Platform-optimized typography
360
    </Text>
361
  );
362
}
363
```