#
[![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)
## NativeBase is a mobile-first, accessible component library for building a consistent design system across android, iOS & web.
[**Website**](https://nativebase.io/)
[**Documentation**](https://docs.nativebase.io/)
## Table of Contents
1. [Introduction](#1-introduction)
2. [Motivation](#2-motivation)
3. [Features](#3-features)
4. [Dependencies](#4-dependencies)
5. [Installation & Setup](#5-installation)
6. [Components](#6-components)
7. [Examples](#7-examples)
8. [KitchenSink App](#8-kitchensink-app)
9. [Tech Stack](#9-tech-stack)
10. [Compatible Versions](#10-compatible-versions)
11. [Contributors](#11-contributors)
12. [Changelog](#12-changelog)
13. [Community](#13-community)
14. [License](#14-license)
## 1. Introduction?
[NativeBase](https://nativebase.github.io/) is a mobile-first, component library for React & React Native. Version 3.0 ships with complete ARIA integration, support for utility props and nearly 40 components that are consistent across Android, iOS and Web. Fast-track your dev process with NativeBase 3.0.
**Recommended by [Awesome React Native](https://github.com/jondot/awesome-react-native)**
> NativeBase was added to the list of Frameworks of Awesome React Native and it is used by numerous React lovers across the world.
## 2. Motivation
Building with React Native from scratch is a tedious process with multiple steps such as adding styling, interactions, state management, responsiveness, accessibility, etc. We wanted to build and ship accessible, high-quality apps quickly.
Our inspirations include Material UI, Chakra UI, Ant Design, Braid Design System, Bootstrap, TailwindCSS & Flutter.
## 3. Features
### **Out of the Box Accessibility**
Integrated with React ARIA and React Native ARIA, which provides React hooks. This enables you to build accessible design systems in no time.
### **Supporting Utility Props**
Powered by [Styled System](https://styled-system.com) so you can rapidly build custom UI components with constraint-based utility style props.
### **Rich Component Library**
NativeBase offers around 40 components so you can build seamlessly. It includes button, checkbox, flex, stack and more.
### **Highly Themeable**
Themeability is one of the core elements of NativeBase. You can customise your app theme and component styles to your heart's content.
### **Available for Both Mobile and Web**
NativeBase 3.0 is powered by React Native Web so you can build consistent UIs across Web, Android and iOS.
### **Responsiveness Made Easy**
Instead of manually adding responsiveness, NativeBase 3.0 allows you to provide object and array values to add responsive styles.
### **Now with** **Dark Mode**
Building apps with a dark mode setting just got a whole lot easier. NativeBase is now optimised for light and dark modes.
## 4. Dependencies
React Native, Expo
## 5. Installation
NativeBase is supported in Expo or React Native CLI initiated apps. Web support is made possible by react-native-web.
Refer the [guides](https://alpha-docs.nativebase.io/installation) to setup NativeBase in your React app.
## 6. Components
NativeBase 3.0 is a rich component library with nearly 40 components.
- [**Layout**](https://docs.nativebase.io/box)
- [**Forms**](https://docs.nativebase.io/button)
- [**Data Display**](https://docs.nativebase.io/badge)
- [**Feedback**](https://docs.nativebase.io/alert)
- [**Typography**](https://docs.nativebase.io/text)
- [**Overlay** ](https://docs.nativebase.io/alertDialog)
- [**Disclosure**](https://docs.nativebase.io/actionSheet)
- [**Media & Icons**](https://docs.nativebase.io/avatar)
- [**Transition**](https://docs.nativebase.io/presence-transition)
- [**Other**](https://docs.nativebase.io/FAB)
## 7. Examples
[Check out the Login Screen example](https://docs.nativebase.io/todo-example)
## 8. KitchenSink App
Kitchen Sink is a comprehensive demo app showcasing all the NativeBase components in action. It includes buttons, forms, icons, etc.