Install in Next.js project | NativeBase | Universal Components for React and React Native

NativeBase

3.4.x

🎉 Prompt to React Native UI

→

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

Resources

Contribution

Core Concepts

Utility First

Design Tokens

Pseudo Props

Responsive

Features

Utility Props

Color mode (Dark Mode)

NativeBase Factory

SafeAreaView Props

Accessibility

Theme

Default Theme

Customizing Theme

Customizing Fonts

Customizing Components

Making components dark mode compatible

Breakpoints

Using Theme

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

Spinner

Toast

Typography

Text

Heading

Typography

AlertDialog

Menu

Modal

Popover

Tooltip

Disclosure

ActionSheet

Media and Icons

Avatar

Icon

Image

Transition

PresenceTransition

Slide

Stagger

Others

Fab

ReactNative Components

ScrollView

View

KeyboardAvoidingView

StatusBar

FlatList

SectionList

Hooks

useDisclose

useBreakpointValue

useClipboard

useMediaQuery

useTheme

useToken

useColorMode

useColorModeValue

useContrastText

useAccessibleColors

Examples

Todo-List

Kitchen Sink

Community Integration

React Hook Forms

Formik

Recipes

Designs

AppBar

Card

Drawer Navigation

Tab View

Swipe List

Forms

Form with Validation

Login/Signup Forms

SearchBar

Layout

App Drawer

Footer

Migration

Guide to v3

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

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

Install in Next.js 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

Previous

Installation

Next

Setup NativeBase Provider

Quick Nav

Create a new project using Next.js CLI with NativeBase template

Install dependencies

Run the Hello world example

MadeWithNativeBase

gluestack-ui