Skip to content
Get packs

Guide · Open source

How to use react-native-elements: install and build your first screen

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

React Native Elements is an open-source toolkit of pre-built user interface components, such as buttons, for apps written with React Native. This guide is for developers who already write React and JavaScript and want ready-made controls for iOS and Android apps. By the end you will know which packages to install, how to render a first component, and where to look for more examples.

React Native Elementsreact-native-elements/react-native-elements · ★ 25.9k · MIT

Quick start

  1. 1Check prerequisites. Confirm Node.js is installed and that you have a React Native project set up.
  2. 2Install the packages. Run npm install @rneui/themed @rneui/base in your project folder.
  3. 3Import a component. Import Button from @rneui/base in the file where you want it.
  4. 4Render the component. Add <Button title="Hello World!" /> inside your component and run the app.
  5. 5Read the docs. Follow the installation and documentation links on reactnativeelements.com for setup details.
  6. 6Check the Expo demo. Open the official Expo demo app to see how the components are used.

What you need before you install React Native Elements

React Native Elements is a developer library, so you need to be comfortable writing React code. The README lists Node.js and an existing React Native project as prerequisites, and points to the linked installation docs for setup details.

  • Node.js installed on your machine
  • A React Native project already set up
  • Basic familiarity with React components and JavaScript or TypeScript

Install the core packages with npm

The README's install command adds two packages: @rneui/themed and @rneui/base. Run it from your React Native project folder. For full installation instructions, the README links to the official docs at reactnativeelements.com/docs/installation.

  • @rneui/base contains the base components
  • @rneui/themed is the package listed alongside it in the README's package table
npm install @rneui/themed @rneui/base

Render your first component

The README's Quick Start imports Button from @rneui/base and renders it with a title. Paste this into a component in your app to confirm the install works. You can also try the same code on Snack, which the README links to.

import { Button } from '@rneui/base'; const App = () => <Button title="Hello World!" />;

Use React Native Elements on the web

The README says RNE components can be shared with a React web app by combining React Native Elements with React Native for Web. This lets one codebase target iOS, Android and Web.

The README links to a separate walkthrough for the React Native Elements and React Native Web setup, so follow that guide for the web configuration.

Explore the Expo demo app and the documentation

The official React Native Elements App on Expo uses all of the library's components, so it is a useful reference for how each one is used. The full documentation lives at reactnativeelements.com/docs.

If you want to run the example app from the repository locally, the README gives the command yarn example:start. A VS Code extension is also available to speed up development.

  • Expo demo: expo.dev/@rneui/react-native-elements
  • Full docs: reactnativeelements.com/docs
  • VS Code extension: React Native Elements Snippets
yarn example:start

What people use it for

  • Building the screens of an iOS and Android app with a consistent look
  • Sharing one codebase between a React Native mobile app and a React web app using React Native for Web
  • Prototyping a mobile interface quickly with ready-made buttons
  • Using the Expo demo app as a reference for component usage

Frequently asked questions

Is react-native-elements free to use?

Yes. The repository is licensed under the MIT License, as shown in the README badge. Check the license file in the repository for the full terms.

What do I need before installing React Native Elements?

The README lists Node.js and a React Native project set up as prerequisites. Follow the linked installation docs for the remaining setup steps.

Which npm packages do I install for react-native-elements?

The README's install command is npm install @rneui/themed @rneui/base. Run it in your React Native project folder.

Can I use react-native-elements on the web?

The README says you can use RNE components on the web through React Native for Web. It links a separate walkthrough for the React Native Elements and React Native Web setup.

What are alternatives to react-native-elements?

Projects commonly compared with it include React Native Paper, NativeBase, Tamagui and React Native UI Kitten. The README does not compare them, so check each project's documentation to decide.

Where can I see examples of react-native-elements components?

The official React Native Elements App on Expo uses all of the library's components. The README also links the full documentation at reactnativeelements.com/docs.

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

React Native Elements suits React Native developers who want ready-made components, teams sharing code between mobile and React web apps, and anyone prototyping a mobile interface quickly. It is a poor fit for people who do not write JavaScript, or for projects that need a fully custom design system, since the README does not describe theming depth beyond the packages it names.

Install options & downloads