Quick Setup

To have NativeBase components running onto your native apps, all you need to do is, create a fresh React Native project and install the NativeBase using npm.

System Requirements

• Globally installed node >= 6.0
• Globally installed npm >= 4.0
• Globally installed React Native CLI which allow you to easily create and initialize projects.
• Click here to know about React Native version compatibility with NativeBase.

1. Setup with React Native

react-native init AwesomeNativeBase
cd AwesomeNativeBase

Install NativeBase

npm install native-base@2 --save

Install Peer Dependencies
The peer dependencies included from any npm packages does not automatically get installed. Your application will not depend on it explicitly.

react-native link

You've successfully setup NativeBase with your React Native app. Your React Native app is ready to run on iOS and Android devices.

Check out the NativeBase KitchenSink an example of NativeBase components implementation. Here's the source code for NativeBase KitchenSink.

2. Setup with Expo

Expo helps you make React Native apps with no build configuration. It works on macOS, Windows, and Linux.
Refer this link for additional information on Expo

Install NativeBase

yarn add native-base@2 --save

NativeBase use some custom fonts that can be loaded using Font.loadAsync function. Check out the Expo Font documentation.

Install Expo Fonts

expo install expo-font

App.js

import React from 'react';
import { AppLoading } from 'expo';
import { Container, Text } from 'native-base';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isReady: false,
    };
  }

  async componentDidMount() {
    await Font.loadAsync({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
      ...Ionicons.font,
    });
    this.setState({ isReady: true });
  }

  render() {
    if (!this.state.isReady) {
      return <AppLoading />;
    }

    return (
      <Container>
        <Text>Open up App.js to start working on your app!</Text>
      </Container>
    );
  }
}

Check out the KitchenSink with Expo for an example of the implementation.
Find the KitchenSink repo here

3. Setup with Web

npm install -g create-react-app
npx create-react-app nativebase-app
cd nativebase-app
npm i native-base@2 react-art react-native-web --save
npm i react-app-rewired customize-cra @babel/plugin-proposal-class-properties --dev --save

• Replace scripts in package.json

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
}

• Create file config-overrides.js at root of your project

const path = require('path');
const {
  override,
  addWebpackAlias,
  babelInclude,
  addBabelPlugins
} = require('customize-cra');

module.exports = override(
  addWebpackAlias({
    "react-native/Libraries/Renderer/shims/ReactNativePropRegistry": "react-native-web/dist/modules/ReactNativePropRegistry",
    "react-native": "react-native-web"
  }),
  babelInclude([
    path.resolve('src'),
    path.resolve('node_modules/native-base-shoutem-theme'),
    path.resolve('node_modules/react-navigation'),
    path.resolve('node_modules/react-native-easy-grid'),
    path.resolve('node_modules/react-native-drawer'),
    path.resolve('node_modules/react-native-safe-area-view'),
    path.resolve('node_modules/react-native-vector-icons'),
    path.resolve('node_modules/react-native-keyboard-aware-scroll-view'),
    path.resolve('node_modules/react-native-web'),
    path.resolve('node_modules/react-native-tab-view'),
    path.resolve('node_modules/static-container'),
  ]),
  addBabelPlugins(
    "@babel/plugin-proposal-class-properties"
  ),
);

• Include Icons

  Copy font.css to App.css

• Run

npm start

OR

yarn start

Check out the NativeBase KitchenSink with Web support for an example of NativeBase components implementation. Here's the source code for NativeBase KitchenSink.

4. Setup with Vue Native

npm install -g vue-native-cli
vue-native init AwesomeNativeBase               // Initializes crna project
vue-native init AwesomeNativeBase --no-crna     // Initializes react-native project
cd AwesomeNativeBase

Install NativeBase

npm install native-base@2 --save

Register NativeBase components

import Vue from "vue-native-core";
import { VueNativeBase } from "native-base";

// registering all native-base components to the global scope of the Vue
Vue.use(VueNativeBase);

Vue Native components are very similar to React Native components. You can use all the React Native components, by making use of the kebab case (hyphen-delimited) equivalent components. This is because Vue Native is a wrapper around the React Native APIs.

To use NativeBase components with Vue Native, follow the same pattern, kebab case. And prefix NativeBase components with nb-

Run

npm start

You've successfully setup NativeBase with your Vue Native app. Your Vue Native app is ready to run on iOS and Android devices.

Check out Vue Native Docs. Also, NativeBase KitchenSink, an example of NativeBase components implementation with Vue Native, source code is here.