Home

UI Libraries in React Native

1. react-native-vision-camera

Library that implements photo and video capture functionalities in an App. Comes with tons of features that help anyone who is working on applications that require camera integration. Features as listed on its Github page are :  Photo, Video and Snapshot capture  Customizable devices and multi-cameras (smoothly zoom out to "fish-eye" camera)  Customizable FPS  Frame Processors (JS worklets to run QR-Code scanning, facial recognition, AI object detection, realtime video chats, ...)  Smooth zooming (Reanimated)  Fast pause and resume  HDR & Night modes Pros :  Tons of features  AI support – facial recognition/object detection  Flexible in terms of customizability  Claims to provide better performance

Cons:

 Might be too vast a library for an app which needs only simple camera integration  May unnecessarily increase App size  Quite new and still needs some improvements 2. react-native-camera A camera module for React Native. Provides all the commonly needed Camera-integration options and features for your React Native App through its props.

Pros:

 Comes with all the common functionalities that are usually needed in everyday apps  Easier to use as compared to react-native-vision-camera  Familiar to use

 Better for apps which require ordinary camera integration ; doesn’t come with specialized and heavy features  Comes with a QR scanner Cons:  Heavy to mount/unmount  Used too commonly  Less preferred by developers Hence, it will act as a library with much lesser issues but will cost more in terms of performance as it is heavy to mount/unmount.

3. react-native-camera-kit

“A high performance, easy to use, rock solid camera library for React Native apps.” --npm docs

Its features, as listed in npm docs are :  Cross Platform (iOS and Android)  Optimized for performance and high photo capture rate  QR / Barcode scanning support  Camera preview support in iOS simulator Pros:  Light-weight and much faster  Easy to use  Familiar implementation Cons:  Has a bunch of issues  Does not support video

Hence, it provides a better implementation with regard to performance, but comes with risk of issues to be handled.

4. Notifee

A feature-rich notifications library for React Native applications. Enables developers to rapidly build rich notifications with a simple API interface, whilst taking care of complex problems such as scheduling, background tasks, device API compatibility & more. Some of its best features are :  Customize notifications according to device  Styled notifications  Quick actions ; supports hooking in events (actions, input, notification displayed or dismissed)  Schedule notifications to appear in the future  Supports service notifications, like integrating music player, navigation, progress indicators in notifications Pros:  Feature rich  Free and open-source Cons:  Doesn’t support Expo

Our app is going to use a lot of notifications regarding new offers, reminders, payment updates, etc where this library seems to fit well. 5. react-native-onesignal Another push-notifications library for React Native. One needs a OneSignal account in order to use it. Preferred a lot by Expo users. It’s features are :  Easy to set up  Automated messaging  Real-Time reporting  Analyse results anywhere Pros:  Supports Expo  Feature rich  Easy to set up Cons:

 It is said to track users through the apps

Unlike Notifee, this library supports Expo and has wonderful features but its Privacy Policy is set in a way that it tracks down the users through the apps it is implemented in. 6. react-native-push-notification React Native Local and Remote Notifications for iOS and Android. Supports notifications in foreground, background and both local and remote notifications. Supports repeating notifications. Pros:

 Easy to use/implement  Easy to install  Supports both local and remote notifications

Cons:

 Manual setup is also needed while implementing for IOS Simple and commonly use push notifications library that is often preferred by developers. Works fine most of the time. 7. Styled components  A CSS-in-JS library that enables developers to write each component with their own styles and allows the code to be in a single location. Helps in creating customizable components that can be easily styled and enhance readability of code. Results in optimizing developer experience and output. Pros:

 Easy to use  Helps to create customizable, reusable components  Preferred a lot by developers

Cons:

None so far

8. React Native Tachyons Another CSS-in-JS library less popular among developers as compared to Styled Components, but liked as equally because of its wonderful features.

Pros:

 slick, easy and complete  familiar, as works similar to Styled Components  no configurations required

This library is similar to styled-components. Developers seem to enjoy it more and is light-weight as compared to other similar libraries. 9. Teaset It is a UI library featuring 20+ pure JS(ES6) for component content classes. It focuses on content display and action control. All the ready-to-use components of this library help to build menus and screens and help in providing a robust and professional look to our apps. Covers everything ; from basic components like : Theme, Labels, Buttons, Checkboxes, Input boxes etc, to advanced ones like NavigationBar, SegmentedBar, Projector, Segmented View, Tab View, Album View, Transform View, Wheel, etc. Pros:

 Wonderful set of 20+ components  Popular among developers  A great fit for the look and feel of our app

Cons:

 Might not contain all the components required for our app

