NativeBase — Universal Component Library for React Native and Web

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