Getting Started | NativeBase | Universal Components for React and React Native

Nativebase logo
NativeBase
3.4.x
Search
⌘
K
Hire us
Nativebase logo
NativeBase
Introduction
Getting Started
Installation
Setup NativeBase Provider
Resources
Contribution
Core Concepts
Utility First
Utility Props Specificity
Design Tokens
Pseudo Props: Overview
Pseudo Props: Dos & Don'ts
Responsive
Features
Utility Props
Color mode (Dark Mode)
NativeBase Factory
SafeAreaView Props
Strict Mode
Accessibility
Theme
Default Theme
Customizing Theme
Customizing Fonts
Customizing Components
Making components dark mode compatible
Breakpoints
Using Theme
TypeScript
Layout
Box
Center
Container
Flex
HStack / Row
Stack
VStack / Column
ZStack
Forms
Button
Pressable
Checkbox
FormControl
IconButton
Input
Link
Radio
Select
Slider
Switch
TextArea
Data Display
Badge
Divider
Feedback
Alert
Progress
Skeleton
New
Spinner
Toast
Typography
Text
Heading
Overlay
AlertDialog
Menu
Modal
Popover
Tooltip
Disclosure
ActionSheet
Media and Icons
Avatar
Icon
Image
Update
Transition
PresenceTransition
Slide
Stagger
Others
Fab
Hidden
ReactNative Components
ScrollView
View
KeyboardAvoidingView
StatusBar
FlatList
SectionList
Hooks
useDisclose
useBreakpointValue
useClipboard
useMediaQuery
useTheme
useToken
useColorMode
useColorModeValue
useContrastText
useAccessibleColors
Examples
Todo-List
Kitchen Sink
Recipes
Designs
AppBar
Card
Drawer Navigation
Tab View
Swipe List
Forms
Form with Validation
Login/Signup Forms
SearchBar
Layout
App Drawer
Footer
AspectRatio
Migration
Upgrading to v3
Upgrading to 3.2.0 from 3.x
Components Migration
ActionSheet
Badge
Button
Card
Checkbox
DatePicker
DeckSwiper
Drawer
FABs
FooterTab
Form
Header
Icon
Layout
Picker
Radio Button
Searchbar
Segment
Spinner
SwipeList
Tabs
Thumbnail
Toast
Typography
More
Changelog
Testing
FAQ's
More Props
The alpha version of gluestack-ui is now available! Start building today!
Explore gluestack-ui
Read more
Getting Started
NativeBase is a component library that enables devs to build universal design systems. It is built on top of React Native, allowing you to develop apps for Android, iOS, and the Web.
Installation Guide
Setup NativeBase in your project
Playground
Try NativeBase on Snack by Expo
Theming
Create your own Design System
Recipes
Popular Recipes for Apps
A Brief History of NativeBase
NativeBase v1.x : NativeBase started out as an open source framework that enabled developers to build high-quality mobile apps using React Native. The first version included UITabBar on iOS and Drawer on Android. NativeBase v1 was very well-received by the dev community.
NativeBase v2.x : The second version was released with new components, preset themes, unified icons & more. The main focus of v2 was to make components easy to theme with very few modifications. From v2.4.1 onwards, NativeBase also included support for the web.
NativeBase v3.x : We wanted to make NativeBase the go-to component library for anyone building with React Native and Web. This version is accessible, highly customizable and consistent across android, iOS & web. That's not all though, read on for the full benefits of using v3.
What's New with NativeBase v3?
We had clear goals in mind while building version 3. Take a look at some of the new features we added:
Multiplatform : NativeBase supports multiple platforms; android, iOS and web. You can also customise properties using platform-specific props.
Inherently Beautiful : NativeBase ships with a default theme that provides beautiful components, out of the box.
Accessible : This version has out of the box accessibility including focus management, keyboard navigation and more.
Customisable : The default theme can be extended as you desire. You can also customise specific components for your app needs.
Next
Installation
Nativebase logo
MadeWithNativeBase