Install in Next.js project | NativeBase

3.4.x

Search

⌘

K

Introduction

Getting Started

Setup NativeBase Provider

Resources

Creating a Universal App with NativeBase and Solito

Core Concepts

Utility Props Specificity

Pseudo Props: Overview

Pseudo Props: Dos & Don'ts

Internal Pseudo Props

Features

Color mode (Dark Mode)

NativeBase Factory

SafeAreaView Props

Theme

Customizing Theme

Customizing Fonts

Customizing Components

Making components dark mode compatible

Layout

VStack / Column

Forms

Data Display

Feedback

Typography

Overlay

Disclosure

Media and Icons

Transition

PresenceTransition

Others

ReactNative Components

KeyboardAvoidingView

Hooks

useBreakpointValue

useColorModeValue

useContrastText

useAccessibleColors

Examples

Recipes

Designs

Drawer Navigation

Forms

Form with Validation

Login/Signup Forms

Layout

More

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

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

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

NativeBase next adapter

To use Next.js with native-base for web we recommend that you use a library called @native-base/next-adapter to handle the configuration and integration of the tools.

NOTE

Make sure to update your root element styles as

Setup NativeBase Provider

Quick Nav

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

Install dependencies

Run the Hello world example

MadeWithNativeBase