0
# Core Components
1

2
Essential UI building blocks including buttons, inputs, text, and icons that form the foundation of most React Native Elements interfaces.
3

4
## Capabilities
5

6
### Button
7

8
Customizable button component with multiple variants, loading states, and icon support. Supports platform-specific touch feedback and gradient backgrounds.
9

10
```typescript { .api }
11
/**
12
 * Customizable button component with multiple variants and icon support
13
 */
14
interface ButtonProps extends TouchableOpacityProps {
15
  /** Button text or custom element */
16
  title?: string | React.ReactElement;
17
  /** Button style variant (default: 'solid') */
18
  type?: 'solid' | 'clear' | 'outline';
19
  /** Shows loading spinner when true */
20
  loading?: boolean;
21
  /** Disables button interaction */
22
  disabled?: boolean;
23
  /** Icon to display */
24
  icon?: IconNode;
25
  /** Position icon on right side of title */
26
  iconRight?: boolean;
27
  /** Adds shadow/elevation effect */
28
  raised?: boolean;
29
  /** Custom button container styles */
30
  buttonStyle?: StyleProp<ViewStyle>;
31
  /** Custom title text styles */
32
  titleStyle?: StyleProp<TextStyle>;
33
  /** Props for title Text component */
34
  titleProps?: TextProps;
35
  /** Outer container styles */
36
  containerStyle?: StyleProp<ViewStyle>;
37
  /** Icon container styles */
38
  iconContainerStyle?: StyleProp<ViewStyle>;
39
  /** Loading spinner configuration */
40
  loadingProps?: ActivityIndicatorProps;
41
  /** Loading container styles */
42
  loadingStyle?: StyleProp<ViewStyle>;
43
  /** Disabled button styles */
44
  disabledStyle?: StyleProp<ViewStyle>;
45
  /** Disabled title styles */
46
  disabledTitleStyle?: StyleProp<TextStyle>;
47
  /** Custom touchable component */
48
  TouchableComponent?: typeof React.Component;
49
  /** Custom view component for gradients */
50
  ViewComponent?: typeof React.Component;
51
  /** Props for linear gradient backgrounds */
52
  linearGradientProps?: object;
53
}
54
```
55

56
**Usage Examples:**
57

58
```typescript
59
import { Button, Icon } from 'react-native-elements';
60

61
// Basic button
62
<Button title="Press Me" onPress={handlePress} />
63

64
// Button with icon
65
<Button
66
  title="Save"
67
  icon={<Icon name="save" color="#fff" />}
68
  buttonStyle={{ backgroundColor: '#007AFF' }}
69
/>
70

71
// Loading button
72
<Button
73
  title="Loading..."
74
  loading={isLoading}
75
  disabled={isLoading}
76
  loadingProps={{ color: '#fff' }}
77
/>
78

79
// Outline button with right icon
80
<Button
81
  title="Next"
82
  type="outline"
83
  icon={{ name: 'arrow-forward', color: '#007AFF' }}
84
  iconRight={true}
85
/>
86

87
// Raised button with gradient
88
<Button
89
  title="Gradient"
90
  raised
91
  linearGradientProps={{
92
    colors: ['#FF6B6B', '#FF8E53'],
93
    start: { x: 0, y: 0.5 },
94
    end: { x: 1, y: 0.5 },
95
  }}
96
/>
97
```
98

99
### Input
100

101
Enhanced text input component with labels, icons, and comprehensive error handling. Provides consistent styling and behavior across platforms.
102

