Skip to main content
Version: 4.0.0-rc.8

Overview

The aim of React Native Elements is to provide an all-in-one UI kit for creating apps in react native. There are many great ui components made by developers all around open source. React Native Elements takes the hassle of assembling these packages together by giving you a ready made kit with consistent api and look and feel.

Installation​

Expo CLI

Guide to install with expo-cli

React Native CLI

Guide to install with react-native cli

React JS

Guide to install with create-react-app

Next JS (coming soon)

Guide to install with create-next-app

Quick start​

Here's a quick example to get you started, it's literally all you need:

import { Button } from '@rneui/base';

const App = () => {
  return <Button title="Hello World" />;
};

Using themed components​

The components in this library have a single theme running through them. From one central location, we can update the colours used in all components. While this was great for the developers of the library, the actual users also needed a way to use this feature.

But why stop at colours? Why not allow the props of every component to be defined in one central place? And so the idea behind theming with React Native Elements was born!

import { Button, ThemeProvider } from '@rneui/themed';

const MyApp = () => {
  return (
    <ThemeProvider>
      <Button title="Hey!" />
    </ThemeProvider>
  );
};

To customize the theme, or use it within your own components, be sure to check the docs on Customization.