0
# Layout Components
1

2
Structural components for organizing content including cards, headers, list items, and dividers that provide the foundation for app layouts and navigation.
3

4
## Capabilities
5

6
### Card
7

8
Container component for displaying related content with customizable styling, shadows, and layout options. Perfect for grouping related information.
9

10
```typescript { .api }
11
/**
12
 * Container component for displaying related content
13
 */
14
interface CardProps {
15
  /** Card content */
16
  children?: React.ReactNode;
17
  /** Container styles */
18
  containerStyle?: StyleProp<ViewStyle>;
19
  /** Content wrapper styles */
20
  wrapperStyle?: StyleProp<ViewStyle>;
21
  /** Card title configuration */
22
  title?: string | React.ReactElement;
23
  /** Title text styles */
24
  titleStyle?: StyleProp<TextStyle>;
25
  /** Card image source */
26
  image?: ImageSourcePropType;
27
  /** Image styles */
28
  imageStyle?: StyleProp<ImageStyle>;
29
  /** Image wrapper styles */
30
  imageWrapperStyle?: StyleProp<ViewStyle>;
31
  /** Featured image configuration */
32
  featuredTitle?: string;
33
  /** Featured subtitle */
34
  featuredSubtitle?: string;
35
  /** Featured title styles */
36
  featuredTitleStyle?: StyleProp<TextStyle>;
37
  /** Featured subtitle styles */
38
  featuredSubtitleStyle?: StyleProp<TextStyle>;
39
  /** Divider line at bottom */
40
  dividerStyle?: StyleProp<ViewStyle>;
41
}
42
```
43

44
**Usage Examples:**
45

46
```typescript
47
import { Card, Button, Image } from 'react-native-elements';
48

49
// Basic card with content
50
<Card>
51
  <Text>Card content goes here</Text>
52
  <Button title="Action" />
53
</Card>
54

55
// Card with title and image
56
<Card
57
  title="Card Title"
58
  image={{ uri: 'https://example.com/image.jpg' }}
59
  containerStyle={{ borderRadius: 10 }}
60
>
61
  <Text>This card has a title and image</Text>
62
</Card>
63

64
// Featured card with overlay text
65
<Card
66
  image={{ uri: 'https://example.com/featured.jpg' }}
67
  featuredTitle="Featured Content"
68
  featuredSubtitle="Subtitle text"
69
  featuredTitleStyle={{ color: 'white' }}
70
/>
71

72
// Custom styled card
73
<Card
74
  containerStyle={{
75
    backgroundColor: '#f8f9fa',
76
    borderWidth: 0,
77
    borderRadius: 15,
78
    shadowColor: '#000',
79
    shadowOffset: { width: 0, height: 2 },
80
    shadowOpacity: 0.1,
81
    shadowRadius: 5,
82
  }}
83
  wrapperStyle={{ padding: 20 }}
84
>
85
  <Text>Custom styled card content</Text>
86
</Card>
87
```
88

89
### Header
90

91
Navigation header component with configurable left, center, and right sections. Supports custom components, styling, and platform-specific behaviors.
92

93
```typescript { .api }
94
/**
95
 * Navigation header with title and action buttons
96
 */
97
interface HeaderProps {
98
  /** Left component configuration */
99
  leftComponent?: HeaderSubComponent;
100
  /** Center component configuration */
101
  centerComponent?: HeaderSubComponent;
102
  /** Right component configuration */
103
  rightComponent?: HeaderSubComponent;
104
  /** Header background color */
105
  backgroundColor?: string;
106
  /** Background image source */
107
  backgroundImage?: ImageSourcePropType;
108
  /** Background image styles */
109
  backgroundImageStyle?: StyleProp<ImageStyle>;
110
  /** Placement of components */
111
  placement?: 'left' | 'center' | 'right';
112
  /** Bar style for status bar */
113
  barStyle?: 'default' | 'light-content' | 'dark-content';
114
  /** Container styles */
115
  containerStyle?: StyleProp<ViewStyle>;
116
  /** Center container styles */
117
  centerContainerStyle?: StyleProp<ViewStyle>;
118
  /** Left container styles */
119
  leftContainerStyle?: StyleProp<ViewStyle>;
120
  /** Right container styles */
121
  rightContainerStyle?: StyleProp<ViewStyle>;
122
  /** Linear gradient props for background */
123
  linearGradientProps?: object;
124
  /** Custom view component */
125
  ViewComponent?: typeof React.Component;
126
}
127

128
/**
129
 * Header sub-component configuration
130
 */
131
interface HeaderSubComponent {
132
  /** Component icon */
133
  icon?: string;
134
  /** Component text */
135
  text?: string;
136
  /** Component styles */
137
  style?: StyleProp<TextStyle | ViewStyle>;
138
  /** Touch handler */
139
  onPress?(): void;
140
  /** Custom component */
141
  component?: React.ComponentType<any>;
142
}
143
```
144