103
```typescript { .api }
104
/**
105
 * Enhanced text input with labels, icons, and error handling
106
 */
107
interface InputProps extends React.ComponentPropsWithRef<typeof TextInput> {
108
  /** Outer container styles */
109
  containerStyle?: StyleProp<ViewStyle>;
110
  /** Disables input interaction */
111
  disabled?: boolean;
112
  /** Disabled input text styles */
113
  disabledInputStyle?: StyleProp<TextStyle>;
114
  /** Input container styles */
115
  inputContainerStyle?: StyleProp<ViewStyle>;
116
  /** Icon on left side */
117
  leftIcon?: IconNode;
118
  /** Left icon container styles */
119
  leftIconContainerStyle?: StyleProp<ViewStyle>;
120
  /** Icon on right side */
121
  rightIcon?: IconNode;
122
  /** Right icon container styles */
123
  rightIconContainerStyle?: StyleProp<ViewStyle>;
124
  /** Text input styles */
125
  inputStyle?: StyleProp<TextStyle>;
126
  /** Custom input component */
127
  InputComponent?: typeof React.Component;
128
  /** Error message props */
129
  errorProps?: object;
130
  /** Error message styles */
131
  errorStyle?: StyleProp<TextStyle>;
132
  /** Error text to display */
133
  errorMessage?: string;
134
  /** Input label text or component */
135
  label?: string | React.ReactNode;
136
  /** Label text styles */
137
  labelStyle?: StyleProp<TextStyle>;
138
  /** Label component props */
139
  labelProps?: object;
140
  /** Whether to show error message space */
141
  renderErrorMessage?: boolean;
142
}
143

144
/**
145
 * Input component methods (class-based component)
146
 */
147
interface InputMethods {
148
  /** Focus the input */
149
  focus(): void;
150
  /** Blur the input */
151
  blur(): void;
152
  /** Clear the input text */
153
  clear(): void;
154
  /** Trigger shake animation */
155
  shake(): void;
156
  /** Check if input is focused */
157
  isFocused(): boolean;
158
}
159
```
160

161
**Usage Examples:**
162

163
```typescript
164
import React, { useRef } from 'react';
165
import { Input } from 'react-native-elements';
166

167
// Basic input with label
168
<Input
169
  label="Email"
170
  placeholder="Enter your email"
171
  keyboardType="email-address"
172
  autoCapitalize="none"
173
/>
174

175
// Input with icons and validation
176
<Input
177
  label="Password"
178
  placeholder="Enter password"
179
  secureTextEntry
180
  leftIcon={{ type: 'material', name: 'lock' }}
181
  rightIcon={{ type: 'material', name: 'visibility' }}
182
  errorMessage={passwordError}
183
/>
184

185
// Input with custom styling
186
<Input
187
  label="Username"
188
  labelStyle={{ color: '#007AFF' }}
189
  inputStyle={{ fontSize: 16 }}
190
  inputContainerStyle={{ borderBottomColor: '#007AFF' }}
191
  leftIcon={{ type: 'material', name: 'person', color: '#007AFF' }}
192
/>
193

194
// Using input methods
195
const inputRef = useRef<Input>(null);
196

197
const handleFocus = () => {
198
  inputRef.current?.focus();
199
};
200

201
<Input
202
  ref={inputRef}
203
  label="Focus Me"
204
  placeholder="Click button to focus"
205
/>
206
```
207

208
### Text
209

210
Themed text component with consistent styling and typography scales. Automatically adapts to theme changes and supports all React Native Text props.
211

212
```typescript { .api }
213
/**
214
 * Themed text component with consistent styling
215
 */
216
interface TextProps extends RNTextProps {
217
  /** Text content */
218
  children?: React.ReactNode;
219
  /** Predefined text style variants */
220
  h1?: boolean;
221
  h2?: boolean;
222
  h3?: boolean;
223
  h4?: boolean;
224
  /** Custom text styles */
225
  style?: StyleProp<TextStyle>;
226
}
227
```
228

229
**Usage Examples:**
230

231
```typescript
232
import { Text } from 'react-native-elements';
233

234
// Basic themed text
235
<Text>This text uses the default theme styling</Text>
236

237
// Header text variants
238
<Text h1>Main Heading</Text>
239
<Text h2>Sub Heading</Text>
240
<Text h3>Section Title</Text>
241
<Text h4>Subsection</Text>
242

243
// Custom styled text
244
<Text style={{ color: '#007AFF', fontSize: 18, fontWeight: 'bold' }}>
245
  Custom Styled Text
246
</Text>
247

248
// Text with theme integration
249
const { theme } = useTheme();
250
<Text style={{ color: theme.colors.primary }}>
251
  Theme-aware text
252
</Text>
253
```
254

255
### Icon
256

257
Vector icon component with support for multiple icon families and customization options. Integrates with react-native-vector-icons for comprehensive icon support.
258

