Getting Started | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
Getting Started
NativeBase is a component library that enables devs to build universal design systems. It is built on top of React Native, allowing you to develop apps for Android, iOS and the Web.

IMPORTANT MESSAGE — If you are starting a new project with NativeBase, we recommend using gluestack-ui instead. However, if you are already working on a NativeBase project, we recommend using @gluestack-ui/themed-native-base instead. Know More.
A Brief History of NativeBase
NativeBase v1.x : NativeBase started out as an open source framework that enabled developers to build high-quality mobile apps using React Native. The first version included UITabBar on iOS and Drawer on Android. NativeBase v1 was very well-received by the dev community.
NativeBase v2.x : The second version was released with new components, preset themes, unified icons & more. The main focus of v2 was to make components easy to theme with very few modifications. From v2.4.1 onwards, NativeBase also included support for the web.
NativeBase v3.x : We wanted to make NativeBase the go-to component library for anyone building with React Native and Web. This version is accessible, highly customizable and consistent across android, iOS & web. That's not all though, read on for the full benefits of using v3.
gluestack-ui : With the introduction of gluestack-ui, we aim to address the performance and maintainability issues of NativeBase v3. By splitting the library into three parts and focusing on a universal, headless, and independent set of components, gluestack-ui now offers better performance and easier maintenance.
Idea behind NativeBase
We had clear goals in mind while building version 3. Take a look at some of the new features we added:
Multiplatform : NativeBase supports multiple platforms; android, iOS and web. You can also customise properties using platform-specific props.
Inherently Beautiful : NativeBase ships with a default theme that provides beautiful components, out of the box.
Accessible : This version has out of the box accessibility including focus management, keyboard navigation and more.
Customisable : The default theme can be extended as you desire. You can also customise specific components for your app needs.
What’s new with gluestack-ui?
Improved Performance : gluestack-ui helps in enhancing the performance of NativeBase by offering a universal and performant styling library, dank.style, which is highly optimized with a babel-plugin.
Headless and Independent Components : gluestack-ui provides a set of headless and independent components, similar to radix-ui, that can be styled in the user’s project as needed.
Easier Maintenance : By simplifying the styling engine and component library, gluestack-ui makes it easier to maintain and contribute to the library.
Universal Support : gluestack-ui is designed to be compatible with React and React Native, covering platforms such as Next.js and Expo.
Future-proof : With the backing of GeekyAnts and its long-term support commitment, you can trust that gluestack-ui will continue to evolve and receive updates to stay compatible with the latest versions of React and React Native.
Nativebase logo
MadeWithNativeBase