145
**Usage Examples:**
146

147
```typescript
148
import { Header, Icon } from 'react-native-elements';
149

150
// Basic header with title
151
<Header
152
  centerComponent={{ text: 'My App', style: { color: '#fff', fontSize: 18 } }}
153
  backgroundColor="#007AFF"
154
/>
155

156
// Header with navigation icons
157
<Header
158
  leftComponent={{ 
159
    icon: 'menu', 
160
    color: '#fff', 
161
    onPress: openDrawer 
162
  }}
163
  centerComponent={{ text: 'Home', style: { color: '#fff' } }}
164
  rightComponent={{ 
165
    icon: 'search', 
166
    color: '#fff', 
167
    onPress: openSearch 
168
  }}
169
  backgroundColor="#2c3e50"
170
/>
171

172
// Header with custom components
173
<Header
174
  leftComponent={
175
    <Icon
176
      name="arrow-back"
177
      type="material"
178
      color="#fff"
179
      onPress={goBack}
180
    />
181
  }
182
  centerComponent={
183
    <Image
184
      source={{ uri: 'https://example.com/logo.png' }}
185
      style={{ width: 100, height: 30 }}
186
    />
187
  }
188
  rightComponent={
189
    <Button
190
      title="Save"
191
      type="clear"
192
      titleStyle={{ color: '#fff' }}
193
      onPress={save}
194
    />
195
  }
196
/>
197

198
// Header with gradient background
199
<Header
200
  centerComponent={{ text: 'Gradient Header', style: { color: '#fff' } }}
201
  linearGradientProps={{
202
    colors: ['#FF6B6B', '#FF8E53'],
203
    start: { x: 0, y: 0 },
204
    end: { x: 1, y: 0 },
205
  }}
206
/>
207
```
208

209
### ListItem
210

211
Flexible compound list item component with sub-components for building complex list interfaces. Supports accordion, swipe actions, and various content layouts.
212

213
```typescript { .api }
214
/**
215
 * Flexible list item component with sub-components
216
 */
217
interface ListItemProps extends TouchableHighlightProps {
218
  /** Container styles */
219
  containerStyle?: StyleProp<ViewStyle>;
220
  /** Disabled state */
221
  disabled?: boolean;
222
  /** Show top divider */
223
  topDivider?: boolean;
224
  /** Show bottom divider */
225
  bottomDivider?: boolean;
226
  /** Padding value (default: 16) */
227
  pad?: number;
228
  /** Custom component (auto-selects based on onPress) */
229
  Component?: typeof React.Component;
230
  /** Custom view component */
231
  ViewComponent?: typeof React.Component;
232
  /** Linear gradient configuration */
233
  linearGradientProps?: any;
234
  /** Children components */
235
  children?: React.ReactNode;
236
}
237

238
/**
239
 * ListItem accordion sub-component
240
 */
241
interface ListItemAccordionProps {
242
  /** Whether accordion is expanded */
243
  isExpanded?: boolean;
244
  /** Icon configuration */
245
  icon?: IconNode;
246
  /** Accordion content */
247
  content?: React.ReactNode;
248
  /** Toggle handler */
249
  onPress?(): void;
250
}
251

252
/**
253
 * ListItem swipeable sub-component
254
 */
255
interface ListItemSwipeableProps {
256
  /** Left swipe actions */
257
  leftContent?: React.ReactNode;
258
  /** Right swipe actions */
259
  rightContent?: React.ReactNode;
260
  /** Left action width */
261
  leftWidth?: number;
262
  /** Right action width */
263
  rightWidth?: number;
264
  /** Children content */
265
  children?: React.ReactNode;
266
}
267
```
268

269
**Usage Examples:**
270

