React Native — Native Modules

4 min readSep 17, 2021

Push Your APP Capability beyond what React Native Provide.

React Native is a popular JavaScript-based mobile app framework that allows you to build natively rendered mobile apps for iOS and Android using the same codebase.

Before diving into the main subject and how to achieve creating Custom Methods ( JAVA for Android or Objective-C for IOS ) we should highlight some mast knowing points.

1 — How React Native Works.

Overview

React Native app is made up of 2 separate pieces, the native code, and JavaScript Code. since it’s two different languages they’re isolated and can't talk to each other. But Luckily we have The React Native Bridge

React Native Old Architecture

The Bridge calculate the layout we define in the JavaScript Side and sends the information to the native side. The majority of time, this implementation works fine, but when you get a traffic jams, like if you scroll a list too fast you will get a blank screen before the items start showing.

While Scrolling the Main Thread send many scroll events to the Shadow Tree to the JSThread to calculate the new layout and send it back to Shadow Tree to the Main Thread what causes the delay ( serialize/deserialize all the information as JSON takes time).

The Good news React Native Team address this performance issue to introduce the JSI ( JavaScript Interface ) removing the need for the old Bridge, and making the two worlds closer (JavaScript and Native world ).

React Native JSI Architecture

The real benefit of using the JSI ( JavaScript Interface ) is that the JavaScript and the Native side can finally talk to each other, you don’t need to serialize a JSON Message and send it over the Bridge (figure 1).

The new Shadow Tree (figure 2) will be written in C++ and shared across both sides which opens more doors to use any library Written in C++ with React Native easily Like ( OpenCV …).

While Its not our topic to deep dive into the React Native Architecture we assume that you get enough understanding for the stack and for what’s coming along this tutorial.

2 — Why Native Modules.

React Native Cover Most Platforms APIs ( android/IOS ), may your APP reach The stage when it needs an API that React Native doesn’t have a corresponding module for yet.

Or even to write high performance code for image processing or any advanced computation.

3 — Your First Native Module.

Android Module

To follow this example you need to create a React Native APP by running (or any existing React Native Project, we’re using TS you can use JS template too no worries ):

$ npx react-native init your-app-name --template react-native-template-typescript

So we break down the process to the following steps:

Creating a JAVA class and implement the functionality required by JavaScript.
Wrap Custom Classes into module.
Register the module to expose it to JavaScript.
Test the module from JavaScript.

React Native Modules Creation Structure

So for this example, let's build a module that returns the Android Device ID

1 — Create First Class

Under android/src/main/java/com/your-app-name/ Create ReactOneCustomMethod.java class with the following code.

Code explanation

Java classes only need to extend the BaseJavaModule class or implement the NativeModule interface to be considered a Native Module by React Native. but it’s recommended to useReactContextBaseJavaModule to give access to the ReactApplicationContext (RAC), which is useful for Native Modules that need to hook into activity lifecycle methods.
getName() method. This method returns a string, which represents the name of the native module. with that name, the native module can be accessed in JavaScript.
getPhoneID() its a promise resolve the PhoneID.

2 — Add Method To The Native Module

Under android/src/main/java/com/your-app-name/ We Create our moduleReactOnePackage.java class (you can name files whatever you like the most ) with the following code.

Code Explanation

Your class need to implement ReactPackage by that you override createNativeModules()and createViewManagers()

createNativeModules() here you can add your custom methods as many you want using modules.add(new yourMethod(params)) see line 21.

3 — Expos Custom Modules to JavaScript

At this stage, we need to give the JavaScript an entry point to what we built natively.

go to MainApplication.java under android/src/main/java/com/your-app-name/ and search for getPackages() then add your package.

packages.add(new ReactOnePackage());

so the method will look like

4 — Test what we built

Now the custom method we create should be accessible for the JavaScript that way

import { NativeModules } from 'react-native';// "ReactOneCustomMethod" it's the same value returned by getName()
// from ReactOneCustomMethodconst {ReactOneCustomMethod} = NativeModules;

Let's run a quick demo, edit your App.tsx or create New Component with the following code:

Run your application:

$ npm start// connect your Device and lunch the app
$ npm run android

Now by pressing the Button you should see a text above the button that says

ID: xxxxx-your-id-xxxxx

IOS Module

This is Part 2, We Covered all what you need to know about IOS to make this example Work the same: