# native-base > Essential cross-platform UI components for React Native Latest version **3.4.28** (published 2023-03-06) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install native-base pnpm add native-base yarn add native-base bun add native-base ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 3.4.28 | | Published | 2023-03-06 | | First published | 2016-04-19 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 35 | | Unpacked size | 8.2 MB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 20374 | | Maintainers | surajahmedc, geekyants-admin, sanketsahu, sarika_geekyants, faizahmed, kumarpratik, himanshu-geek, atulrpandey, khalidimam1201, gauravp, gauravprwl14, himanshu-bx, akarsh8, himanshu-sahusoft, sankhadeeproy007, shivrajk | | Keywords | android, ios, react, native, react-native, native-modules, react-component, navbar, packager | ## Links - npm: https://www.npmjs.com/package/native-base - Repository: https://github.com/GeekyAnts/NativeBase - Homepage: https://github.com/GeekyAnts/NativeBase#readme - npm.io page: https://npm.io/package/native-base ## Dependencies (35) - [lodash.get](https://npm.io/package/lodash.get.md) ^4.4.2 - [lodash.has](https://npm.io/package/lodash.has.md) ^4.5.2 - [tinycolor2](https://npm.io/package/tinycolor2.md) ^1.4.2 - [lodash.omit](https://npm.io/package/lodash.omit.md) ^4.5.0 - [lodash.pick](https://npm.io/package/lodash.pick.md) ^4.4.0 - [stable-hash](https://npm.io/package/stable-hash.md) ^0.0.2 - [lodash.isnil](https://npm.io/package/lodash.isnil.md) ^4.0.0 - [lodash.merge](https://npm.io/package/lodash.merge.md) ^4.6.2 - [lodash.omitby](https://npm.io/package/lodash.omitby.md) ^4.6.0 - [lodash.isempty](https://npm.io/package/lodash.isempty.md) ^4.4.0 - [lodash.isequal](https://npm.io/package/lodash.isequal.md) ^4.5.0 - [lodash.uniqueid](https://npm.io/package/lodash.uniqueid.md) ^4.0.1 - [lodash.clonedeep](https://npm.io/package/lodash.clonedeep.md) ^4.5.0 - [lodash.mergewith](https://npm.io/package/lodash.mergewith.md) ^4.6.2 - [@react-stately/tabs](https://npm.io/package/@react-stately/tabs.md) 3.0.0-alpha.1 - [@react-stately/radio](https://npm.io/package/@react-stately/radio.md) 3.2.1 - [@react-stately/slider](https://npm.io/package/@react-stately/slider.md) 3.0.1 - [@react-stately/toggle](https://npm.io/package/@react-stately/toggle.md) 3.2.1 - [inline-style-prefixer](https://npm.io/package/inline-style-prefixer.md) ^6.0.1 - [@react-native-aria/tabs](https://npm.io/package/@react-native-aria/tabs.md) ^0.2.7 - [@react-stately/checkbox](https://npm.io/package/@react-stately/checkbox.md) 3.0.3 - [@react-stately/combobox](https://npm.io/package/@react-stately/combobox.md) 3.0.0-alpha.1 - [use-sync-external-store](https://npm.io/package/use-sync-external-store.md) ^1.2.0 - [@react-native-aria/focus](https://npm.io/package/@react-native-aria/focus.md) ^0.2.6 - [@react-native-aria/radio](https://npm.io/package/@react-native-aria/radio.md) ^0.2.4 - [@react-native-aria/utils](https://npm.io/package/@react-native-aria/utils.md) ^0.2.8 - [@react-native-aria/button](https://npm.io/package/@react-native-aria/button.md) ^0.2.4 - [@react-native-aria/slider](https://npm.io/package/@react-native-aria/slider.md) ^0.2.5-alpha.1 - [@react-native-aria/listbox](https://npm.io/package/@react-native-aria/listbox.md) ^0.2.4-alpha.3 - [@react-stately/collections](https://npm.io/package/@react-stately/collections.md) 3.3.0 - [@react-aria/visually-hidden](https://npm.io/package/@react-aria/visually-hidden.md) ^3.2.1 - [@react-native-aria/checkbox](https://npm.io/package/@react-native-aria/checkbox.md) ^0.2.3 - [@react-native-aria/combobox](https://npm.io/package/@react-native-aria/combobox.md) ^0.2.4-alpha.0 - [@react-native-aria/overlays](https://npm.io/package/@react-native-aria/overlays.md) ^0.3.3 - [@react-native-aria/interactions](https://npm.io/package/@react-native-aria/interactions.md) ^0.2.2 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 3.4.28 (latest) — 2023-03-06 - 3.4.27-rc.0 (next) — 2023-03-06 - 3.4.26-alpha.1 (alpha) — 2022-12-06 - 3.4.27 — 2023-03-06 - 3.4.26 — 2023-02-27 - 3.4.26-rc.3 — 2023-02-27 - 3.4.26-rc.2 — 2022-12-08 - 3.4.26-rc.1 — 2022-12-07 - 3.4.26-rc.0 — 2022-12-07 - 3.4.26-alpha.0 — 2022-12-05 - 3.4.25 — 2022-12-05 - 3.4.24 — 2022-12-05 - 3.4.24-alpha.0 — 2022-12-01 - 3.4.23 — 2022-11-28 - 3.4.23-rc.0 — 2022-11-18 - … 363 more at https://npm.io/package/native-base/versions ## README # Nativebase Logo [![Financial Contributors on Open Collective](https://opencollective.com/NativeBase/all/badge.svg?label=financial+contributors)](https://opencollective.com/NativeBase) [![](https://img.shields.io/discord/785491682719301643?label=Discord&logo=discord&logoColor=%237289DA)](https://discord.com/invite/TSgCw2UPmb) [![npm next package](https://img.shields.io/npm/v/native-base/next.svg)](https://www.npmjs.com/package/native-base) [![npm latest package](https://img.shields.io/npm/v/native-base/latest.svg)](https://www.npmjs.com/package/native-base) [![npm downloads](https://img.shields.io/npm/dm/native-base.svg)](https://npm-stat.com/charts.html?package=native-base) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/GeekyAnts/NativeBase/blob/master/LICENSE) [![Follow on Twitter](https://img.shields.io/twitter/follow/nativebase.svg?label=follow+NativeBase)](https://twitter.com/nativebase) [![Github Stars](https://img.shields.io/github/stars/GeekyAnts/NativeBase)](https://img.shields.io/github/stars/GeekyAnts/NativeBase) ## 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.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. Out of the box accessibility ### **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. Nativebase Logo ### **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://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/alert-dialog) - [**Disclosure**](https://docs.nativebase.io/action-sheet) - [**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 Todo-List example](https://docs.nativebase.io/todo-list) ## 8. KitchenSink App [Kitchen Sink](https://kitchensink.nativebase.io/) is a comprehensive demo app showcasing all the NativeBase components in action. It includes buttons, forms, icons, etc.
Kitchensink App gif Kitchensink App QR code
## 9. Tech Stack JavaScript, React Native, Styled System ### Made with :heart: at [GeekyAnts](https://geekyants.com/?utm_source=nb-github&utm_medium=landing+page&utm_campaign=nativebase-github-cta) NativeBase is an open-source project made by the tech-savvy geeks at GeekyAnts. GeekyAnts is a group of React Native experts. Do [get in touch with us](https://geekyants.com/hire/?utm_source=nb-github&utm_medium=landing+page&utm_campaign=nativebase-github-hire-cta) for any help with your React Native project. Always happy to help! ## 10. Compatible Versions | NativeBase | React Native | | -------------------------------- | ---------------------------------------------------------- | | v0.1.1 | v0.22 to v0.23 | | v0.2.0 to v0.3.1 | v0.24 to v0.25 | | v0.4.6 to v0.4.9 | v0.26.0 - v0.27.1 | | v0.5.0 to v0.5.15 | v0.26.0 - v0.37.0 | | v0.5.16 to v0.5.20 | v0.38.0 - v0.39.0 | | v2.0.0-alpha1 to v2.1.3 | v0.38.0 to v0.43.0 | | v2.1.4 to v2.1.5 | v0.44.0 to v0.45.0 | | v2.2.0 | v0.44.0 to v0.45.0 | | v2.2.1 | v0.46.0 and above | | v2.3.0 to 2.6.1 | v0.46.0 and above (does not support React 16.0.0-alpha.13) | | v2.7.0 | v0.56.0 and above | | v3.0.0-next.36 to v3.0.0-next-41 | v0.63.0 and above | | v3.0.0 to latest | v0.63.0 and above | ## 11. Contributors ### Code Contributors This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)]. ### Financial Contributors Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/NativeBase/contribute)] #### Individuals #### 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)] ## 12. Changelog [Check out the changelog in the official documentation](https://docs.nativebase.io/changelog) ## 13. Community - [Facebook](https://www.facebook.com/nativebaseio) - [Twitter](https://twitter.com/nativebase) - [Discord](https://discord.com/invite/TSgCw2UPmb) - [Stackoverflow](https://stackoverflow.com/questions/tagged/native-base) - [Blog](https://nativebase.io/blogs) - [YouTube](https://www.youtube.com/channel/UCoL_iTwpY07vDs91974z3xA/about) ## 14. License Licensed under the MIT License, Copyright © 2021 GeekyAnts. See [LICENSE](https://github.com/GeekyAnts/NativeBase/blob/master/LICENSE) for more information. --- _Source: https://npm.io/package/native-base · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._