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:
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
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 one
NavigationBarModule.java. To start, this file will contain the following:
The item to note in this file is the
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
getPackages method, add the following instantiation to the returned list.
All done! We can now import our module and use it.
Our final result rendered out will look like:
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.