Install in Create React App project

New Project

The easiest way to get started with NativeBase in create react app is using NativeBase template.

JavaScript

npx create-react-app my-app --template nativebase

cd my-app/

yarn start

TypeScript

npx create-react-app my-app --template nativebase-typescript

cd my-app/

yarn start

Existing Project

Create a new CRA project If not exist

npx create-react-app my-app

cd my-app

Refer this guide if you need additional configurations.

Install dependencies

yarn

yarn add react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context

npm

npm install react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context

Run the Hello world example

Put the below code in your App.js

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

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