React Native component libraries you should know

Editor’s note: This post was updated in September 2021 to add new, more popular libraries and include some updated information regarding a newer version of React Native.

When building React Native apps, you can take advantage of isolated UI components to help accelerate your development time as well as use the best practices followed by various developers all over the world. This idea is not new to React Native — it is actually a React philosophy, one that the mobile framework is heavily based upon.

The decision to use a specific component library for your new React Native app can be a bit tough because there are many options.

The best React Native component libraries

In this post, we’re going to list some of the best React Native component libraries available that are open source and not only help you use a robust approach but also offer quality support for platforms such as iOS and Android. These libraries include:

• React Native Paper
• React Native Elements
• NativeBase
• React Native UI Kitten
• Lottie For React Native
• React Native Maps
• RNUI (React Native UI Library)
• Teaset
• Shoutem UI

React Native Paper

React Native Paper is a cross-platform React Native UI library based on Google’s Material Design. It offers customizable and production-ready components, and has theming support.

If you want to use this library and reduce its bundle size, you can do that using a Babel plugin that allows you to optionally require modules. This will exclude all the modules that your app doesn’t use and rewrite the import statements to include only those that are imported in the app’s component files.

React Native Paper also supports web using React Native Web.

How do you use React Native Paper themes?

Applying themes to a particular component is easy. It comes with two default themes, namely light and dark, which you can extend. It also requires the react-native-vector-icons library to support and use icons correctly.

TL;DR: React Native Paper

• Documentation
• Support for Expo? Yes
• GitHub (8.4k stars)
• Live example

React Native Elements

We made a custom demo for .
No really. Click here to check it out.

Click here to see the full demo with network requests

What is React Native Elements?

One of the oldest and easiest libraries to start with, React Native Elements is a cross-platform UI toolkit that implements Material Design. The approach of this toolkit library offers more of a basic structure through its generalized inbuilt components, rather than following an opinionated design system.

This certainly means that you are going to get more control over how you want to customize components. The customization of any component included with this library is a mixture of some custom props as well as props from the React Native core API.

That said, using this library, I have found I can write much less boilerplate code than I do when using some of the other libraries mentioned in this post. The application built using this UI toolkit also looks and feels universal across both iOS and Android platforms. Provider offers support for theming.

Unlike some of the other libraries, which give you light and dark themes, you’ll have to define your themes to make it work when using this library.

You can also use React Native Elements in web projects using React Native Web.

TL;DR: React Native Elements

• Documentation
• Support for Expo? Yes
• GitHub (21.2k stars)
• Live example

NativeBase

This is another library that has existed since the early days of React Native. It supports a long, rich list of cross-platform UI components that also seem to come production-ready, as they not only provide basic support for each regular component, but also have predefined configurations for many components that cover almost all possible use cases.

For example, the Picker component renders a picker for iOS and Android apps. It also supports custom styling that you can apply using the Picker component, such as:

• Using an icon
• Adding a placeholder
• Having a custom back button
• Having a custom header

It has support for themes and does offer paid templates based on the NativeBase component library that you can consume to save development time. However, the whole UI library is open-source.

TL;DR: NativeBase

• Documentation
• Support for Expo? Yes
• GitHub (15.7k stars)

React Native UI Kitten

What a fantastic name for a UI library! UI Kitten is another open source library that supports React Native apps. It is based on the Eva Design System and has 480+ icons of its own. It provides support for creating customized themes, but also allows you to use or extend two default visual themes as well.

There are more than 20 essential UI components that you can use, and it is also one of the few UI libraries that offers support for the right-to-left writing system for all of its components, a fact to be noted for global apps. It has support for the web as well.

You will have to go through some configuration steps to make use of this UI library, but if you are considering using it, make sure to give its design system a read.

TL;DR: React Native UI Kitten

• Documentation
• Support for Expo? Yes
• GitHub (6.7k stars)
• Live example

Lottie for React Native

Here, we have another excellent open source component library developed by Airbnb for creating beautiful animations. The Lottie community provides featured animations that you can use freely for react native iOS or Android applications.

Along with that, you can create custom animations using Adobe After Effects. Lottie then uses the Bodymovin extension to export the custom animations to JSON format and render it in the native mobile app. Because of the JSON export format, your app will have a great performance.

TL;DR: Lottie for React Native

• Documentation
• Support for Expo? Yes
• GitHub (14.5K stars)

React Native Maps

React Native Maps is another useful library that provides customizable map components for your iOS and Android apps. The components in this library include:

• MapView
• Marker
• Polygon
• Polyline
• Callout
• Circle
• HeatMap
• Geojson

Using these components, you can offer the user different experiences on the map. In addition, you can combine the components with the Animated API to give an animated effect for the components. For example, you can animate the zoom, marker views, and marker coordinates, and also render polygons and polylines on the map.

However, it will be compatible only with the latest version of React Native. So make sure to update your React Native version to the latest if you plan to use it.

TL;DR: React Native Maps

• Documentation
• Support for Expo? Yes
• GitHub (12.6k stars)

RNUI (React Native UI Library)

Well-maintained and used by Wix, the RNUI library is a toolset for building amazing React Native apps. It supports both previous and the latest React Native 0.65 versions, and provides more than 20 customized components — some of which, such as Drawer, can be easily integrated for a more seamless look and feel. It also has custom animated components, such as an animated card scanner and an animated image.

This is another UI library that supports the right-to-left writing system, as well as full accessibility support.

[h3] TL;DR: RNUI

• Documentation
• Support for Expo? No
• GitHub (3.6k stars)

Teaset

Teaset is a UI library that provides over 20 pure components that have a minimal approach to design. The goal of this library is for you, and your users, to stay more focused on the content of the app instead of its design. It supports some typical components such as Input and CheckBox, but then, at the same time, provides more uncommon components like Stepper, Badges, TabView, and DrawerView.

Support for the web is not available for Teaset.

TL;DR: Teaset

• Documentation
• Support for Expo? No
• GitHub (2.8k stars)

Shoutem UI

If you’re in the market for a professional-looking UI for your React Native iOS or Android apps, then the Shoutem UI kit is a great choice. Shoutem UI is an open source library that is a part of the Shoutem UI Tool Kit.

It consists of more than 25 composable and customizable UI components that come with pre-defined styles that support other components, so you can build complex UIs by combining them. Not only that, but it also lets you apply custom stying using the Shoutem themes library and animations using the animations library.

TL;DR: Shoutem UI

• Documentation
• Support for Expo? Yes
• GitHub (4.7k stars)

So, what is the best React Native component library?

The answer to this question is always: the one that suits your needs!

The component libraries included in the list are actively maintained. These libraries exist to make your development faster and provide a robust way to build apps so that you’re not reinventing the wheel every time you create a new React Native app. So long as you know what you’re looking to achieve in your UI design, any of these libraries should do the trick.

Do you have a favorite React Native component library? Let it be known in the comments!

LogRocket: Full visibility into your web apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

Try it for free.