0
# React Native Elements
1

2
React Native Elements is a comprehensive cross-platform UI toolkit providing highly customizable and accessible components for React Native applications. It offers consistent design patterns, extensive theming capabilities, and platform-specific optimizations for iOS, Android, and Web.
3

4
## Package Information
5

6
- **Package Name**: react-native-elements
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install react-native-elements react-native-vector-icons`
10

11
## Core Imports
12

13
```typescript
14
import { 
15
  Button, Input, Icon, Text,
16
  Card, Header, ListItem, 
17
  ThemeProvider, useTheme 
18
} from 'react-native-elements';
19
```
20

21
For CommonJS:
22

23
```javascript
24
const { 
25
  Button, Input, Icon, Text,
26
  Card, Header, ListItem, 
27
  ThemeProvider, useTheme 
28
} = require('react-native-elements');
29
```
30

31
## Basic Usage
32

33
```typescript
34
import React from 'react';
35
import { 
36
  Button, Input, Icon, Card, 
37
  ThemeProvider, Header 
38
} from 'react-native-elements';
39

40
const theme = {
41
  colors: {
42
    primary: '#007AFF',
43
    secondary: '#5856D6',
44
  }
45
};
46

47
export default function App() {
48
  return (
49
    <ThemeProvider theme={theme}>
50
      <Header 
51
        centerComponent={{ text: 'My App', style: { color: '#fff' } }}
52
        backgroundColor={theme.colors.primary}
53
      />
54
      
55
      <Card>
56
        <Input
57
          placeholder="Enter your name"
58
          leftIcon={{ type: 'material', name: 'person' }}
59
        />
60
        
61
        <Button
62
          title="Submit"
63
          icon={<Icon name="check" color="#fff" />}
64
          buttonStyle={{ backgroundColor: theme.colors.primary }}
65
        />
66
      </Card>
67
    </ThemeProvider>
68
  );
69
}
70
```
71

72
## Architecture
73

74
React Native Elements is built around several key architectural patterns:
75

76
- **Component System**: Modular UI components with consistent APIs and prop interfaces
77
- **Theming Engine**: Centralized theme management using React Context with deep customization
78
- **Platform Optimization**: Components automatically adapt behavior for iOS, Android, and Web
79
- **Icon Integration**: Built-in support for multiple icon families through react-native-vector-icons
80
- **Accessibility**: WCAG-compliant components with proper accessibility props and screen reader support
81
- **Compound Components**: Complex components like ListItem use sub-component patterns for flexibility
82

83
## Capabilities
84

85
### Core Components
86

87
Essential UI building blocks including buttons, inputs, text, and icons that form the foundation of most interfaces.
88

89
```typescript { .api }
90
// Button with multiple variants and customization
91
interface ButtonProps extends TouchableOpacityProps {
92
  title?: string | React.ReactElement;
93
  type?: 'solid' | 'clear' | 'outline';
94
  loading?: boolean;
95
  icon?: IconNode;
96
  buttonStyle?: StyleProp<ViewStyle>;
97
}
98

99
// Enhanced input with labels and error handling
100
interface InputProps extends TextInputProps {
101
  label?: string | React.ReactNode;
102
  errorMessage?: string;
103
  leftIcon?: IconNode;
104
  rightIcon?: IconNode;
105
}
106

107
// Vector icons with multiple font family support
108
interface IconProps extends TouchableOpacityProps {
109
  name?: string;
110
  type?: IconType;
111
  size?: number;
112
  color?: string;
113
}
114
```
115

116
[Core Components](./core-components.md)
117

118
### Layout Components
119

120
Structural components for organizing content including cards, headers, list items, and dividers.
121

122
```typescript { .api }
123
// Compound list item with sub-components
124
interface ListItemProps extends TouchableHighlightProps {
125
  topDivider?: boolean;
126
  bottomDivider?: boolean;
127
  pad?: number;
128
}
129

130
// Navigation header with configurable sections
131
interface HeaderProps {
132
  leftComponent?: HeaderSubComponent;
133
  centerComponent?: HeaderSubComponent;
134
  rightComponent?: HeaderSubComponent;
135
  backgroundColor?: string;
136
}
137
```
138

139
[Layout Components](./layout-components.md)
140

141
### Form Components
142

143
Interactive form controls including checkboxes, sliders, search bars, and switches for user input.
144

145
```typescript { .api }
146
// Platform-specific search input
147
interface SearchBarProps {
148
  platform: 'default' | 'ios' | 'android';
149
  value?: string;
150
  onChangeText?(text: string): void;
151
  showLoading?: boolean;
152
}
153

