# NativeBase — Universal Component Library for React Native and Web

> An accessible, utility-first component library for building consistent UIs across React Native, Android, iOS, and Web from a single codebase.

## Install

Save in your project root:

# NativeBase — Universal Component Library for React Native and Web

## Quick Use
```bash
npm install native-base react-native-svg react-native-safe-area-context
```
```jsx
import { NativeBaseProvider, Box, Button, Text } from 'native-base';
export default function App() {
  return (
    <NativeBaseProvider>
      <Box p={4}>
        <Text fontSize="xl">Welcome</Text>
        <Button mt={2}>Get Started</Button>
      </Box>
    </NativeBaseProvider>
  );
}
```

## Introduction
NativeBase is a component library that lets developers build UIs for React Native and Web from a single codebase. It provides utility-style props inspired by Tailwind CSS and Chakra UI, making it easy to style components inline without separate stylesheets. The library ships with 40+ accessible, themeable components.

## What NativeBase Does
- Provides 40+ pre-built components (Box, Stack, Button, Input, Modal, etc.)
- Supports utility-style props for spacing, colors, layout, and typography
- Renders on iOS, Android, and Web from the same component code
- Ships a theme system with customizable tokens (colors, sizes, fonts)
- Includes accessibility attributes by default on all interactive components

## Architecture Overview
NativeBase wraps React Native primitives and adds a styling layer that resolves utility props into platform-specific styles at render time. The NativeBaseProvider at the app root injects a theme context. Components read from this context and merge theme defaults with inline utility props. The resolution engine handles responsive breakpoints and color mode (light/dark) automatically.

## Self-Hosting & Configuration
- Install native-base and required peer dependencies
- Wrap the app root with `<NativeBaseProvider>`
- Customize the theme using `extendTheme()` for colors, fonts, and component defaults
- Use `useColorMode()` to toggle between light and dark themes
- Integrate with Expo or bare React Native projects

## Key Features
- Utility-first prop API similar to Chakra UI
- Responsive props with breakpoint arrays: `w={['100%', '50%', '33%']}`
- Dark mode support with `useColorMode` and `_dark` pseudo props
- Full TypeScript support with autocomplete for utility props
- Composable layout primitives: Box, HStack, VStack, Center, ZStack

## Comparison with Similar Tools
- **React Native Elements** — simpler API but no utility-style props
- **Tamagui** — compiler-optimized, targets both web and native with better perf
- **React Native Paper** — Material Design focused, less flexible theming
- **Chakra UI** — web-only, NativeBase brings a similar API to native
- **Gluestack UI** — successor project with headless primitives approach

## FAQ
**Q: Does NativeBase work with Expo?**
A: Yes, it supports Expo managed and bare workflows. SVG peer dependency may need Expo-compatible installation.

**Q: How do I add custom fonts?**
A: Extend the theme with `fontConfig` and `fonts` keys, then use them via the `fontFamily` prop.

**Q: Can I use NativeBase on web without React Native Web?**
A: No, NativeBase relies on React Native Web for browser rendering.

**Q: What is the relationship between NativeBase and Gluestack?**
A: The NativeBase team created Gluestack UI as a next-generation alternative with headless components.

## Sources
- https://github.com/GeekyAnts/NativeBase
- https://nativebase.io

---
Source: https://tokrepo.com/en/workflows/asset-1dd56f65
Author: AI Open Source