259
```typescript { .api }
260
/**
261
 * Vector icon component with multiple icon family support
262
 */
263
interface IconProps extends TouchableOpacityProps {
264
  /** Icon name from the icon family */
265
  name?: string;
266
  /** Icon family type */
267
  type?: IconType;
268
  /** Icon size (default: 24) */
269
  size?: number;
270
  /** Icon color */
271
  color?: string;
272
  /** Inverted color scheme */
273
  reverse?: boolean;
274
  /** Adds shadow/elevation */
275
  raised?: boolean;
276
  /** Disabled state */
277
  disabled?: boolean;
278
  /** Solid variant (for FontAwesome 5) */
279
  solid?: boolean;
280
  /** Brand variant (for FontAwesome 5) */
281
  brand?: boolean;
282
  /** Container styles */
283
  containerStyle?: StyleProp<ViewStyle>;
284
  /** Icon-specific styles */
285
  iconStyle?: StyleProp<TextStyle>;
286
  /** Custom touchable component */
287
  Component?: typeof React.Component;
288
  /** Touch handler (makes icon touchable) */
289
  onPress?: () => void;
290
}
291

292
/**
293
 * Supported icon family types
294
 */
295
type IconType = 
296
  | 'material'
297
  | 'material-community'
298
  | 'simple-line-icon'
299
  | 'zocial'
300
  | 'font-awesome'
301
  | 'octicon'
302
  | 'ionicon'
303
  | 'foundation'
304
  | 'evilicon'
305
  | 'entypo'
306
  | 'antdesign'
307
  | 'font-awesome-5'
308
  | 'feather'
309
  | 'fontisto';
310

311
/**
312
 * Icon node type for component props
313
 */
314
type IconNode = boolean | React.ReactElement | Partial<IconProps>;
315

316
/**
317
 * Icon object configuration
318
 */
319
interface IconObject {
320
  name?: string;
321
  type?: IconType;
322
  size?: number;
323
  color?: string;
324
}
325
```
326

327
**Usage Examples:**
328

329
```typescript
330
import { Icon } from 'react-native-elements';
331

332
// Basic material icon
333
<Icon name="home" type="material" />
334

335
// FontAwesome icon with customization
336
<Icon
337
  name="heart"
338
  type="font-awesome"
339
  color="#e91e63"
340
  size={30}
341
/>
342

343
// Touchable icon with handler
344
<Icon
345
  name="settings"
346
  type="material"
347
  onPress={openSettings}
348
  containerStyle={{ padding: 10 }}
349
/>
350

351
// Raised icon with reverse colors
352
<Icon
353
  name="star"
354
  type="material"
355
  raised
356
  reverse
357
  color="#f39c12"
358
/>
359

360
// Icon with custom styling
361
<Icon
362
  name="check-circle"
363
  type="material"
364
  size={40}
365
  color="#27ae60"
366
  containerStyle={{
367
    backgroundColor: '#ecf0f1',
368
    borderRadius: 25,
369
    padding: 5,
370
  }}
371
/>
372

373
// FontAwesome 5 with solid variant
374
<Icon
375
  name="user-circle"
376
  type="font-awesome-5"
377
  solid
378
  size={24}
379
  color="#007AFF"
380
/>
381
```
382

383
### Chip
384

385
Compact chip/tag component for selections, filters, and categorization with optional icons and customizable appearance.
386

387
```typescript { .api }
388
/**
389
 * Compact chip/tag component for selections and filters
390
 * Extends ButtonProps but omits loading-related properties
391
 */
392
interface ChipProps extends Omit<ButtonProps, 'loading' | 'loadingStyle' | 'loadingProps'> {
393
  /** Button style variant */
394
  type?: 'solid' | 'outline';
395
}
396
```
397

398
**Usage Examples:**
399

400
```typescript
401
import { Chip, Avatar } from 'react-native-elements';
402

403
// Basic chip
404
<Chip title="React Native" />
405

406
// Chip with icon
407
<Chip
408
  title="JavaScript"
409
  icon={{ name: 'code', type: 'material', color: '#fff' }}
410
  buttonStyle={{ backgroundColor: '#f39c12' }}
411
/>
412

413
// User chip with avatar
414
<Chip
415
  title="John Doe"
416
  avatar={<Avatar rounded title="JD" size="small" />}
417
/>
418

419
// Outline chip with close button
420
<Chip
421
  title="Removable"
422
  type="outline"
423
  icon={{ name: 'close', type: 'material' }}
424
  iconRight
425
  onPress={removeChip}
426
/>
427
```