Going Native: Creating Native Modules in React Native

With React’s popularity and widespread usage on the web, it was bound to bleed over into the mobile space. And bleed over it did with React Native. React Native allows us to write mobile applications using JavaScript. This way, as web developers, we get to implement the language we are familiar with to write apps for Android and IOS with native performance. A large part of what React Native does is abstract platform APIs by way of what are called native modules. Besides the modules that React Native needs to actually run, there are many others that let us for example, change the status bar color, interact with the keyboard, use native date pickers, etc.

As mentioned before, React Native provides an impressive amount of native modules that give you direct access to core platform APIs on both Android and IOS. However, there are many APIs that React Native does not give you access to out of the box. It would be an untenable undertaking for the React Native team to provide an abstraction for every single available API on Android and IOS. As such they have made React Native extensible in this regard. This allows us to create our own native modules. With this, if there’s a native functionality we need access to, we can write the abstraction ourselves or look to the community for someone who has. While the latter will usually get you what you need, there are times where you’ll need to write your own. And that is exactly what we’re about to do! The following tutorial will consist of us writing a React Native native module from scratch.

We’re going to be making a native module that gives us access to the Android navigation bar. Our objective is to allow for changing the color of the bar. The module we make will behave very similarly to the StatusBar module that is included with React Native. Our expected outcome is to make the following work:

To accomplish this, we’re going to need to write some Java. Let’s get started!

Note. This tutorial will require a working React Native app. If you need help getting one going, take a look at the getting started guide. Make sure you have the app ready to build for Android as the module we are making will interact with an Android platform API.

Before we begin, we’ll create a React Native component where we will eventually use our native module. We’ll use the following as a start.

This will render:

Pre native module

To start, we’re going to need to create a Java package for our module. In android/app/src/main/java/com/[app name], create a folder called navigationbar. In that folder, create a file called NavigationBarPackage.java.

That file should consist of the following:

This file, as you will see later when we build on to it, provides a point of registration for the module.

Next, we will create the module itself. In the navigationbar directory, create another file. Name this oneNavigationBarModule.java. To start, this file will contain the following:

The item to note in this file is the getName method. This is where we will supply the name of the module for its JavaScript counterpart. The name we provide here is exactly the name that will be used in our JS.

Next, in our module class we will expose a method to our JavaScript module. Our first one will be the setColor method. It’s important to note that to properly expose the method to our JavaScript, we must annotate it using @ReactMethod.

Our set color method will have a return type of void (all exposed methods must return void). It will take a single string argument. Before we continue on with this method we first need to import some dependencies needed for this method to do its job. Place the following snippet above the module’s class definition.

Now, back to the method. The first thing we need to do is get the running Android activity.

Next, we need to take the color string we were given, then convert it color integer that we’ll use as our value when setting the navigation bar color.

Finally, we will actually set the color of the navigation bar with the activity we just retrieved.

The completed method should look like:

Now that we have completed our setColor method we have, in effect, written the core functionality of our native module. Now, we need to register it.

Back in the NavigationBarPackage.java file, we will register the module. In the createNativeModules method, add the following:

This will let our package know about our module. Now that our package is in the know, we need to register our package in our app. One directory up, open the MainApplication.java file. At the top of the file import the navigationbar package using

In the getPackages method, add the following instantiation to the returned list.

The package and module are now fully registered on the Java side. All that is left to do is implement the module on the JavaScript side. Our module now resides in React Native’s NativeModule. We will now create a file for our module that will make it easier to import and utilize in the rest of our app. Create a new JS file that contains the following:

All done! We can now import our module and use it.

Our final result rendered out will look like:

Post native module

Pretty cool, right?

With that, we have successfully created a React Native native module. While this is a simple example, we now have a peek at the power of native modules. This just scratches the surface of their capabilities. Take a look the the React Native docs for more information.

Leave a Reply

Your email address will not be published. Required fields are marked *