https://github.com/GeekyAnts/NativeBase
Tip revision: dcdcc20b5e6c4e1f8fc5cf4c83e3bc3f961c0e79 authored by Nishan Bende on 07 April 2021, 10:06:54 UTC
feat: add hover and pressed in pressable
feat: add hover and pressed in pressable
Tip revision: dcdcc20
README.md
# <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>