271
```typescript
272
import { ListItem, Avatar, Button } from 'react-native-elements';
273

274
// Basic list item with avatar and chevron
275
<ListItem onPress={handlePress} bottomDivider>
276
  <Avatar source={{ uri: 'https://example.com/avatar.jpg' }} />
277
  <ListItem.Content>
278
    <ListItem.Title>John Doe</ListItem.Title>
279
    <ListItem.Subtitle>Software Developer</ListItem.Subtitle>
280
  </ListItem.Content>
281
  <ListItem.Chevron />
282
</ListItem>
283

284
// List item with checkbox
285
<ListItem bottomDivider>
286
  <ListItem.CheckBox
287
    checked={isChecked}
288
    onPress={() => setIsChecked(!isChecked)}
289
  />
290
  <ListItem.Content>
291
    <ListItem.Title>Enable Notifications</ListItem.Title>
292
  </ListItem.Content>
293
</ListItem>
294

295
// Accordion list item
296
<ListItem.Accordion
297
  content={
298
    <>
299
      <ListItem>
300
        <ListItem.Content>
301
          <ListItem.Title>Nested Item 1</ListItem.Title>
302
        </ListItem.Content>
303
      </ListItem>
304
      <ListItem>
305
        <ListItem.Content>
306
          <ListItem.Title>Nested Item 2</ListItem.Title>
307
        </ListItem.Content>
308
      </ListItem>
309
    </>
310
  }
311
  isExpanded={isExpanded}
312
  onPress={() => setIsExpanded(!isExpanded)}
313
>
314
  <ListItem.Content>
315
    <ListItem.Title>Expandable Section</ListItem.Title>
316
  </ListItem.Content>
317
</ListItem.Accordion>
318

319
// Swipeable list item with actions
320
<ListItem.Swipeable
321
  leftContent={
322
    <Button
323
      title="Call"
324
      icon={{ name: 'phone', color: 'white' }}
325
      buttonStyle={{ minHeight: '100%', backgroundColor: 'green' }}
326
    />
327
  }
328
  rightContent={
329
    <Button
330
      title="Delete"
331
      icon={{ name: 'delete', color: 'white' }}
332
      buttonStyle={{ minHeight: '100%', backgroundColor: 'red' }}
333
    />
334
  }
335
>
336
  <Avatar source={{ uri: 'https://example.com/avatar.jpg' }} />
337
  <ListItem.Content>
338
    <ListItem.Title>Swipeable Item</ListItem.Title>
339
    <ListItem.Subtitle>Swipe left or right for actions</ListItem.Subtitle>
340
  </ListItem.Content>
341
  <ListItem.Chevron />
342
</ListItem.Swipeable>
343

344
// List item with input field
345
<ListItem>
346
  <ListItem.Content>
347
    <ListItem.Input
348
      placeholder="Enter text here"
349
      value={inputValue}
350
      onChangeText={setInputValue}
351
    />
352
  </ListItem.Content>
353
</ListItem>
354

355
// List item with button group
356
<ListItem>
357
  <ListItem.Content>
358
    <ListItem.Title>Choose Option</ListItem.Title>
359
    <ListItem.ButtonGroup
360
      buttons={['Option 1', 'Option 2', 'Option 3']}
361
      selectedIndex={selectedIndex}
362
      onPress={setSelectedIndex}
363
    />
364
  </ListItem.Content>
365
</ListItem>
366
```
367

368
### Divider
369

370
Horizontal or vertical separator line component for visually separating content sections with customizable styling and orientation.
371

372
```typescript { .api }
373
/**
374
 * Horizontal or vertical separator line
375
 */
376
interface DividerProps {
377
  /** Divider orientation */
378
  orientation?: 'horizontal' | 'vertical';
379
  /** Divider styles */
380
  style?: StyleProp<ViewStyle>;
381
  /** Inset from left edge */
382
  inset?: boolean;
383
  /** Inset left value */
384
  insetLeft?: number;
385
  /** Inset right value */
386
  insetRight?: number;
387
  /** Inset type */
388
  insetType?: 'left' | 'right' | 'middle';
389
  /** Subheader text */
390
  subHeader?: string;
391
  /** Subheader styles */
392
  subHeaderStyle?: StyleProp<TextStyle>;
393
  /** Divider width/height */
394
  width?: number;
395
  /** Divider color */
396
  color?: string;
397
}
398
```
399

400
**Usage Examples:**
401

402
```typescript
403
import { Divider, Text } from 'react-native-elements';
404

405
// Basic horizontal divider
406
<Divider />
407

408
// Divider with custom styling
409
<Divider
410
  style={{ backgroundColor: '#007AFF', height: 2 }}
411
/>
412

413
// Divider with inset
414
<Divider
415
  inset={true}
416
  insetLeft={50}
417
  style={{ backgroundColor: '#e1e8ed' }}
418
/>
419

420
// Divider with subheader text
421
<Divider
422
  subHeader="Section Divider"
423
  subHeaderStyle={{ color: '#666', textAlign: 'center' }}
424
/>
425

426
// Vertical divider
427
<View style={{ flexDirection: 'row', height: 50 }}>
428
  <Text>Left Content</Text>
429
  <Divider orientation="vertical" width={1} />
430
  <Text>Right Content</Text>
431
</View>
432

433
// Custom colored divider
434
<Divider
435
  color="#FF6B6B"
436
  width={3}
437
  style={{ marginVertical: 10 }}
438
/>
439
```