Written by Aman Mittal✏️
When building React Native apps you can take advantage of using isolated UI components. This idea is not something new to React Native, it is actually a React philosophy (that the mobile framework is heavily based on). Using UI component libraries helps you to accelerate development time as well as use best practices followed by various developers all over the world.
While creating a React Native app, deciding to use a specific component library can be a bit of a dense decision to make since there are many options.
In this post, we are going to list some of the best 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.
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. Applying themes to a particular component is easy. It comes with two default themes namely light and dark that you can also extend to use. It requires react-native-vector-icons library to support and use icons correctly.
If you are looking to use this library and want to reduce the bundle size, you can do that using a babel-plugin-optional-require. 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.
A fun fact about React Native Paper is that it supports web using react-native-web.
- Documentation
- Support for Expo? Yes
- GitHub stars: 5.1k
- GitHub link
- Live example
React Native Elements
One of the oldest and easiest to get started with, react-native-elements is a cross-platform UI toolkit. The approach of using this toolkit library is always to keep in mind that it offers more of a basic structure through its built-in 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 that the amount of boilerplate code I have to write is reduced as compared to some of the other libraries mentioned in this post. Also, the application built using this UI toolkit looks universal across both iOS and Android platforms. Support for theming is there using Provider. Unlike some of the other libraries which give you light and dark themes, you 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.
- Documentation
- Support for Expo? Yes
- GitHub stars: 18k
- GitHub link
- Live example
NativeBase
This is another library that exists since the early days of React Native that supports cross-platform UI components. The list of components it offers is rich and seems out of the box. It not only provides basic support for each regular component but also has a pre-defined configuration for many components with 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 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 component library that you can consume to save development time. However, the whole UI library is open-source.
- Documentation
- Support for Expo? Yes
- GitHub stars: 13.4k
- GitHub link
React Native UI Kitten
What a fascinating name for a UI library! UI Kitten is another open-source library to be used in React Native apps. It is based on Eva Design System and has its own 480+ icons. It provides support for creating customized themes but also allows you to use or extend two visual themes as well. There are more than 20+ essential UI components that you use. It is also one of the few UI libraries that states that they have support for the right-to-left writing system for all of its components, a fact to be noted for global apps.
Yes, you 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 here. It has support for the web as well.
- Documentation
- Support for Expo? Yes
- GitHub stars: 5.9k
- GitHub link
- Live example
React Native Material Kit
Another library listed in this list that follows support Material Design patterns. With 10+ UI components offered here are dynamic. This means you can easily customize them if there is a requirement as well as just provide the input value and use them like plug-n-play.
Along with that, it is simple to use in React Native apps and even on iOS, the design system is strongly followed. The look and feel are going to be the same as that of the app on an Android device. It does not support for web, so if you are looking to build universal apps, this library is not for you.
- Documentation
- Support for Expo? No
- GitHub stars: 4.6k
- GitHub link
Nachos UI
Another UI library with a fascinating name! Nachos UI is a React Native component library that has support for more than 30 components. It provides support to switch between custom themes that you can define and use those values globally across the app. Some of the components provided with this UI library are very thoughtful and make your work easy since creating them from scratch can be time-consuming.
One of the examples here for this statement is the Indicator component that can be used with any icon or image as a notification badge. Also, it supports the web using react-native-web.
- Documentation
- Support for Expo? _ No _
- GitHub stars: 2k
- GitHub link
React Native UI Lib
Well maintained and used by Wix, React Native UI library is a “toolset” for building amazing React Native apps. It supports both previous and latest React Native 0.60.x versions. It does provide more than 20+ customized components and some of these components such as Drawer can be easily integrated for a better look and feel, and preforming apps using Wix’s navigation library called react-native-navigation. It also has custom animated components such as animated card scanner and animated image.
This is another UI library that supports the right-to-left writing system as well as accessibility for its components.
- Documentation
- Support for Expo? No
- GitHub stars: 2k
- GitHub link
Teaset
Teaset is a UI library that provides over 20 components to use. The components provided by this library are pure and have a minimal approach to design rather than being extensive. The motive of this library for you to use it to have more focus on the content of the app. It supports some usual components such as Input, CheckBox but then, at the same time, provides components such as Stepper, Badges, TabView , and DrawerView.
Support for the web is not available for Expo.
- Documentation
- Support for Expo? _ No _
- GitHub stars: 2.3k
- GitHub link
React Native Design System
This is a new kid on the block. Launched recently, React Native Design System is a library that has to provide components and is a bit opinionated about it. The aim of this library through its API is to have consistency over various React Native apps. That does not mean that this library compromises anything in terms of customization.
If you are coming to a background of web development or have knowledge of how to use any CSS framework, you are going to pick this library quite easily. It does support theming apps by providing a ThemeProvider and has an exhaustive list of colors supported. Do note that, this library does make use of react-native-vector-icons.
- Documentation
- Support for Expo? No
- GitHub stars: 100+
- GitHub link
Conclusion
The libraries included in the list come from personal use as well as those which are actively maintained. The motive of these component libraries is to make your development faster as well as provide a robust way to build apps so that you’re not reinventing the wheel every time when you create a new React Native app.
Plug: LogRocket, a DVR for web apps
LogRocket is a frontend logging tool 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.
The post React Native component libraries you should know in 2020 appeared first on LogRocket Blog.
Top comments (0)