We live in the world of a variety, yet mobile devices are dominated by two major platforms, iOS and Android. It is a two-horse race, but that doesn’t make mobile app development easy. For iOS you write code using Objective-C or Swift. For Android, you use Java. In addition to different programming languages, the tool chains are entirely different too for both of these mobile platforms.
In recent years, hybrid frameworks have evolved from web view to use native APIs. This cross-platform approach of developing a mobile application comes with its own pros and cons. Pros such as being less-time consuming and cost-effective, and cons include performance issues.
One of the great options that fall under the umbrella of cross-platform development is React Native. React Native was developed by Facebook and used by others such as Tesla Motors, Walmart Labs, Uber, Instagram Engineering, Discord, Wix and so on.
In a nutshell, React Native allows you to build mobile applications that look, feel and perform much more like native applications. The good thing for developers is that they can use almost the same concepts that are being used for building web applications.
The list below contains an overview of the top open source libraries that you can use in your React Native application.
Also, try out the Crowdbotics application builder to instantly scaffold and deploy a React Native app.
Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as JSON with
bodymovin and renders them natively on mobile. With over 10k+ stars, this npm module helps you use community/custom build animations in your React Native application.
react-native-vector-icons is the go to library if you are considering to use customizable icons with support for NavBar/TabBar, image source and full styling. This npm module bundles famous icon libraries like:
and many more. It is like have best of all the libraries in one place, and you do not have to go through the process of hooking up multiple libraries and then linking them with the React Native app. It also supports animation with React Native’s animation library,
Chat applications are a huge part of mobile app development. There are scenarios in which either you build complete chat applications or add it as a feature to your existing app. In both cases, this module is out there to help you get started with the UI. This npm module comes with fully customizable components, dates, multiple TextInput options, Redux support and so on.
An essential library for any app with Image upload or Image processing. It supports features like selecting from the gallery, and taking a photo from the camera. Another useful feature in this library that I like is the option to select the quality of an image you want to choose. This feature solves memory issues due to high-resolution images.
Showing progress of loading or any other action is important in an app. This library makes it easy to show progress by supporting 5 different components like Linear progress bar, circular, pie and so on using ReactART.
NativeBase is a sleek, ingenious, and dynamic front-end framework to build cross-platform Android and iOS mobile apps using ready-to-use generic components of React Native. What is really great about NativeBase is that you can use shared UI cross-platform components, which will drastically increase your productivity.
Its documentation provides an in-depth specification on each components and customize them. You need a component library like Nativebase while working solo, or quickly prototyping an MVP or if you want to focus on the functionality of your application.
Navigation has been a controversial topic in React Naive community, until
react-navigation package has started to mature. With version
3 recently launched, this npm module is right now a complete solution provider for managing screens in a React Native application. It offers
If you want to try it out, here is cool example app built using it.
React Native Navigation provides 100% native platform navigation on both iOS and Android for React Native apps. Developed and maintained by the team at Wix, is the second most commonly used package to support navigation of screens in a React Native app after
The reason this package is often a second preference in the community is because of its set up process. You will have to manually hook this library with iOS build and Android
gradle every time you want to use it by following a number of steps.
A community package, react-native-languages is a library that helps you integrate the i18n-js library in a React Native application to internationalize and localize the application. With that, it has many utility functions that you can leverage.
For example, to get the current device’s language, you would write the following code.
This library is exclusively to be used with React Native and Android. Use this library when you need to add in-app billing to your app for Android devices. The tool has a simple interface and works as a bridge by wrapping anjlab’s
InApp Billing library. This library is up to date and supports ES6 features like
This is a react-native link library project for in-app purchase for both Android and iOS platforms. The goal of this project is to have similar experience between the two platforms for in-app-purchase. It has a vast variety of helper functions that you can use. Android as a platform has more functions for in-app-purchase.
Forms can be a lot more complicated than icons or components as they have a lot of different parts and there’s logic involved when it comes to field validation and form submission. With this library, you simplify form processing immensely .
It has a variety of configuration that is platform specific. Using this library you will be writing a lot less code, get usability and accessibility, and no need to update forms when the domain model changes.
Handling forms is one of the most important aspect of being a good web developer. Same applies if you are using React Native for developing a mobile application. It is a small library that helps you to create forms in React and facilitates form building. It allows you to get values in and out of a form state, validate and get error messages, and effectively submit forms.
Redux plays a huge part in React and React Native’s ecosystem when it comes to manage state in an application. Redux helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.
Using Redux, you can query, select, insert, and update a record in the database. Redux also has a really useful feature to edit live code. Redux works with any UI layer, and has a large ecosystem of add ons to fit your needs.
Another well maintained library for building forms in a React Native application. Along with managing state with Redux, this library allows you to track common form states as focused field, fields in the form, fields that the user has interacted with, field values, and many others.
Redux Persist takes your Redux state object and saves it to persisted storage. Then on app launch it retrieves this persisted state and saves it back to redux. Managing user data when locally storing in a mobile device can be hard when data sets become complex. Using React Native API
AsyncStorage natively can be difficult for large applications.
React Native Debugger is standalone application that can be installed on your local machine for debugging a React Native application. As a developer, having a quality debugging environment can lead to be more productive, while helping you track down bugs and creating new features.
Another advantage of using this standalone application, is that it already includes Redux DevTools by default. So if your application is depending on Redux state management library, with minimum configuration, you can hook up your React Native app.
Even though the official SDK works with React Native, this package allows you to consume device SDKs which don’t exist on the Firebase JS SDK. To consume the official SDK in React Native, you will to opt for the web one. Things like AdMob, Analytics, Cloud Messaging (FCM), Remote Config, Performance Monitoring, Dynamic Links are not available in the official Firebase SDK.
Enzyme is a testing tool from AirbnbEng. It supports shallow, full DOM, and static rendering. Enzyme also offers developers API wrappers that are supposed to make asserting, manipulating, and traversing the React DOM easier. Another great benefit of the tool is that it is compatible with other testing libraries and frameworks including Jest and Mocha.
The most difficult part of automated testing on mobile is the tip of the testing pyramid is E2E.Detox is End to End (E2E) testing library for applications written in React Native. It means testing application like a real user, but automatically with code. You will write code and this testing library provides tools to click through the application like a real human user.
For example, a test for a login screen in Detox as it runs on a device/simulator like an actual user looks like below:
This third-party solution is relatively new. React-native-mock helps developers work with the latest versions of React Native. The library was specifically designed to facilitate testing of React Native apps.
There are other libraries that modules available for React Native for different purposes. Expect more in future since mobile development is hard when it comes to accessing to different APIs. Libraries such as axios for network calls and Apollo Client to query GraphQL APIs can also be used with React Native, as they are used with React JS. I didn’t think that they are worth mentioning here in detail. I hope the above list provides you ready made solutions to help you build better React Native applications.
January 18, 2019