Install in Create React App project | NativeBase | Universal Components for React and React Native

NativeBase

3.4.x

Search

Search

⌘

K

Hire us

Light mode active 🚨

Do you really want to stay here? Really? Really? Pakka? Sure? Are you a true developer?

No

Back to DarkMode

NativeBase

Introduction

Getting Started

Installation

Setup NativeBase Provider

Migration

Upgrading to v3

Upgrading to 3.2.0 from 3.x

Upgrading to 3.4.0 from 3.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

Resources

Contribution

Creating a Universal App with NativeBase and Solito

Core Concepts

Utility First

Utility Props Specificity

Design Tokens

Pseudo Props: Overview

Pseudo Props: Dos & Don'ts

Internal Pseudo Props

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

AspectRatio

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

Spinner

Toast

Typography

Text

Heading

Overlay

AlertDialog

Menu

Modal

Popover

Tooltip

Disclosure

ActionSheet

Media and Icons

Avatar

Icon

Image

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

More

Changelog

Testing

FAQ's

More Props

If you are starting a new project, please try gluestack-ui for better performance and new design.

Install in Create React App project

New Project

Existing Project

Customize NativeBaseProvider

NativeBaseProvider provides theme throughout your application

Theme

Read more about the default NativeBase theme and how to override it

Utility props

Shorthands of commonly used styling props which maps with the provided theme

NOTE

Make sure to update your root element styles as

shown here

Previous

Installation

Next

Setup NativeBase Provider

Quick Nav

JavaScript

TypeScript

Install dependencies

Run the Hello world example

MadeWithNativeBase

gluestack-ui