Native module for React Native using Kotlin

Pasindu Yeshan Abeysinghe
5 min readFeb 24, 2022

--

About React Native

React Native is a JavaScript framework for writing mobile applications which eventually rendered natively. React Native runs on React, a popular open-source library for building user interfaces with JavaScript, So if you know React it will be really easy to develop user interfaces in React Native mobile applications. That is one reason React native is so popular.

About Kotlin

Kotlin is a cross-platform, statically typed, general-purpose programming language. Kotlin is designed to interoperate fully with Java and Java Class Library. Therefore it is straightforward to use Kotlin with React Native.

About Native Module

The NativeModule system exposes instances of native classes to JavaScript as JavaScript objects. Which allows us to execute native code from JavaScript. There are two ways to write a native module for React Native application

  • Directly withing React Native application’s project
  • As an NPM package that can be installed as a dependency by other React Native Application

In this article, I will explain how to implement a native module directly within React Native application

Getting Started

First of all, we should have a React Native project 😃 So, if you don't have a react native project click here and follow the instructions given under the React Native CLI Quickstart. You can start the React Native project with Expo CLI as well which is easier than the React Native CLI but I used React Native CLI to create my React Native Project and I hope that you all have a React Native project which looks like this,

Folder structure

Setting up Gradle

Gradle is an open-source general-purpose build automation tool before we start writing Kotlin, there are a few changes to be made in Gradle files.

First, open the project-level build.gradle file.

Include Kotlin Version

Add google() in the buildscript.repositories and allprojectsin the same build.gralde file.

Add the following classpath in the dependencies to include the Kotlin Gradle plugin.

classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${project.ext.kotlinVersion}"

After you finish with project-level build.gralde file open up the build.grdle file inside the app folder.

Add the following code at the top of the file

apply plugin: "kotlin-android"

In the dependencies section add the following dependency

implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.6.0"

Now you are done with adding Kotlin to your project. You can go to your project root folder and run react-native run-android in the terminal to test everything is working without a problem. This might take a while since the Android project will sync Gradle and download all the missing packages and dependencies to your project.

Bridge Kotlin in React Native

First, let’s create a separate folder inside the project package to code our Kotlin module. In my case, isentgra is my main package name and entgraServices is the folder I have created inside the package folder. As you can see inside the entgraServices folder I have created two Koltin files.

  • EntgraServiceManager — This class implements the necessary functionalities to run the native module and implements getName() function which registers the native Kotlin module with the React Native bridge.
  • EntgraServicePackage — This class registers native module with React native.

Native Module

— EntgraServiceManager.kt

First, add the following content.

For Android, Java native modules are written as classes that extend ReactContextBaseJavaModule and implement the functionality required by JavaScript. Since Kotlin is designed to interoperate fully with Java and Java Class Library we can extend ReactContextBaseJavaModule class as follows.

getName() — All native modules in Android need to implement getName() method and this name will be used to access the native module in JavaScript.

Export a Native Method to JavaScript

Next, we should annotate methods that we plan to invoke from JavaScript with @ReactMethod . You can pass callback methods as parameters (optional) to the native method from JavaScript to run on success and failure as above.

ReactPackage

— EntgraServicePackage.kt

After writing the native module we need to register that module with React Native. For that, the native module should be added to the ReactPackage and register ReactPackage with React Native. During initialization, React Native will loop over all the packages and, for each ReactPackage, register each native module within.

createNativeModules()- Return a list of native modules to register with React Native

Add the package to MainApplication

To register our native module we must add our EntgraServicePackage to the list of packages returned in ReactNativeHost’s getPackages() method.

Open the MainApplication.java file which can be found in android/app/src/main/java/com/<package-name>/MainApplication.java . Import your package and add the package into the packages list as follows.

Now you can test the native module you have built.

Test Native Module in JavaScript

First import NativeModules from ReactNative. Then you can access your native module from NativeModulesas follows.

Finally, you can rebuild the React Native application with the latest native code with your new native modules by running the following code in the project root folder.

npx react-native run-android

Thank you for reading and hope you got some insight on developing native modules for React Native with Kotlin 😃

--

--

No responses yet