# <img width="25px" src="https://github.com/nativebase/nativebase.github.io/blob/master/img/native-base-icon.png" alt="Nativebase Logo"> NativeBase 3.0 [![Financial Contributors on Open Collective](https://opencollective.com/NativeBase/all/badge.svg?label=financial+contributors)](https://opencollective.com/NativeBase) [![](http://slack.nativebase.io/badge.svg)](http://slack.nativebase.io/) [![Build Status](https://travis-ci.org/GeekyAnts/NativeBase.svg?branch=master)](https://travis-ci.org/GeekyAnts/NativeBase) [![npm version](https://badge.fury.io/js/native-base.svg)](https://badge.fury.io/js/native-base) [![npm downloads](https://img.shields.io/npm/dt/native-base.svg)](https://npm-stat.com/charts.html?package=native-base&from=2016-04-01&to=2018-02-17)

A complete component library for React Native Ecosystem

- **Accessible** : Maximise app usage with our accessible design.
- **Responsive** : Create responsive apps with ease from the get-go.
- **Themeable** : Customise your app theme and component styles.
- **Consistent** : Make accurate predictions for web, Android & iOS.

## Documentation
You can find the complete documentation [here](https://nativebase.github.io/).

## Table of Content

1. [What is NativeBase 3.0?](#1-what-is-nativebase-30)
2. [Why NativeBase 3.0?](#2-why-nativebase-30)
3. [KitchenSink App](https://github.com/GeekyAnts/NativeBase-KitchenSink)
4. [Compairing available options](#4-compairing-the-available-options)
5. [Inspirations](#5-inspirations)
6. [API](#6-api)
7. [Getting Started](#7-getting-started)
8. [Components](#8-components)
9. [Documentation](#9-documentation)
10. [Website](#10-website)
11. [Quick Links to NativeBase](#11-quick-links-to-nativebase)
12. [About the creators](#12-about-the-creators)

## 1. What is NativeBase 3.0?
[NativeBase](https://nativebase.github.io/) is a universal Design System for Mobile & Web built for React Native and React with the same API. Ships a bunch of components for most of the use-cases that includes Button, AppBar, Dialog, Modal and what not.

## 2. Why NativeBase 3.0?
We want to build and ship apps fast with the highest quality. We want to focus on the business logic and to solve real problems.<br />

## 4. Compairing the available options

| Name                | Web | Mobile  | Design System | Customizable | Components               | Language   | Docs      | Popularity |
| ------------------- | --- | ------- | ------------- | ------------ | ------------------------ | ---------- | --------- | ---------- |
| Ant Design          | Yes | Partial | Yes           | Low          | Many                     | JavaScript | Very good |            |
| Braid Design System | Yes | No      | Yes           | Medium       | Many                     | JavaScript | Good      |            |
| Bootstrap           | Yes | No      | Yes           | Medium       | Limited                  | CSS        | Very good |            |
| TailwindCSS         | Yes | Partial | Yes           | High         | Rich \(with TailwindUI\) | CSS        | Very good |            |
| Flutter Material    | Yes | Yes     | Yes           | High         | Many                     | Dart       | Average   |            |
| NativeBase 3\.0     | Yes | Yes     | Yes           | High         | Rich                     | JavaScript | Very good |            |

## 5. Inspirations

Ant Design, Braid Design System, Bootstrap, TailwindCSS, Flutter Material

## 6. API

Declarative and Imperative. Declarative for components and Imperative for all the actions

## 7. Getting Started

To have `NativeBase` components running onto your native apps, all you need to do is, create a fresh React Native project using whatever you want, [expo](https://docs.expo.io/get-started/installation/) is a really great starting point so we will start with that and install the NativeBase using `npm` or `yarn` and add all the peer dependencies.

## Setup with React Native

```bash
react-native init AwesomeNativeBase
cd AwesomeNativeBase
```

*Install **NativeBase***

```bash
# using yarn
yarn add native-base@next
```

```bash
# using npm
npm i native-base@next
```

*Install **Peer Dependencies***

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

```bash
react-native link
```

You've successfully setup [NativeBase](https://nativebase.io/) with your [React Native](https://reactnative.dev/) app. Your React Native app is ready to run on iOS and Android devices.

## 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](https://docs.expo.io/) and setting up an Expo starter app.

*Install **NativeBase***

```bash
# using yarn
yarn add native-base@next
```

```bash
# using npm
npm i native-base@next
```

**We will also have to install these peer dependencies**

*Install **react-native-svg***

```bash
# using yarn
yarn add react-native-svg
```

```bash
# using npm
npm i react-native-svg
```

*Install **react-native-vector-icons***

```bash
# using yarn
yarn add react-native-vector-icons
```

```bash
# using npm
npm i react-native-vector-icons
```

*Install **styled-components***

```bash
# using yarn
yarn add styled-components
```

```bash
# using npm
npm i styled-components
```

*Install **styled-system***

```bash
# using yarn
yarn add styled-system
```

```bash
# using npm
npm i styled-system
```

## 8. Components

[NativeBase 3.0](https://nativebase.github.io/) is made from two types of components — Primitives and Composite.

- **Primitive components** are the building blocks.
- **Composite components** are made up of primitive components.


## 9. Documentation

Go through [NativeBase Docs](https://nativebase.github.io/) to play with [NativeBase](https://nativebase.github.io/).



## 10. Website
[https://nativebase.github.io/](https://nativebase.github.io/)



## 11. Quick Links to NativeBase

*	[NativeBase Documentation](https://nativebase.github.io/docs/nativebase)
*	[NativeBase on Twitter](https://twitter.com/NativeBaseIO)
*	[NativeBase on FaceBook](https://www.facebook.com/nativebaseio/)


## 12. About the creators

We are [GeekyAnts](https://geekyants.com/), a startup based in Bangalore, India with 200+ developers in strength. We have been very active in the React / React Native community where we have developed [StrapUI](https://www.strapui.com/) and [StartReact](https://startreact.com/). Our other products include [StartLaravel](http://startlaravel.com) and [StartAngular](http://startangular.com).

Another major project by us is [BuilderX](https://builderx.io/?utm_source=github&utm_medium=nativebase&utm_campaign=nativebase), a screen design tool which codes React Native for you.

## Contributors

### Code Contributors

This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
<a href="https://github.com/GeekyAnts/NativeBase/graphs/contributors"><img src="https://opencollective.com/NativeBase/contributors.svg?width=890&button=false" /></a>

### Financial Contributors

Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/NativeBase/contribute)]

#### Individuals

<a href="https://opencollective.com/NativeBase"><img src="https://opencollective.com/NativeBase/individuals.svg?width=890"></a>

#### Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/NativeBase/contribute)]

<a href="https://opencollective.com/NativeBase/organization/0/website"><img src="https://opencollective.com/NativeBase/organization/0/avatar.svg"></a>
<a href="https://opencollective.com/NativeBase/organization/1/website"><img src="https://opencollective.com/NativeBase/organization/1/avatar.svg"></a>
<a href="https://opencollective.com/NativeBase/organization/2/website"><img src="https://opencollective.com/NativeBase/organization/2/avatar.svg"></a>
<a href="https://opencollective.com/NativeBase/organization/3/website"><img src="https://opencollective.com/NativeBase/organization/3/avatar.svg"></a>
<a href="https://opencollective.com/NativeBase/organization/4/website"><img src="https://opencollective.com/NativeBase/organization/4/avatar.svg"></a>
<a href="https://opencollective.com/NativeBase/organization/5/website"><img src="https://opencollective.com/NativeBase/organization/5/avatar.svg"></a>
<a href="https://opencollective.com/NativeBase/organization/6/website"><img src="https://opencollective.com/NativeBase/organization/6/avatar.svg"></a>
<a href="https://opencollective.com/NativeBase/organization/7/website"><img src="https://opencollective.com/NativeBase/organization/7/avatar.svg"></a>
<a href="https://opencollective.com/NativeBase/organization/8/website"><img src="https://opencollective.com/NativeBase/organization/8/avatar.svg"></a>
<a href="https://opencollective.com/NativeBase/organization/9/website"><img src="https://opencollective.com/NativeBase/organization/9/avatar.svg"></a>