0
# Basic Components
1

2
React Native base components wrapped with NativeBase styling capabilities and theme integration.
3

4
## Capabilities
5

6
### ScrollView Component
7

8
Scrollable container component that wraps React Native's ScrollView with theme integration and styled system support.
9

10
```typescript { .api }
11
/**
12
 * Scrollable container component with theme integration
13
 * @param props - ScrollView component props
14
 * @returns JSX element representing a scrollable container
15
 */
16
function ScrollView(props: IScrollViewProps): JSX.Element;
17

18
interface IScrollViewProps extends ScrollViewProps, StyledProps {
19
  children?: React.ReactNode;
20
  _contentContainerStyle?: Partial<IScrollViewProps>;
21
}
22
```
23

24
**Usage Examples:**
25

26
```typescript
27
import { ScrollView, Box, Text } from "native-base";
28

29
// Basic scrollable content
30
<ScrollView>
31
  <Box p={4}>
32
    <Text>Scrollable content goes here...</Text>
33
    {/* More content */}
34
  </Box>
35
</ScrollView>
36

37
// ScrollView with styled system props
38
<ScrollView 
39
  bg="gray.50" 
40
  p={4}
41
  _contentContainerStyle={{ flexGrow: 1 }}
42
>
43
  <Text>Content with custom styling</Text>
44
</ScrollView>
45

46
// Horizontal scroll
47
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
48
  <Box flexDirection="row">
49
    <Box w={200} h={100} bg="blue.500" mr={4} />
50
    <Box w={200} h={100} bg="green.500" mr={4} />
51
    <Box w={200} h={100} bg="red.500" />
52
  </Box>
53
</ScrollView>
54
```
55

56
### FlatList Component
57

58
Performant list component that wraps React Native's FlatList with theme integration and styled system support.
59

60
```typescript { .api }
61
/**
62
 * Performant list component with theme integration
63
 * @param props - FlatList component props
64
 * @returns JSX element representing a performant list
65
 */
66
function FlatList<ItemT>(props: IFlatListProps<ItemT>): JSX.Element;
67

68
interface IFlatListProps<ItemT> extends FlatListProps<ItemT>, StyledProps {
69
  _contentContainerStyle?: Partial<IFlatListProps<ItemT>>;
70
  ref?: MutableRefObject<any>;
71
}
72
```
73

74
**Usage Examples:**
75

76
```typescript
77
import { FlatList, Box, Text } from "native-base";
78

79
const data = [
80
  { id: '1', title: 'First Item' },
81
  { id: '2', title: 'Second Item' },
82
  { id: '3', title: 'Third Item' },
83
];
84

85
// Basic FlatList
86
<FlatList
87
  data={data}
88
  keyExtractor={(item) => item.id}
89
  renderItem={({ item }) => (
90
    <Box p={4} borderBottomWidth={1} borderColor="gray.200">
91
      <Text>{item.title}</Text>
92
    </Box>
93
  )}
94
/>
95

96
// FlatList with styling and custom content container
97
<FlatList
98
  data={data}
99
  bg="white"
100
  _contentContainerStyle={{ p: 4 }}
101
  keyExtractor={(item) => item.id}
102
  renderItem={({ item }) => (
103
    <Box bg="gray.100" p={4} mb={2} rounded="md">
104
      <Text fontWeight="bold">{item.title}</Text>
105
    </Box>
106
  )}
107
/>
108
```
109

110
### SectionList Component
111

112
Sectioned list component that wraps React Native's SectionList with theme integration and styled system support.
113

114
```typescript { .api }
115
/**
116
 * Sectioned list component with theme integration
117
 * @param props - SectionList component props
118
 * @returns JSX element representing a sectioned list
119
 */
120
function SectionList<ItemT, SectionT>(props: ISectionListProps<ItemT, SectionT>): JSX.Element;
121

122
interface ISectionListProps<ItemT, SectionT> extends SectionListProps<ItemT, SectionT>, StyledProps {
123
  _contentContainerStyle?: Partial<ISectionListProps<ItemT, SectionT>>;
124
}
125
```
126

127
**Usage Examples:**
128

129
```typescript
130
import { SectionList, Box, Text, Heading } from "native-base";
131

132
const sections = [
133
  {
134
    title: 'Fruits',
135
    data: ['Apple', 'Banana', 'Orange'],
136
  },
137
  {
138
    title: 'Vegetables',
139
    data: ['Carrot', 'Broccoli', 'Spinach'],
140
  },
141
];
142

143
<SectionList
144
  sections={sections}
145
  keyExtractor={(item, index) => item + index}
146
  renderItem={({ item }) => (
147
    <Box p={3} borderBottomWidth={1} borderColor="gray.200">
148
      <Text>{item}</Text>
149
    </Box>
150
  )}
151
  renderSectionHeader={({ section: { title } }) => (
152
    <Box bg="gray.100" p={2}>
153
      <Heading size="sm">{title}</Heading>
154
    </Box>
155
  )}
156
/>
157
```
158

159
### KeyboardAvoidingView Component
160

