Native module for React Native using Kotlin
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,
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 allprojects
in 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 NativeModules
as 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 😃