The Crowdbotics platform leverages AI and systematic code reuse to help you build better applications faster and with less risk.
Don’t take our word for it, see what our customers have to say.
By Industry
Everything you need to be successful with Crowdbotics.
Use & Learn
We are on a mission to radically transform the software development lifecycle.
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.
6 October 2021
To create app that work across devices, many modern day developers build Hybrid apps using HTML, CSS and JavaScript — as you would a web page— wrapped in native container. This way, you use (almost) one set of source code for developing applications for both iOS and Android .
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.
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-community/lottie-react-native
_Lottie wrapper for React Native. Contribute to react-native-community/lottie-react-native development by creating an…_github.com
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, Animated.
oblador/react-native-vector-icons
_Customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source and full styling. …_github.com
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.
FaridSafi/react-native-gifted-chat
_ The most complete chat UI for React Native. Contribute to FaridSafi/react-native-gifted-chat development by creating…_github.com
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.
react-native-community/react-native-image-picker
_sunrise_over_mountains: A React Native module that allows you to use native UI to select media from the device library…_github.com
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.
import * as Progress from 'react-native-progress';
<Progress.Bar progress={0.3} width={200} />
<Progress.Pie progress={0.4} size={50} />
<Progress.Circle size={30} indeterminate={true} />
<Progress.CircleSnail color={['red', 'green', 'blue']} />oblador/react-native-progress
_Progress indicators and spinners for React Native using ReactART – oblador/react-native-progress_github.com
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.
GeekyAnts/NativeBase
_Essential cross-platform UI components for React Native – GeekyAnts/NativeBase_github.com
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-navigation/react-navigation
_Routing and navigation for your React Native apps. Contribute to react-navigation/react-navigation development by…_github.com
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 react-navigation.
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.
import RNLanguages from 'react-native-languages';
// Get Current device language
console.log('language', RNLanguages.language);react-native-community/react-native-languages
_ Get the user preferred languages and use the library of your choice to translate your app …_github.com
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 async/await.
import InAppBilling from "react-native-billing";
async purchase() {
try {
await InAppBilling.open();
const details = await InAppBilling.purchase("android.test.purchased");
console.log("You purchased: ", details);
} catch (err) {
console.log(err);
} finally {
await InAppBilling.close();
}
}idehub/react-native-billing
_React Native bridge to InApp Billing on Android. Contribute to idehub/react-native-billing development by creating an…_github.com
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.
dooboolab/react-native-iap
_react-native native module for In App Purchase. Contribute to dooboolab/react-native-iap development by creating an…_github.com
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.
gcanti/tcomb-form-native
_Forms library for react-native. Contribute to gcanti/tcomb-form-native development by creating an account on GitHub._github.com
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.
jaredpalmer/formik
_Build forms in React, without the tears . Contribute to jaredpalmer/formik development by creating an account on…_github.com
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.
reduxjs/redux
_Predictable state container for JavaScript apps. Contribute to reduxjs/redux development by creating an account on…_github.com
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.
erikras/redux-form
_A Higher Order Component using react-redux to keep form state in a Redux store – erikras/redux-form_github.com
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.
rt2zz/redux-persist
_persist and rehydrate a redux store. Contribute to rt2zz/redux-persist development by creating an account on GitHub._github.com
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.
jhen0409/react-native-debugger
_The standalone app based on official debugger of React Native, and includes React Inspector / Redux DevTools …_github.com
React Native Firebase is lightweight JavaScript library that helps you connect your React Native app to the native Firebase SDK for both iOS and Android platform. This process aims to mirror the official Firebase SDK as closely as possible.
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.
invertase/react-native-firebase
_ A well tested feature rich modular Firebase implementation for React Native. Supports both iOS & Android platforms…_github.com
Jest is a unit testing framework created by Facebook and released on GitHub. It tests JavaScript code. Jest is a versatile testing tool with the ability to adapt to any JavaScript library or framework. Its advantages include snapshot testing support.
Jest · Delightful JavaScript Testing
Delightful JavaScript Testingjestjs.io
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.
airbnb/enzyme
_JavaScript Testing utilities for React. Contribute to airbnb/enzyme development by creating an account on GitHub._github.com
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:
describe('Login flow', () => {
it('should login successfully', async () => {
await device.reloadReactNative();
await expect(element(by.id('email'))).toBeVisible();
await element(by.id('email')).typeText('john@example.com');
await element(by.id('password')).typeText('123456');
await element(by.text('Login')).tap();
await expect(element(by.text('Welcome'))).toBeVisible();
await expect(element(by.id('email'))).toNotExist();
});
});wix/Detox
_Gray Box End-to-End Testing and Automation Framework for Mobile Apps – wix/Detox_github.com
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.
RealOrangeOne/react-native-mock
_A fully mocked and test-friendly version of react native – RealOrangeOne/react-native-mock_github.com
Lastly, I leave you with the go to linting library used by almost every JavaScript developer. It is called ESLint. It is a pluggable linting utility for JavaScript and to let programmers discover issues with their JavaScript code before executing it. One great benefit of ESLint is that it gives developers the opportunity to create their own linting rules. I personally prefer to use rules provided by the team at AirBnb with some tweaks of my own.
ESLint – Pluggable JavaScript linter
_A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code…_eslint.org
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.