0
# Typography & Display
1

2
Text and display components including typography variants, avatars, badges, chips, and icons.
3

4
## Capabilities
5

6
### Text
7

8
Base text component with Material Design typography scaling.
9

10
```typescript { .api }
11
function Text(props: TextProps): JSX.Element;
12
function customText(variant: keyof MD3Typescale): ComponentType<TextProps>;
13

14
interface TextProps {
15
  variant?: keyof MD3Typescale;
16
  children: React.ReactNode;
17
  style?: StyleProp<TextStyle>;
18
  theme?: ThemeProp;
19
}
20
```
21

22
### MD2 Typography Components
23

24
Backward-compatible typography components for Material Design 2.
25

26
```typescript { .api }
27
function Caption(props: CaptionProps): JSX.Element;
28
function Headline(props: HeadlineProps): JSX.Element;
29
function Paragraph(props: ParagraphProps): JSX.Element;
30
function Subheading(props: SubheadingProps): JSX.Element;
31
function Title(props: TitleProps): JSX.Element;
32

33
interface CaptionProps {
34
  children: React.ReactNode;
35
  style?: StyleProp<TextStyle>;
36
  theme?: ThemeProp;
37
}
38

39
interface HeadlineProps {
40
  children: React.ReactNode;
41
  style?: StyleProp<TextStyle>;
42
  theme?: ThemeProp;
43
}
44

45
interface ParagraphProps {
46
  children: React.ReactNode;
47
  style?: StyleProp<TextStyle>;
48
  theme?: ThemeProp;
49
}
50

51
interface SubheadingProps {
52
  children: React.ReactNode;
53
  style?: StyleProp<TextStyle>;
54
  theme?: ThemeProp;
55
}
56

57
interface TitleProps {
58
  children: React.ReactNode;
59
  style?: StyleProp<TextStyle>;
60
  theme?: ThemeProp;
61
}
62
```
63

64
### Avatar
65

66
Avatar components for displaying user profile images, icons, or text.
67

68
```typescript { .api }
69
namespace Avatar {
70
  function Icon(props: AvatarIconProps): JSX.Element;
71
  function Image(props: AvatarImageProps): JSX.Element;
72
  function Text(props: AvatarTextProps): JSX.Element;
73
}
74

75
interface AvatarIconProps {
76
  icon: IconSource;
77
  size?: number;
78
  color?: string;
79
  style?: StyleProp<ViewStyle>;
80
  theme?: ThemeProp;
81
}
82

83
interface AvatarImageProps {
84
  source: ImageSourcePropType;
85
  size?: number;
86
  style?: StyleProp<ViewStyle>;
87
  theme?: ThemeProp;
88
}
89

90
interface AvatarTextProps {
91
  label: string;
92
  size?: number;
93
  color?: string;
94
  labelStyle?: StyleProp<TextStyle>;
95
  style?: StyleProp<ViewStyle>;
96
  theme?: ThemeProp;
97
}
98
```
99

100
### Badge
101

102
Small status indicator typically used with other components.
103

104
```typescript { .api }
105
function Badge(props: BadgeProps): JSX.Element;
106

107
interface BadgeProps {
108
  children?: React.ReactNode;
109
  size?: number;
110
  visible?: boolean;
111
  style?: StyleProp<ViewStyle>;
112
  theme?: ThemeProp;
113
}
114
```
115

116
### Chip
117

118
Compact element representing an input, attribute, or action.
119

120
```typescript { .api }
121
function Chip(props: ChipProps): JSX.Element;
122

123
interface ChipProps {
124
  children: React.ReactNode;
125
  mode?: 'flat' | 'outlined';
126
  avatar?: React.ReactNode;
127
  icon?: IconSource;
128
  closeIcon?: IconSource;
129
  selected?: boolean;
130
  disabled?: boolean;
131
  onPress?: () => void;
132
  onClose?: () => void;
133
  onLongPress?: () => void;
134
  delayLongPress?: number;
135
  rippleColor?: ColorValue;
136
  selectedColor?: string;
137
  showSelectedOverlay?: boolean;
138
  showSelectedCheck?: boolean;
139
  compact?: boolean;
140
  elevated?: boolean;
141
  textStyle?: StyleProp<TextStyle>;
142
  style?: StyleProp<ViewStyle>;
143
  theme?: ThemeProp;
144
}
145
```
146

147
### Icon
148

149
Icon component for displaying icons from various sources.
150

151
```typescript { .api }
152
function Icon(props: { source: IconSource; size?: number; color?: string }): JSX.Element;
153

154
type IconSource = string | ImageSourcePropType | {
155
  default: ImageSourcePropType;
156
} | {
157
  ios: ImageSourcePropType;
158
  android: ImageSourcePropType;
159
};
160
```
161

162
**Usage Examples:**
163

164
```typescript
165
import React from 'react';
166
import { Text, Avatar, Badge, Chip, Icon } from 'react-native-paper';
167
import { View } from 'react-native';
168

169
// Typography examples
170
<Text variant="headlineMedium">Large Headline</Text>
171
<Text variant="bodyMedium">Body text</Text>
172
<Paragraph>Legacy paragraph component</Paragraph>
173

174
// Avatar examples
175
<Avatar.Icon size={64} icon="account" />
176
<Avatar.Image size={64} source={{uri: 'https://example.com/avatar.jpg'}} />
177
<Avatar.Text size={64} label="JD" />
178

179
// Badge and Chip examples
180
<View>
181
  <Badge>3</Badge>
182
  <Badge visible={true} size={8} style={{ position: 'absolute', top: 0, right: 0 }} />
183
</View>
184

185
<Chip icon="information" onPress={() => console.log('Pressed')}>Example Chip</Chip>
186
<Chip mode="outlined" selected closeIcon="close" onClose={() => console.log('Closed')}>Closable Chip</Chip>
187

188
// Icon examples
189
<Icon source="star" size={24} color="gold" />
190
<Icon source={require('./assets/custom-icon.png')} size={32} />
191
```
192

193
## Types
194

195
```typescript { .api }
196
type MD3Typescale = {
197
  displayLarge: MD3Type;
198
  displayMedium: MD3Type;
199
  displaySmall: MD3Type;
200
  headlineLarge: MD3Type;
201
  headlineMedium: MD3Type;
202
  headlineSmall: MD3Type;
203
  titleLarge: MD3Type;
204
  titleMedium: MD3Type;
205
  titleSmall: MD3Type;
206
  labelLarge: MD3Type;
207
  labelMedium: MD3Type;
208
  labelSmall: MD3Type;
209
  bodyLarge: MD3Type;
210
  bodyMedium: MD3Type;
211
  bodySmall: MD3Type;
212
  default: Omit<MD3Type, 'lineHeight' | 'fontSize'>;
213
};
214

215
interface MD3Type {
216
  fontFamily: string;
217
  letterSpacing: number;
218
  fontWeight: Font['fontWeight'];
219
  lineHeight: number;
220
  fontSize: number;
221
  fontStyle?: Font['fontStyle'];
222
}
223
```