React Native Component Libraries Every Mobile Developer Should Know
React Native or RN is a popular open-source JavaScript-based mobile application framework. It allows developers to build natively rendered mobile applications for both Android and iOS operating systems. Components are essentially like JavaScript functions. React Native accepts input in the form of props and returns React elements on the screen.
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 MapView
- 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 Elements
React Native Elements is a cross-platform React Native UI toolkit that puts together in one place a number of great open source UI components made by developers. You can dip into the packages put together by React Native Elements and be sure that the API has a consistent look and feel. It’s not surprising that it has received 17,000 stars on Github.
The package includes a whole basket of components such as pricing, badge, overlay, divider and platform-specific search bars. They are easy to use and really customizable. The props for all the components are defined in one central location, which makes it possible to update or modify components easily. Additionally, it can serve as a platform connecting small teams developing commercial React Native apps with open source contribution.
To use React Native for your web-based projects, there’s React Native Web. It allows for creation of fast, adaptive UIs in JavaScript, and integrates with React Dev tools. You’ll be able to share your codebase between React Native apps and web apps. It supports type, click or swipe as modes of input, has built-in accessibility and RTL support, and is used by the likes of Twitter, Uber and Flipkart.
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.
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.
Lottie for React Native
Lottie is a library from Airbnb for mobiles to help you add animations to your apps. Normally, after creating animations in Adobe After Effects, you’ll need to convert them into a format usable in your web app. Lottie helps you with this.
It works by exporting animation data in JSON format from an After Effects extension, BodyMovin. This extension is bundled with a JS player to render animations on the web. It works with React Native too, and you can access the official docs on Github where it has garnered close to 12,000 stars.
Lottie libraries and plugins are available for free, and you can use the curated collection of animation files to make your apps attractive and interesting. The animation files are small in size and are in vector format. As such, you should not experience any impact on the performance of your app. At the same time, it can spice up your UI and make it more visually appealing.
React Native Mapview
One of the React Native component libraries that offers map components for Android and iOS is React Native Mapview. Its construction is such that regular features on any map such as markers and polygons are specified as children of the Mapview component. This assists the API to declaratively control features on the map intuitively. On your part, you’ll need to ensure enabling Google Maps API in Google console.
There’s a lot you can do to customize the map style. You’ll be able to change mapview position, tracking region / location and make points of interest clickable on Google Maps. You can enable zooming in to specified markers or coordinates, or even animate them. If you assign an animated region value to the prop, Mapview can utilize the Animated API to control the map’s center and zoom. Unless you specify custom markers, default markers will be rendered.
What’s cool is the markers are draggable, can be customized using images, and they update other UIs during drags. If you need more, there’s custom callout to markers, polygon creators, and circle and polygon overlays. iOS users can create gradient polylines. Not surprising that it has 10,000+ stars on Github.
RNUILIB
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.
Teaset
Teaset is a great addition to our list of React Native component libraries. It is a UI library featuring 20+ pure JS(ES6) for component content classes.
With around 2.4k stars on Github, Teaset is a fit for those who have a knack for simplicity and design. It focuses on content display and action control.
Shoutem
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.
If you have any React Native-related questions or projects, feel free to reach me on my LinkedIn account & email address.