161
View component that automatically adjusts its position when the keyboard appears, with theme integration.
162

163
```typescript { .api }
164
/**
165
 * View that avoids the keyboard with theme integration
166
 * @param props - KeyboardAvoidingView component props
167
 * @returns JSX element that adjusts for keyboard
168
 */
169
function KeyboardAvoidingView(props: IKeyboardAvoidingViewProps): JSX.Element;
170

171
interface IKeyboardAvoidingViewProps extends KeyboardAvoidingViewProps, StyledProps {
172
  children?: React.ReactNode;
173
}
174
```
175

176
**Usage Examples:**
177

178
```typescript
179
import { KeyboardAvoidingView, Box, Input, Button } from "native-base";
180
import { Platform } from "react-native";
181

182
<KeyboardAvoidingView
183
  behavior={Platform.OS === "ios" ? "padding" : "height"}
184
  flex={1}
185
>
186
  <Box flex={1} p={4} justifyContent="flex-end">
187
    <Input placeholder="Enter your message" mb={4} />
188
    <Button>Send</Button>
189
  </Box>
190
</KeyboardAvoidingView>
191
```
192

193
### StatusBar Component
194

195
Status bar component that wraps React Native's StatusBar with theme integration.
196

197
```typescript { .api }
198
/**
199
 * Status bar component with theme integration
200
 * @param props - StatusBar component props
201
 * @returns JSX element representing the status bar
202
 */
203
function StatusBar(props: IStatusBarProps): JSX.Element;
204

205
interface IStatusBarProps extends StatusBarProps, StyledProps {
206
  // Inherits all StatusBar props from React Native
207
}
208
```
209

210
**Usage Examples:**
211

212
```typescript
213
import { StatusBar, Box } from "native-base";
214

215
// Basic status bar
216
<Box flex={1}>
217
  <StatusBar barStyle="dark-content" backgroundColor="white" />
218
  {/* App content */}
219
</Box>
220

221
// Status bar with color mode integration
222
<Box flex={1}>
223
  <StatusBar 
224
    barStyle="light-content" 
225
    backgroundColor="primary.600"
226
    translucent={false}
227
  />
228
  {/* App content */}
229
</Box>
230
```
231

232
### View Component
233

234
Basic view component that wraps React Native's View with theme integration and styled system support.
235

236
```typescript { .api }
237
/**
238
 * Basic view component with theme integration
239
 * @param props - View component props
240
 * @returns JSX element representing a basic view
241
 */
242
function View(props: IViewProps): JSX.Element;
243

244
interface IViewProps extends ViewProps, StyledProps {
245
  children?: React.ReactNode;
246
}
247
```
248

249
**Usage Examples:**
250

251
```typescript
252
import { View, Text } from "native-base";
253

254
// Basic view with styled system
255
<View bg="blue.500" p={4} rounded="md">
256
  <Text color="white">Content in styled view</Text>
257
</View>
258

259
// View with accessibility
260
<View
261
  accessible
262
  accessibilityLabel="Custom container"
263
  bg="gray.100"
264
  p={4}
265
>
266
  <Text>Accessible content</Text>
267
</View>
268
```
269

270
## Types
271

272
### Common Interfaces
273

274
```typescript { .api }
275
// React Native base component props
276
interface ScrollViewProps {
277
  horizontal?: boolean;
278
  showsHorizontalScrollIndicator?: boolean;
279
  showsVerticalScrollIndicator?: boolean;
280
  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
281
  scrollEnabled?: boolean;
282
  // ... additional React Native ScrollView props
283
}
284

285
interface FlatListProps<ItemT> {
286
  data: ReadonlyArray<ItemT>;
287
  renderItem: (info: { item: ItemT; index: number }) => React.ReactElement;
288
  keyExtractor?: (item: ItemT, index: number) => string;
289
  horizontal?: boolean;
290
  numColumns?: number;
291
  // ... additional React Native FlatList props
292
}
293

294
interface SectionListProps<ItemT, SectionT> {
295
  sections: ReadonlyArray<SectionListData<ItemT, SectionT>>;
296
  renderItem: (info: { item: ItemT; index: number; section: SectionT }) => React.ReactElement;
297
  renderSectionHeader?: (info: { section: SectionT }) => React.ReactElement;
298
  keyExtractor?: (item: ItemT, index: number) => string;
299
  // ... additional React Native SectionList props
300
}
301

302
interface KeyboardAvoidingViewProps extends ViewProps {
303
  behavior?: 'height' | 'position' | 'padding';
304
  keyboardVerticalOffset?: number;
305
}
306

307
interface ViewProps {
308
  style?: ViewStyle;
309
  accessible?: boolean;
310
  accessibilityLabel?: string;
311
  testID?: string;
312
  // ... additional React Native View props
313
}
314

315
interface StatusBarProps {
316
  barStyle?: 'default' | 'light-content' | 'dark-content';
317
  backgroundColor?: string;
318
  translucent?: boolean;
319
  hidden?: boolean;
320
}
321
```