154
// Customizable checkbox with various styles
155
interface CheckBoxProps extends TouchableOpacityProps {
156
  checked?: boolean;
157
  title?: string | React.ReactElement;
158
  checkedIcon?: IconNode;
159
  uncheckedIcon?: IconNode;
160
}
161
```
162

163
[Form Components](./form-components.md)
164

165
### Display Components
166

167
Visual elements for showing information including avatars, badges, images, and tiles.
168

169
```typescript { .api }
170
// User profile image with fallbacks
171
interface AvatarProps extends TouchableOpacityProps {
172
  source?: ImageSourcePropType;
173
  title?: string;
174
  size?: 'small' | 'medium' | 'large' | 'xlarge' | number;
175
  rounded?: boolean;
176
}
177

178
// Status indicator badge
179
interface BadgeProps {
180
  value?: React.ReactNode;
181
  status?: 'primary' | 'success' | 'warning' | 'error';
182
  badgeStyle?: StyleProp<ViewStyle>;
183
}
184
```
185

186
[Display Components](./display-components.md)
187

188
### Feedback Components
189

190
User feedback mechanisms including tooltips, overlays, dialogs, and bottom sheets for enhanced UX.
191

192
```typescript { .api }
193
// Modal overlay component
194
interface OverlayProps {
195
  isVisible: boolean;
196
  onBackdropPress?(): void;
197
  children: React.ReactNode;
198
}
199

200
// Contextual tooltip
201
interface TooltipProps {
202
  popover: React.ReactElement;
203
  children: React.ReactElement;
204
  height?: number;
205
  width?: number;
206
}
207
```
208

209
[Feedback Components](./feedback-components.md)
210

211
### Specialized Components
212

213
Purpose-built components for specific use cases including pricing cards, social icons, progress indicators, and navigation tabs.
214

215
```typescript { .api }
216
// Pricing plan display
217
interface PricingCardProps {
218
  price: string | number;
219
  title?: string;
220
  info?: string[];
221
  button?: ButtonProps;
222
}
223

224
// Social media platform icons
225
interface SocialIconProps extends TouchableOpacityProps {
226
  type: SocialMediaType;
227
  raised?: boolean;
228
  light?: boolean;
229
}
230
```
231

232
[Specialized Components](./specialized-components.md)
233

234
### Theming System
235

236
Comprehensive theming engine with context providers, hooks, and HOCs for consistent design across your application.
237

238
```typescript { .api }
239
// Theme provider component
240
interface ThemeProviderProps {
241
  theme: Partial<FullTheme>;
242
  useDark?: boolean;
243
  children: React.ReactNode;
244
}
245

246
// Theme context hook
247
function useTheme(): {
248
  theme: FullTheme;
249
  updateTheme: UpdateTheme;
250
  replaceTheme: ReplaceTheme;
251
};
252

253
// Dynamic style creation
254
function makeStyles<T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>>(
255
  styles: T | ((theme: FullTheme, props?: any) => T)
256
): (props?: any) => T;
257
```
258

259
[Theming System](./theming.md)
260

261
### Helper Functions
262

263
Utility functions for icon management, text scaling, and component enhancement.
264

265
```typescript { .api }
266
// Icon type registration
267
function registerCustomIconType(id: string, customIcon: any): void;
268

269
// Responsive text scaling
270
function normalize(size: number, factor?: number): number;
271

272
// Badge enhancement HOC
273
function withBadge<P>(badgeProps?: BadgeProps): (WrappedComponent: React.ComponentType<P>) => React.ComponentType<P>;
274
```
275

276
[Helper Functions](./helpers.md)
277

278
## Types
279

280
```typescript { .api }
281
// Core theme interfaces
282
interface FullTheme {
283
  colors: Colors;
284
  Button: Partial<ButtonProps>;
285
  Input: Partial<InputProps>;
286
  Header: Partial<HeaderProps>;
287
  // ... other component theme overrides
288
}
289

290
interface Colors {
291
  primary: string;
292
  secondary: string;
293
  success: string;
294
  warning: string;
295
  error: string;
296
  white: string;
297
  black: string;
298
  grey0: string;
299
  grey1: string;
300
  grey2: string;
301
  grey3: string;
302
  grey4: string;
303
  grey5: string;
304
  greyOutline: string;
305
  searchBg: string;
306
  disabled: string;
307
  divider: string;
308
  platform: {
309
    ios: Partial<Colors>;
310
    android: Partial<Colors>;
311
    web: Partial<Colors>;
312
  };
313
}
314

315
// Icon system types
316
type IconType = 
317
  | 'material' 
318
  | 'material-community' 
319
  | 'font-awesome' 
320
  | 'font-awesome-5' 
321
  | 'ionicon' 
322
  | 'feather' 
323
  | 'entypo' 
324
  | 'foundation' 
325
  | 'antdesign' 
326
  | 'evilicon' 
327
  | 'simple-line-icon' 
328
  | 'zocial' 
329
  | 'octicon' 
330
  | 'fontisto';
331

332
type IconNode = boolean | React.ReactElement | Partial<IconProps>;
333

334
// Theme function types
335
type UpdateTheme = (updates: Partial<FullTheme>) => void;
336
type ReplaceTheme = (theme: FullTheme) => void;
337
```