10. React Native Paper React Native Paper is a high-quality, standard-compliant Material Design library that covers all the major use-cases.Very popular in React Native Community and helps our React Native Apps look and feel native. Covers a lot of components like Card, Search bar, Lists, SnackBar, TextInput, Floating Action Buttons, Bottom (Tab) Navigation. Pros:

 Consists of wonderful components that can be used in many parts of our app  Loved by developers  Decently written docs  Provides an appealing look and feel to an app

Cons:

 None seen so far

This library will come in handy as it contains many components we will require to use in our app. Especially the Card components is super-customizable and can be used in many screens for content and menu display. 11. NativeBase The library is a collection of essential cross-platform React Native components and is a good place to start building your app. The components are built with React Native combined with some JavaScript functionality with customizable properties. You can also use any third-party native libraries out of the box. Components include : SearchBar, Login/Signup forms, App Drawe, Footer Tab Navigation, Card, Slider, Spinner(Activity Indicator), Progress, Toasts etc. Pros:  Popular, frequently preferred and liked  Well-written docs with example apps provided  Simple yet appealing components Cons:  Doesn’t have much components  Many components still in development  Lack of theming and styling of components disliked by developers This library has mixed reviews from developers. Many dislike its limitations and others claim its newer versions/updates to be better. In my suggestion, it should be used if there are no better options available. 12. UI Kitten One of the React Native component libraries that can be used as starter kit for mobile apps for any domain, including eCommerce, is React Native UI Kitten – a React Native implementation of the Eva Design system.  Features :  Free and open-source  Lots of themes  Lots of customizable components  Components include : Text, Card, Icon, List, Navigation ( Top/Bottom tabs, Drawer, Menu, View Pager ) , Form Elements, Overlays.

Pros:  Much more components  Very popular among developers  Well-written docs Cons:  A little difficult to set up  Not suitable for cases that require modification of project This library is gaining popularity faster than any others and is being preferred more and more, but it has some serious limitations. It might not be as reliable as React Native Paper as some developers find it irritating to work on it. Its components however, are really good, customizable and appealing. 13. Lottie React Native This library parses Adobe after effects animations that are exported into a JSON file. This is to enable a native experience on mobile. With this, designers can ship and create outstanding animations without the help of engineers. Besides being well-performing, it is easy to use as well. Pros:  Easy to install  Easy to implement  Provides smooth animation integration Cons:  One needs to have an After Effects animation file in order to embed it into his application Our app can use a variety of animations in different use-cases, e.g. – Payment confirmation, animations showing confirmation of shops/products added, etc. This library is the best fit for such purpose. 14. react-native-reanimated React Native Reanimated provides a more comprehensive, low level abstraction for the Animated library API to be built on top of and hence allow for much greater flexibility especially when it comes to gesture based interactions. A very popular library for embedding gesture based animations in our app. Can really add to the appeal of our project. Pros:

 Easy to install and implement  Light-weight and works smoothly  Has an edge over the traditional Animated components as it prevents time lags in Event-driven animations  Displays appealing effects to users while interacting with the UI Cons:  Still in development so has some issues  Remote debugging not possible  Cannot animate virtual components of layout This library works totally different than Lottie as it doesn’t animate images. Instead, it animates the UI elements, which can add a lot of appeal to the UI. Unless we have After Effects animations, we cannot work on it. So, it can help to use this library instead and add animations to our components, working around all animations required for Lottie. 15. Expo print expo-print provides an API for iOS (AirPrint) and Android printing functionality. In our app, it can be used to implement a PDF generator that could be created using an existing HTML text. Pros:  Vast and feature rich  Has a lots of options to customize it Cons:  Implementation is quite complicated We need to implement ‘Seller Product PDF Generation’ feature in our app. This library promises to do that but the process seems to be a bit complicated to implement.

16. react-native-html-to-pdf Convert html strings to PDF documents using React Native. Same as Expo print but quite simple and easy to implement. Pros:  Very simple and easy to implement  Familiar to use as it is similar to other native components

Cons:  Not a vast library  Does not have functionality/customization besides this This library has an edge over Expo print as it is really easy to implement. Only edge which Expo Print has over it is that Expo Print has more probability of providing solutions to any bugs/errors that a developer might come across. 17. react-native-step-indicator A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView. Features  Can be used with ViewPager and Listview  Custom Styling  Supports vertical and horizontal orientation  Supports animation between steps Pros:  Supports animated steps  Simple and easy to implement  Familiar implementation  Supports custom styles

18. react-native-progress-steps A simple and fully customizable React Native component that implements a progress stepper UI. Each steps content is displayed inside of a customizable ScrollView. Fully customizable buttons are displayed at the bottom of the component to move between steps. Pros:  Simple and easy to implement  Familiar implementation  Super – customizable

 Edge over react-native-step-indicator : Slightly more props and customizability as compared to react-native-step-indicator.