Getting Started with NativeBase

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 command line tools.

System Requirements

• Globally installed node >= 4.0
• Globally installed npm >= 3.0
• Globally installed rnpm (only if React Native version < 0.29)
• 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.

Create React Native project

react-native init AwesomeNativeBase

This will walk you through creating a new React Native project in /User/localhost/AwesomeNativeBase
Installing react-native package from npm...
Setting up new React Native app in /User/localhost/AwesomeNativeBase
[email protected] /User/localhost/AwesomeNativeBase
└── [email protected]

To run your app on iOS:
   cd /User/localhost/AwesomeNativeBase
   react-native run-ios
   - or -
   Open /User/localhost/AwesomeNativeBase/ios/AwesomeNativeBase.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   Have an Android emulator running (quickest way to get started), or a device connected
   cd /User/localhost/AwesomeNativeBase
   react-native run-android

cd AwesomeNativeBase

Install NativeBase

npm install native-base --save

[email protected] /User/localhost/AwesomeNativeBase
└─┬ [email protected]
  ├── [email protected]
  ├─┬ [email protected]
  │ ├── [email protected]
  │ └─┬ [email protected]
  │   └── [email protected]
  ├── [email protected]
  ├── [email protected]
  ├─┬ [email protected]
  │ └── [email protected]
  ├── [email protected]
  └─┬ [email protected]
    ├── [email protected]
    └─┬ [email protected]
      ├── [email protected]
      ├── [email protected]
      ├── [email protected]
      ├── [email protected]
      ├── [email protected]
      ├── [email protected]
      ├── [email protected]
      ├── [email protected]
      └─┬ [email protected]
        └── [email protected]

You've successfully setup NativeBase with your React Native app. Your React Native app is now all set to run on iOS and Android simulator.

Installing Peer Dependencies

The peer dependencies included from any npm package does not automatically get installed. Your application will need to depend on it explicitly. NativeBase includes React Native Vector Icons as one of its peer dependency. So here we help you with the setup.

iOS

• On Terminal
• React Native < 0.29
  $rnpm link
• React Native >= 0.29
  $react-native link react-native-vector-icons
• Manually
  If you want to use any of the bundled icons, you need to add the icon fonts to your Xcode project. Follow these steps:
• Right click on you project in Xcode and select Add files to "AwesomeNativeBase".
• Browse to node_modules/react-native-vector-icons and select the folder Fonts.
  Make sure your app is checked under "Add to targets" and that "Create groups" is checked if you add the whole folder.
• Edit Info.plist and add a property called Fonts provided by application (or UIAppFonts if Xcode won't autocomplete/not using Xcode) and type in the files you just added.
  This is how it looks:
  
• You need to recompile your project after adding new fonts, also ensure that they also appear under Copy Bundle Resources in Build Phases.

Android

• On Terminal
• React Native < 0.29
  $rnpm link
• React Native >= 0.29
  $react-native link react-native-vector-icons
• With Gradle
• Edit android/app/build.gradle and add the following:
  

  apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

• To customize the files being copied, add the following instead:
  

  project.ext.vectoricons = [
      iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ]             // font filenames
  ]
  
  apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

• Manually
• Copy the contents in the Fonts folder to android/app/src/main/assets/fonts.
• Edit android/settings.gradle and add the following:

  include ':react-native-vector-icons'
  project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

• Edit android/app/build.gradle and add the following:

  dependencies {
      .  .  .
      compile project(':react-native-vector-icons')
  }

• React Native < 0.29
  Edit android/app/src/main/java/com/awesomenativebase/MainActivity.java and add the following:

  package com.awesomenativebase;
  .  .  .
  import com.oblador.vectoricons.VectorIconsPackage;
  .  .  .
  
  public class MainActivity extends ReactActivity {
      .  .  .
      @Override
      protected List<ReactPackage> getPackages() {
          return Arrays.<ReactPackage>asList(
              new MainReactPackage(),
              .  .  .
              new VectorIconsPackage(),
              .  .  .
          );
      }
  }
  

• React Native >= 0.29
  Edit android/app/src/main/java/com/awesomenativebase/MainApplication.java and add the following:

  package com.awesomenativebase;
  .  .  .
  import com.oblador.vectoricons.VectorIconsPackage;
  .  .  .
  
  public class MainApplication extends Application implements ReactApplication {
      .  .  .
      @Override
      protected List<ReactPackage> getPackages() {
          return Arrays.<ReactPackage>asList(
              new MainReactPackage(),
              .  .  .
              new VectorIconsPackage(),
              .  .  .
          );
      }
  }