Install in Expo project

NativeBase

3.4.x

⌘

Hire us

NativeBase

Introduction

Getting Started

Installation

Setup NativeBase Provider

Resources

Core Concepts

Features

Color mode (Dark Mode)

Theme

Customizing Components

Making components dark mode compatible

Layout

Forms

Data Display

Feedback

Typography

Overlay

Disclosure

Media and Icons

Transition

Others

ReactNative Components

Hooks

Examples

Community Integration

React Hook Forms

Formik

Recipes

Designs

Forms

Layout

Migration

Components Migration

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

Install in Expo project

Expo helps you to create universal (iOS, Android and Web) React Native apps with no build configuration.

Create a new expo project

Copy
npm install --global expo-cli
expo init my-project
cd my-project/

Refer this link

for additional information on Expo and setting up an Expo starter app.

Install dependencies

yarn

npm

Copy
expo install react-native-svg@12.1.1

Copy
expo install react-native-safe-area-context@3.3.2

Run the Hello world example

Put the below code in your App.js

Copy
import React from "react";
import { NativeBaseProvider, Box } from "native-base";

function App() {
  return (
    <NativeBaseProvider>
      <Box>Hello world</Box>
    </NativeBaseProvider>
  );
}

Customize NativeBaseProvider

NativeBaseProvider provides theme throughout your application

Theme

Utility props

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

Installation

Setup NativeBase Provider

Quick Nav

Create a new expo project

Install dependencies

Run the Hello world example

MadeWithNativeBase

gluestack-ui

Install in Expo project | NativeBase | Universal Components for React and React Native