Skip to content
Get packs

Guide · Open source

How to use NativeBase: setup, components and what to use instead

Updated · written with AI from the project's own documentation and checked against our catalogue data

NativeBase is a component library for React Native and React that aims to give Android, iOS and web apps one consistent set of UI components. This guide explains what it includes, what it needs to run, and how to work with it if you already maintain a NativeBase app. Before you start a new project, read the deprecation notice in the next section, because the maintainers now recommend a different library for new work.

NativeBaseGeekyAnts/NativeBase · ★ 20.4k · MIT

Quick start

  1. 1Check the notice. Decide whether NativeBase fits. For new projects, the README recommends gluestack-ui instead.
  2. 2Confirm the prerequisites. Make sure your app is an Expo or React Native CLI project, and check the compatibility table for React Native versions.
  3. 3Install through your package manager. Follow the official installation guide at docs.nativebase.io/installation, since the README does not list install commands.
  4. 4Add the components you need. Pick from the roughly 40 components, starting with Box, Button and Text.
  5. 5Theme and style. Use utility style props and the theme to set your colours, sizes and responsive values.
  6. 6Test on each platform. Run the app on Android, iOS and web, and check the accessibility behaviour on each.

Check the deprecation notice before you start

The NativeBase README now carries a deprecation notice. NativeBase is entering maintenance mode as the maintainers evolve it into gluestack-ui, and the README says that if you are starting a new project with NativeBase, they recommend using gluestack-ui instead.

This guide is most useful if you are maintaining an existing NativeBase app or keeping an existing NativeBase v3 codebase running.

  • New projects: the README recommends gluestack-ui.
  • Existing apps: the README describes the library as in maintenance mode, not as a project with active new feature development.

Confirm your project meets the prerequisites

NativeBase is supported in apps initiated with Expo or the React Native CLI. Web support is made possible by react-native-web. The README lists React Native and Expo as dependencies.

The README's compatibility table maps NativeBase versions to React Native versions, so check that table before you upgrade either library.

  • An Expo or React Native CLI project.
  • React Native and, for web output, react-native-web.
  • The README's compatibility table for matching NativeBase and React Native versions.

Install NativeBase and its setup guide

NativeBase is installed through a package manager. The README does not list install commands, so follow the installation guide on the official documentation site for the exact setup steps for your project type.

The README links to the guides at docs.nativebase.io/installation for setting up NativeBase in a React app.

  • Installation guide: docs.nativebase.io/installation
  • Official website: nativebase.io

Build screens with the component set

NativeBase offers around 40 components, grouped in the README into Layout, Forms, Data Display, Feedback, Typography, Overlay, Disclosure, Media & Icons, Transition and Other. Examples named in the README include button, checkbox, flex and stack.

Layout primitives such as Box are a good starting point. The docs have a per-component page for each one, and the README links a Todo-List example.

  • Layout: Box
  • Forms: Button
  • Data Display: Badge
  • Feedback: Alert
  • Typography: Text
  • Overlay: Alert Dialog
  • Disclosure: Action Sheet
  • Media & Icons: Avatar
  • Transition: Presence Transition
  • Other: FAB

Style with utility props and the theme

NativeBase supports utility style props, powered by Styled System, so you can build custom components with constraint-based props. The README says the library is highly themeable, and that you can customise your app theme and component styles.

The README also says that responsive styles can be set with object and array values, and that NativeBase is optimised for light and dark modes.

  • Utility style props, powered by Styled System.
  • Theme customisation for the app and for individual components.
  • Responsive values given as object or array values.
  • Light and dark mode support.

Use the accessibility features

NativeBase integrates React ARIA and React Native ARIA, which provide React hooks for building accessible components. The README presents this as out-of-the-box accessibility for your design system.

Test your screens with a screen reader on each platform you ship. The README does not describe a testing process, so treat the ARIA integration as a starting point rather than a guarantee.

  • React ARIA and React Native ARIA integration.
  • Hooks for accessible components, as described in the README.

What people use it for

  • Maintaining an existing React Native app that already uses NativeBase.
  • Keeping an existing NativeBase v3 codebase running while planning a migration.
  • Sharing one component set across mobile and web, as the README describes.
  • Exploring the Kitchen Sink demo app to see the components in action.

Frequently asked questions

Is NativeBase deprecated?

The README carries a deprecation notice and says NativeBase is entering maintenance mode as it evolves into gluestack-ui. For new projects, the maintainers recommend gluestack-ui.

Is NativeBase free to use?

NativeBase is released under the MIT licence, as shown in the README. The licence file is linked from the repository.

What do I need to use NativeBase?

The README says NativeBase is supported in Expo or React Native CLI apps, and web support uses react-native-web. Check the compatibility table for matching React Native versions.

How many components does NativeBase have?

The README says the library has nearly or around 40 components, grouped into categories such as Layout, Forms, Feedback and Overlay.

What should I use instead of NativeBase?

The README recommends gluestack-ui for new projects. The source material also lists React Native Paper, Tamagui and React Native Elements as comparable projects, though it does not compare them in detail.

Where do I find the setup steps?

The README points to the installation guide at docs.nativebase.io/installation. The README itself does not contain install commands.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

NativeBase suits teams that already maintain an app on it, or that need to keep a NativeBase v3 codebase working. For new projects, the README recommends gluestack-ui, and projects needing active new feature development should evaluate gluestack-ui, Tamagui, React Native Paper or React Native Elements instead.

Install options & downloads