React Native Libraries for “Native Features”

1. React Native Device Info

React Native device info is an excellent open-source library to retrieve device information in a react native application. Having device information helps you to do performance improvements specific to devices. This library has a long API that lets you retrieve application name, battery level, build number, device ID, device name, available disk storage, timezone, and many other useful data of particular devices using sync calls or hooks. Currently, the latest version of it is v7.0.2 and it owns 5k+ stars in Github.

For the installations, you can use npm or yarn commands as follows. If you are using a React Native version higher than v0.47, you have to use v0.11.0 or a higher version of this library.

Installation

• Using npm

npm install — save react-native-device-info

• Using Yarn

yarn add react-native-device-info

How to use

To use the API, first, you need to import it like this.

import DeviceInfo from ‘react-native-device-info’;
import { getUniqueId, getManufacturer } from ‘react-native-device-info’;

Remember that, many APIs are platform-specific. If somehow, there is no implementation for a platform, it will return “unknown” as a string. Also, note that most APIs return a Promise but also have a corresponding API with Sync on the end that operates synchronously.

Let’s see how to use a few methods of this library

Get your Android Id

Gets the battery level of the device

Check if the device has a camera

Tip: Share your reusable components between projects using Bit (Github).

Bit makes it simple to share, document, and reuse independent components between projects. Use it to maximize code reuse, keep a consistent design, collaborate as a team, speed delivery, and build apps that scale.

Bit supports Node, React Native, React, Vue, Angular, and more.

Example: exploring reusable React components shared on Bit.dev

2. React Native Permissions

When creating mobile applications, you require access to some potentially sensitive information of the device, through your app. These may include location service, contacts, settings, gallery, camera, etc. To access them, you have to ask for the user’s permissions first. In the case of not using permissions in the correct way, the app may result in getting rejected from the stores ( App Store, Play Store).

React Native Permission library lets you make these requests in an easy, fast, and reliable way. This library consists of a unified permissions package and an API for React Native on iOS and Android, which makes the coding part shorter. Also, you will be able to re-use the same code snippet, in your entire codebase. React Native Permissions is also an open-source library with over 2k stars on GitHub, with the latest update of v2.2.2.

This library can be easily set up by npm or yarn commands. In android, no additional handler or linking is required and uses RN’s own PermissionsAndroid JS API. By default, no permission handler is installed on iOS. But in iOS, you can request more permissions like accessing Bluetooth, reminder, and push notifications which Android doesn’t.

Installation

Using npm

npm install — save react-native-permissions

Using yarn

yarn add react-native-permissions

Here are some of the commonly used permissions from this library.

PERMISSIONS.ANDROID.CALL_PHONE;
PERMISSIONS.ANDROID.CAMERA;
PERMISSIONS.ANDROID.READ_CALL_LOG;
PERMISSIONS.ANDROID.READ_SMS;
PERMISSIONS.ANDROID.READ_CONTACTS;

All of these permissions are self explanatory by their words. You can find the similar permissions for IOS and windows as well. These permission requests can have one of the following outcomes.

RESULTS.UNAVAILABLE
RESULTS.DENIED
RESULTS.GRANTED
RESULTS.BLOCKED

Finally, let’s see how you would check and continue with permission requests.

3. react-native camera

one of the important native features of mobile development is using the device’s camera for taking a photo or video. When creating React Native apps, you can simply use the react-native camera library to access the functionality of using the device’s camera.

The great thing about this library is it’s not limited to taking photographs and videos. It has more functionalities such as barcode scanning, face detection and object detection (Android & iOS only), text recognition (can installation for iOS using CocoaPods optionally), etc. This library performs these actions by communicating with the device’s native operating system through some helper methods.

In addition, this library allows developers to store video recordings in the same directory where photos are saved. Also, you can integrate Google’s camera view into your app directly using this react-native-camera library.

Installation

You can install it with the following command

npm i react-native-camera

How to use it

To access the camera, you need to write a code sample similar to the following.

This library is the most popular library for using the mobile device camera. One of the reasons for its popularity is its a very stable product with many features that’s very easy to use. this open-source library has over 8k stars on GitHub receiving over 175,000 downloads per month, with the latest update of v3.40.0. Currently, this library is maintained by the Tidelift Subscription, and it is ready to be used in enterprise solutions.

4. expo av

Among the open-source platforms for react native, Expo is a prominent framework for making universal native apps using React and runs on Android, iOS, and the web. Expo includes a universal runtime and many dominant libraries which makes the developing process easier.

Expo Av is the module for audio and video playback operations in this framework. This library uses audio sound objects and video components for media playback, which share a unified and vital API for the media playback process. The use of these objects and components makes the usage of this library easier and it makes the playback process faster.

Developers are free to use props inside the components as well as to use the API functions. As a plus, this library allows developers to do certain modifications and debugging which makes the developers interesting and popular among most native developers.

In the playback process, it loads the relevant media from the source, into the memory and prepares it for playing on the device. As the Expo framework contains ExoPlayer implementation by default, to use the MediaPlayer of the device, you just have to add the media player imports of the relevant OS, to the initial status of the AV object.

Installation

Using npm

expo install expo-av

If you have already installed Expo into your React app, you can just install modules from the Expo SDK using expo CLI via the expo install commands.

5. react-native-callkeep

The react-native-callkeep is a well-known library among native developers that allows handling essential actions that are relevant to phone calls in cross-platform mobile applications. This library contains the iOS CallKit framework and Android ConnectionService for coordinating the calling services with the system and other apps. These calling services are integrated into the built-in phone app for calling. Followings are some interesting services that you can have in a lot more easy way than using other libraries.

• Receiving incoming calls
• Making outgoing calls (VoIP or otherwise)
• Call blocking and identification
• Mark calls as active or not
• End and Reject calls
• Mute and hold calls

Using this library, developers can update the device UI after an outgoing call that has started while integrating other device hardware like speakers. React-Native-callkeep is also an open-source library with over 300 stars on GitHub, with the latest version being v3.1.4

Installation

Using npm

npm i react-native-callkeep

Let’s see some of the methods available in this library

• setAvailable — the device is ready to make outgoing calls. It’s available only on Android.
• setCurrentCallActive — Mark the current call as active. for example when call is answered.
• displayIncomingCall — Display Incoming calls
• answerIncomingCall — tell the sdk if a user has answered the call
• endcall — it’s called if the user has ended the call
• rejectCall — it’s called when a call is rejected

6. React-native-contacts

React-native-contacts might be the best library to access the device contact list when making React Native apps. It allows you to do many in-app operations regarding to contacts. Some of the actions you can perform with it are as follows

• Adding Contacts
• Open Contact Form
• Updating Contacts
• Add numbers to an existing contact
• Delete Contacts

As this is a database intensive process, it may take a certain time period to complete the action, depending on the size of the contacts list and the performance of the device. Because of this, it is better to get all the contacts via the getAll method in the API before it is needed, and you can store the full list inside cache memories for future use.

Also, because of the integration of the contact list with the system, first, you have to check permission to access Contacts through your app. If the contact list is currently not accessible, you have to request permission from the system to access Contacts and do Read and write operations through your app. For that, this library contains two Optional methods checkPermission and checkPermission.

React-Native-contacts is a 100% open-source library with over 1k stars on GitHub, with the latest version of v6.0.3

Installation

Using npm

npm install react-native-contacts — save

Using Yarn

yarn add react-native-contacts

How to use it

Here is a sample code to use to get all contacts in Android.

7. React Native Sensors

Modern mobile applications often contain features that use device sensors and it’s data to perform certain functions. Most of the sensors record data such as device orientation, temperature detection, light density detection, the position with respect to the x,y, and z axes, etc. Most of the gaming, tracking, and social media mobile apps use data from these sensors for the app functionalities and to provide a better user experience.

React Native Sensors is a library of React Native community, to access the data from the device sensors, through your cross-platform mobile app. This developer-friendly approach makes accessing Accelerometer, Gyroscope, Magnetometer, and Barometer data easy, faster and in a reactive way, without using another framework or a third-party platform. The sensor data is accessible through an RxJS Observable and through that, you can have full control of the data. Currently, it performs the latest version of v7.0.1 and owns 500+ stars in Github which is open source and ready to use.

Installation

You can use an npm command $ npm install react-native-sensors –save and you can use react-native link react-native-sensors for an automatic linking process of the package.

8. React Native Firebase

React Native Firebase is a collection of React Native modules that links your project to Firebase and its services. This library uses native Firebase SDKs for both iOS and Android, which are light-weight and use pure JavaScript in connecting to Firebase. With the use of API, You will be able to have services like Admob, Analytics, Authentications, cloud services, in-app messaging, push notifications, real-time databases, etc.. React Native Firebase is an open-source library with over 8,000 stars on GitHub.

This library is feature-rich, well tested, and well-typed as well as a well-documented Firebase implementation for React Native. Each and every module is tested with a coverage of more than 95% and it includes the first-class support for TypeScript. As this is very similar to the Firebase Web SDK, the re-usability of the code in cross-platform development is maximized.

To use this library, add a new application in the Firebase console, with the exact package name as in your project’s Manifest file or with the exact iOS bundle ID as in your local project bundle ID. This should be done first before using the other Firebase services.

Installation

You can install the React Native Firebase “app” module to the root folder of your React Native project with NPM or Yarn:

Using npm

npm install — save @react-native-firebase/app

Using Yarn

yarn add @react-native-firebase/app

Conclusion

Building native features is one of the most challenging tasks when using a hybrid platform like react-native to develop mobile applications. These React Native libraries for Native features perform a significant role in developing cross-platform mobile applications at the enterprise level. If you are a React Native developer, stay tuned with the Github repositories of these libraries for the latest updates and releases.

Learn More

11 React Native Component Libraries you Should Know in 2019

15 Things to Consider When Setting Up a React Native App

How We Build Our Design System