NativeBase 0,8,20,0,17,12,15,0 npm

Essential cross-platform UI components for React Native

NativeBase Build Status npm version

NPM

NPM

Essential cross-platform UI components for React Native

Updated docs here!

Demo Demo

Table of Content

  1. What is NativeBase?
  2. Why NativeBase?
  3. KitchenSink App
  4. Getting Started
  5. Components
  6. Native Starter Kit
  7. Featured Apps
  8. Documentation
  9. Website
  10. Quick Links to NativeBase
  11. About the creators

1. What is NativeBase?

NativeBase is a sleek, ingenious and dynamic front-end framework created by passionate React Loving team at Geekyants.com to build cross platform Android & iOS mobile apps using ready to use generic components of React Native.

2. Why NativeBase?

What is really great with NativeBase is that you can use shared UI cross-platform components, which will drastically increase your productivity. When using NativeBase, you can use any native third-party libraries out of the box.

Recommended by Microsoft > If you’re looking to get started with React Native + CodePush, and are looking for an awesome starter kit, you should check out Native Starter Pro - Microsoft’s react-native-code-push repo

Recommended by Awesome React Native >NativeBase added into the list of Frameworks of Awesome React Native and are also used by many other React lovers across the world.

4. Getting Started

Install NativeBase

npm install native-base --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 now all set to run on iOS and Android simulator.

Setup with CRNA

Create React Native project using the CRNA cli.
CRNA helps you make React Native apps with no build configuration. Create React App works on macOS, Windows, and Linux.
Refer to this link for additional information CRNA

Install NativeBase

npm install native-base --save

Install @expo/vector-icons

npm install @expo/vector-icons --save


Note
NativeBase uses some custom fonts that can be loaded using loadAsync function. Check out this expo link.
Synatx

async componentWillMount() {
      await Expo.Font.loadAsync({
        'Roboto': require('native-base/Fonts/Roboto.ttf'),
        'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
      });


Check out the KitchenSink with CRNA for an example of the implementation.

5. Components

NativeBase is made from effective building blocks referred to as components. The Components are constructed in pure React Native platform along with some JavaScript functionality with rich set of customisable properties. These components allow you to quickly build the perfect interface.

6. Native Starter Kit

A simple starter project for React Native + NativeBase + Redux + CodePush + React Native Navigator apps on iOS and Android. Take a look at the demo

7. NativeBase Market

Having tried with the free version, Native Starter Kit and appreciate our product?

Get on the mobile fast track with the featured apps of NativeBase, to build high-quality iOS and Android mobile apps.
A marketplace for premium React Native app themes to build high-quality iOS and Android mobile apps.

8. Documentation

Go through NativeBase Docs to play with NativeBase.

9. Website

https://nativebase.io/

10. Quick Links to NativeBase

11. About the creators

We are GeekyAnts, a startup based in Bangalore, India with 50+ developers in strength. We have been very active in the React / React Native community where we have developed StrapUI and StartReact. Our other products include StartLaravel and StartAngular.

Related Repositories

NativeBase

NativeBase

Essential cross-platform UI components for React Native ...

native-starter-kit

native-starter-kit

React Native Starter App with NativeBase + CodePush + Redux ...

NativeBase-KitchenSink

NativeBase-KitchenSink

An example app with all the UI components of NativeBase ...

nativebase-tutorial

nativebase-tutorial

Sample App using NativeBase ...

react-native-native-base-seed

react-native-native-base-seed

React Native Seed Project with NativeBase, Redux, CodePush, Router, Push Notification and other basic must-have libraries ...


Top Contributors

sankhadeeproy007 SupriyaKalghatgi himanshu-sahusoft aaray sanketsahusoft p0wl brianjd andersr josephdburdick chaitanya0bhagvan radarhere Chion82 gor181 th3no0b pwoltman shishircc

Dependencies

package version
blueimp-md5 ^2.5.0
clamp ^1.0.1
color ~1.0.3
fs-extra ^2.0.0
lodash ~4.11.1
native-base-shoutem-theme 0.2.1
print-message ^2.1.0
prop-types ^15.5.10
react-native-drawer https://github.com/GeekyAnts/react-native-drawer
react-native-easy-grid 0.1.15
react-native-keyboard-aware-scroll-view https://github.com/GeekyAnts/react-native-keyboard
react-native-vector-icons ~4.1.1
react-tween-state ^0.1.5
tween-functions ^1.0.1
dev babel-cli ^6.18.0
babel-eslint ^6.1.2
babel-jest ^16.0.0
babel-preset-react-native ^1.9.0
eslint ^3.5.0
eslint-config-airbnb ^11.1.0
eslint-plugin-import ^1.14.0
eslint-plugin-jsx-a11y ^2.2.1
eslint-plugin-react ^6.2.0
eslint-plugin-react-native ^2.0.0
flow-bin 0.40.0
jest 17.0.0
react ^16.0.0-alpha.3
react-native ^0.46.0
react-native-vector-icons ~4.1.1
react-test-renderer ^15.3.2
peer react >=16.0.0-alpha.3
react-native >=0.46.0
react-native-vector-icons ~4.1.1

Releases

-   v0.5.8 zip tar
-   v0.5.7 zip tar
-   v0.5.6 zip tar
-   v0.5.5 zip tar
-   v0.5.4 zip tar
-   v0.5.3 zip tar
-   v0.5.2 zip tar
-   v0.5.1 zip tar
-   v0.5.0 zip tar
-   v0.4.9 zip tar
-   v0.4.8 zip tar
-   v0.4.7 zip tar
-   v0.4.6 zip tar
-   v0.4.5 zip tar
-   v0.4.4 zip tar
-   v0.4.3 zip tar
-   v0.4.2 zip tar
-   v0.4.0 zip tar
-   v0.3.2 zip tar
-   v0.3.1 zip tar
-   v0.3.0 zip tar
-   v0.2.2 zip tar
-   v0.2.1 zip tar
-   v0.2.0 zip tar
-   v0.1.1 zip tar