native-base-transpiled
Version:
NativeBase ES2015 transpilation proof of concept
175 lines (88 loc) • 9.18 kB
Markdown
Essential cross-platform UI components for React Native
NativeBase is a sleek, ingenious and dynamic front-end framework created by passionate React Loving team at [Geekyants.com](http://geekyants.com/) to build cross platform Android & iOS mobile apps using ready to use generic components of React Native.
1. [What is NativeBase?](
2. [Why NativeBase?](
3. [Magic of NativeBase](
4. [Getting Started](
5. [Components](
6. [Native Starter Kit](
7. [Featured Apps](
- [Native Starter Pro](
- [Ecommerce Starter](
- [Flat App Theme](
- [Taxi App with Backend](
- [Dating App Theme](
8. [Documentation](
9. [Website](
10. [Quick Links to NativeBase](
11. [About the creators](
[](http://nativebase.io/) is a free and open source framework that enables developers to build high-quality mobile apps using [React Native](https://github.com/facebook/react-native) iOS and Android apps with a fusion of [ES6](http://es6-features.org/#Constants). NativeBase builds a layer on top of React Native that provides you with basic set of components for mobile application development. This helps you to build world-class application experiences on native platforms. [Read More. . .](http://nativebase.io/documentation)
What is really great with [NativeBase](http://nativebase.io/) 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. You do not need to use wrappers or do any other actions. The new additions to the native platform are available immediately. NativeBase provides amazing support for adding components, so that you will by no means hit a lifeless stop.
**Recommended by** 
> 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](https://github.com/Microsoft/react-native-code-push#example-apps--starters)
**Recommended by [Awesome React Native](https://github.com/jondot/awesome-react-native)**
>NativeBase added into the list of [Frameworks](https://github.com/jondot/awesome-react-native#frameworks) of Awesome React Native and are also used by many other React lovers across the world.
Do you still have a question **Why NativeBase**?
If yes then go ahead and watch this magic.
<center>[](http://nativebase.io/docs/v0.2.1/assets/img/magic-with-nativebase-020.mp4)</center>
<i>Click to watch the magic</i>
**System Requirements**
* Globally installed [node](https://nodejs.org/en/) >= 4.0
* Globally installed [npm](https://www.npmjs.org/) >= 3.0
* Globally installed [rnpm](https://github.com/rnpm/rnpm) *(only if React Native version < 0.29)*
* Globally installed [react-native CLI](https://facebook.github.io/react-native/docs/getting-started.html)
**Installation**
To have NativeBase components running onto your native apps, all you need to do is create a fresh [React Native](https://github.com/facebook/react-native) project and install the [NativeBase](http://nativebase.io/) command line tools.
```
react-native init AwesomeNativeBase
cd AwesomeNativeBase
npm install
```
Include NativeBase into your React Native project.
```
npm install native-base --save
```
Now you are ready to get going with NativeBase. [Read More. . .](http://nativebase.io/documentation)
[](http://nativebase.io/) is made from effective building blocks referred to as components. The Components are constructed in pure [React Native](https://github.com/facebook/react-native) platform along with some JavaScript functionality with rich set of customisable properties. These components allow you to quickly build the perfect interface.
The most awaited feature, **platform precise components** with single codebase is now available from the version 0.5.0 of NativeBase. Along with this, there comes in addition of set of **Fonts** to be readily integrated with your apps. [Read More. . .](http://nativebase.io/documentation)
A simple starter project for [React Native](https://github.com/facebook/react-native) + [NativeBase](http://nativebase.io/) + [Redux](http://redux.js.org/) + [CodePush](https://github.com/Microsoft/react-native-code-push) + [React Native Navigator](https://facebook.github.io/react-native/docs/navigator.html) apps on iOS and Android.
No need of reinventing the wheel. To have immediately something to continue building on, it would be best to start from some starter kit for getting React Native - based applications off the ground in a hurry.
[](https://github.com/start-react/native-starter-kit#screens)
Having tried with the free version, [Native Starter Kit](https://github.com/start-react/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.
Based on [React Native](https://facebook.github.io/react-native/) and [NativeBase](http://nativebase.io/docs/v0.5.7/), Native Starter Pro, Ecommerce Starter, Flat App Theme are beautifully designed with fusion of [Redux](https://github.com/reactjs/react-redux) and [ES6](http://es6-features.org/#Constants), responsive iOS and Android app source code to quickly get started on your next project.
[](https://strapmobile.com/native-starter-pro/) is a bold and flexible [React Native](https://facebook.github.io/react-native/) theme best suited for developing high-quality mobile apps that makes use of ready-made tools. The theme has several widget areas that allows you to extend your theme functionality with plugins. Native Starter Pro is built using [Redux](https://github.com/reactjs/react-redux) and is performance optimized which helps you to develop world-class application experiences on native platforms. [Read More. . .](http://strapmobile.com/docs/native-starter-pro/v5.0.0)
[](https://strapmobile.com/react-native-e-commerce-starter/), a perfect starter kit for e-commerce apps. Readily available pages along with rich collection of UI elements. [Read More. . .](http://strapmobile.com/docs/react-native-ecommerce-starter/v5.0.0)
[](https://strapmobile.com/react-native-flat-app-theme/) is basically a style of interface design emphasizing minimum use of stylistic elements, typography and flat colors. [Read More. . .](http://strapmobile.com/docs/react-native-flat-app-theme/v4.0.0)
[](https://strapmobile.com/react-native-uber-like-app-backend/)
The ideal starter app with all the needed UI elements and Backend Integration to build your iOS and Android Taxi app like Uber / Ola / Lyft.
* [Front End](https://strapmobile.com/docs/react-native-taxi-app-theme/v4.0.0)
* [Back End](https://strapmobile.com/docs/react-native-uber-like-app-backend/v4.0.0/)
[](https://strapmobile.com/react-native-dating-app-theme/) is a well structured iOS and Android, having fully customizable pages along-with a rich collection of UI elements specifically for an ideal dating app to help you quickly get started on your next project. [Read More. . .](https://strapmobile.com/docs/react-native-dating-app-theme/v1.0.0/)
Go through [NativeBase Docs](http://nativebase.io/documentation) to play with NativeBase.
[](http://nativebase.io/)
* [NativeBase Documentation](http://nativebase.io/documentation)
* [NativeBase Blog](https://medium.com/nativebase-io-blog)
* [NativeBase on Twitter](https://twitter.com/NativeBaseIO)
* [NativeBase on FaceBook](https://www.facebook.com/nativebaseio/)
We are [GeekyAnts](http://geekyants.com/), 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 [Strapmobile](https://strapmobile.com/), [StrapUI](https://www.strapui.com/) and [StartReact](http://startreact.com/). Our other products include [StartLaravel](http://startlaravel.com/) and [StartAngular](http://startangular.com/).