0
# NativeBase
1

2
NativeBase is a comprehensive, mobile-first component library for React Native that provides essential cross-platform UI components for building consistent design systems. It offers around 40 production-ready components including layout elements, forms, data display, feedback, typography, overlays, and media components, all with built-in accessibility support through React ARIA integration.
3

4
## Package Information
5

6
- **Package Name**: native-base
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install native-base react-native-svg react-native-safe-area-context`
10

11
## Core Imports
12

13
```typescript
14
import { NativeBaseProvider, Box, Text, Button } from "native-base";
15
```
16

17
For CommonJS:
18

19
```javascript
20
const { NativeBaseProvider, Box, Text, Button } = require("native-base");
21
```
22

23
## Basic Usage
24

25
```typescript
26
import React from 'react';
27
import { NativeBaseProvider, Box, Text, Button, VStack } from "native-base";
28

29
function App() {
30
  return (
31
    <NativeBaseProvider>
32
      <Box flex={1} bg="#fff" alignItems="center" justifyContent="center">
33
        <VStack space={4} alignItems="center">
34
          <Text fontSize="lg">Welcome to NativeBase</Text>
35
          <Button onPress={() => console.log("Button pressed")}>
36
            Click me
37
          </Button>
38
        </VStack>
39
      </Box>
40
    </NativeBaseProvider>
41
  );
42
}
43
```
44

45
## Architecture
46

47
NativeBase is built around several key architectural components:
48

49
- **Provider System**: `NativeBaseProvider` wraps your app and provides theme context, color mode, and configuration
50
- **Styled System**: Utility-style props powered by a custom styled system for rapid UI development
51
- **Component Library**: Three tiers of components (Basic, Primitives, Composites) with consistent APIs
52
- **Theme Engine**: Comprehensive theming capabilities with design tokens, color modes, and responsive breakpoints
53
- **Accessibility First**: Built-in accessibility support through React ARIA integration
54
- **Cross-Platform**: Single codebase for React Native, iOS, Android, and Web platforms
55

56
## Capabilities
57

58
### Layout Components
59

60
Core layout and structure components for building responsive user interfaces and interactions.
61

62
```typescript { .api }
63
function Box(props: IBoxProps): JSX.Element;
64
function Flex(props: IFlexProps): JSX.Element;
65
function VStack(props: IStackProps): JSX.Element;
66
function HStack(props: IStackProps): JSX.Element;
67
function Stack(props: IStackProps): JSX.Element;
68
function Center(props: ICenterProps): JSX.Element;
69
function Pressable(props: IPressableProps): JSX.Element;
70
function Hidden(props: IHiddenProps): JSX.Element;
71
```
72

73
[Layout Components](./layout.md)
74

75
### Form Components
76

77
Input controls, buttons, and form management components with built-in validation support.
78

79
```typescript { .api }
80
function Input(props: IInputProps): JSX.Element;
81
function Button(props: IButtonProps): JSX.Element;
82
function IconButton(props: IIconButtonProps): JSX.Element;
83
function Checkbox(props: ICheckboxProps): JSX.Element;
84
function Radio(props: IRadioProps): JSX.Element;
85
function Select(props: ISelectProps): JSX.Element;
86
function FormControl(props: IFormControlProps): JSX.Element;
87
```
88

89
[Form Components](./forms.md)
90

91
### Typography Components
92

93
Text display and typography components with theme integration.
94

95
```typescript { .api }
96
function Text(props: ITextProps): JSX.Element;
97
function Heading(props: IHeadingProps): JSX.Element;
98
```
99

100
[Typography Components](./typography.md)
101

102
### Navigation & Feedback
103

104
Navigation aids, alerts, progress indicators, and user feedback components.
105

106
```typescript { .api }
107
function Alert(props: IAlertProps): JSX.Element;
108
function Badge(props: IBadgeProps): JSX.Element;
109
function Breadcrumb(props: IBreadcrumbProps): JSX.Element;
110
function Progress(): JSX.Element;
111
function Toast(props: IToastProps): JSX.Element;
112
function Fab(props: IFabProps): JSX.Element;
113
function useToast(): ToastFunction;
114
```
115

116
[Navigation & Feedback](./navigation-feedback.md)
117

118
### Overlay Components
119

120
Modal dialogs, popovers, tooltips, and overlay management.
121

122
```typescript { .api }
123
function Modal(props: IModalProps): JSX.Element;
124
function Popover(props: IPopoverProps): JSX.Element;
125
function Tooltip(props: ITooltipProps): JSX.Element;
126
function Drawer(props: IDrawerProps): JSX.Element;
127
function AlertDialog(): JSX.Element;
128
function Actionsheet(props: IActionsheetProps): JSX.Element;
129
```
130

131
[Overlay Components](./overlays.md)
132

133
### Media & Data Display
134

135
Images, icons, lists, and data presentation components.
136

137
```typescript { .api }
138
function Image(props: IImageProps): JSX.Element;
139
function Icon(props: IIconProps): JSX.Element;
140
function createIcon(options: IconOptions): React.ComponentType<IIconProps>;
141
function Avatar(props: IAvatarProps): JSX.Element;
142
function List(props: IListProps): JSX.Element;
143
```
144

145
[Media & Data Display](./media-data.md)
146

147
### Animation & Transitions
148

149
Animation components and transition effects.
150

151
```typescript { .api }
152
function Fade(props: IFadeProps): JSX.Element;
153
function ScaleFade(props: IScaleFadeProps): JSX.Element;
154
function Slide(props: ISlideProps): JSX.Element;
155
function SlideFade(props: ISlideFadeProps): JSX.Element;
156
function PresenceTransition(): JSX.Element;
157
function Stagger(): JSX.Element;
158
```
159

160
[Animation & Transitions](./animations.md)
161

162
### Theme System
163

164
Theme configuration, color modes, and design token management.
165

166
```typescript { .api }
167
function NativeBaseProvider(props: INativebaseConfig): JSX.Element;
168
function extendTheme(theme: Partial<ITheme>): ITheme;
169
function useColorMode(): ColorModeReturn;
170
function useColorModeValue<T>(light: T, dark: T): T;
171
function useTheme(): ITheme;
172
function useToken(token: string, fallback?: any): any;
173
```
174

175
[Theme System](./theme.md)
176

177
### Basic Components
178

179
React Native base components wrapped with NativeBase styling capabilities and theme integration.
180

181
```typescript { .api }
182
function ScrollView(props: IScrollViewProps): JSX.Element;
183
function FlatList<ItemT>(props: IFlatListProps<ItemT>): JSX.Element;
184
function SectionList<ItemT, SectionT>(props: ISectionListProps<ItemT, SectionT>): JSX.Element;
185
function KeyboardAvoidingView(props: IKeyboardAvoidingViewProps): JSX.Element;
186
function StatusBar(props: IStatusBarProps): JSX.Element;
187
function View(props: IViewProps): JSX.Element;
188
```
189

190
[Basic Components](./basic-components.md)
191

192
### Hooks & Utilities
193

194
React hooks for state management, responsive design, and utility functions.
195

196
```typescript { .api }
197
function useBreakpointValue<T>(values: ResponsiveValue<T>): T;
198
function useMediaQuery(query: string): boolean[];
199
function useDisclose(defaultIsOpen?: boolean): DisclosureReturn;
200
function useClipboard(value: string): ClipboardReturn;
201
function useSafeArea(): SafeAreaReturn;
202
```
203

204
[Hooks & Utilities](./hooks-utilities.md)
205

206
## Types
207

208
### Core Interfaces
209

210
```typescript { .api }
211
interface INativebaseConfig {
212
  initialColorMode?: ColorMode;
213
  theme?: ICustomTheme;
214
  colorModeManager?: StorageManager;
215
  children?: React.ReactNode;
216
}
217

218
interface ITheme {
219
  colors: Colors;
220
  space: Space;
221
  sizes: Sizes;
222
  fonts: Fonts;
223
  fontSizes: FontSizes;
224
  fontWeights: FontWeights;
225
  lineHeights: LineHeights;
226
  letterSpacings: LetterSpacings;
227
  radii: Radii;
228
  shadows: Shadows;
229
  components: ComponentThemes;
230
}
231

232
interface StyledProps {
233
  bg?: ResponsiveValue<string>;
234
  backgroundColor?: ResponsiveValue<string>;
235
  m?: ResponsiveValue<string | number>;
236
  margin?: ResponsiveValue<string | number>;
237
  p?: ResponsiveValue<string | number>;
238
  padding?: ResponsiveValue<string | number>;
239
  w?: ResponsiveValue<string | number>;
240
  width?: ResponsiveValue<string | number>;
241
  h?: ResponsiveValue<string | number>;
242
  height?: ResponsiveValue<string | number>;
243
  // ... additional styled system props
244
}
245

246
type ColorMode = "light" | "dark";
247
type ResponsiveValue<T> = T | T[] | { base?: T; sm?: T; md?: T; lg?: T; xl?: T };
248
```