Integrating Native Modules into React native Android:
Why Native Modules?
Sometimes we need to use native functionalities which are not available in React Native. To implement native functionalities we use native module android: – java, kotlin
IOS: – Swift, objective-cThe native module system helps you to use native API code written in java, kotlin, Swift, and objective-c in your React Native application
Steps Included in Creating Native Modules:
1) Create a new React-Native project/ you can Also use an Existing project
2) Create Native module – creating a native module in respective folders for Android and IOS
3) Exposing Native Module – the code is written in native code to be exposed to react-native to use in js
4) Registering Module – registering module to use in js
1. Creating a New React Native project:
Create a project using the below command react-native init NativeModuleDemo
2). Creating a Native Module:
1. Firstly we’ll create for Android Your react native project should have an ‘android’ folder inside your project folder. Open the android folder in Android studio.
We will write kotlin code so create a class file with .kt ext and name it as NativeModuleManager.ktFor working with kotlin we need some configurations in build.gradle file1. Under buildscript add ext.kotlin_version = ‘1.6.0’
2. Under repositories add maven{ url’https://dl.bintray.com/kotlin/kotlin-eap’ }
3. Under dependencies add classpath(“com.android.tools.build:gradle:3.5.3”)
classpath “org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version”
our NativeModuleManager will look like thisNativeModuleManager.ktpackage com.nativemoduledemoimport com.facebook.react.bridge.Callback
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethodclass NativeModuleManager(context: ReactApplicationContext) : ReactContextBaseJavaModule(context) { override fun getName(): String {
return “NativeModuleManager”;
}
}
3. Exposing Native module:
We have implemented class that communicate with react-native, but we haven’t exposed the class to react native. We have to expose to reactnative with some annotation provided by react-native called @ReactMethod
NativeModuleManager.kt
class NativeModuleManager(context: ReactApplicationContext) : ReactContextBaseJavaModule(context) { override fun getConstants(): Map? {
val constants: MutableMap = HashMap()
constants[“message”] = “Hello from native code”
return constants
}
4. Registering Native Module:
We have to register native module with react native in android.we’ll add it to react package and register the package with react native
We
we’ll create a package to register and call it as NativeModuleManagerPackage.kt
The NativeModuleManagerPackage.kt will look like this
package com.nativemoduledemoimport android.view.View
import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModuleimport com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ReactShadowNode
import com.facebook.react.uimanager.ViewManager
import java.util.*
import kotlin.collections.ArrayListclass NativeModuleManagerPackage : ReactPackage {
override fun createViewManagers(p0: ReactApplicationContext): MutableList {
return Collections.emptyList()
} override fun createNativeModules(reactContext: ReactApplicationContext): MutableList {
val modules: MutableList = ArrayList()
modules.add(NativeModuleManager(reactContext))
return modules
}
}
For registering native package must be added to MainApplication.javaIn mainApplication.java add packages.add(NativeModuleManagerPackage())
Under getPackages(){}Accessing Native Modules
All Done!
Now we need to get the native module into our app.js
Import {NativeModules} from ‘react-native’
Console.log(NativeModules.NativeModuleManager)It will Log “message”:” Hello from native code”
Conclusion
Implementing Native modules in Android and IOS adds great advantages to React Native. we have great control on native API and as well as react API while using the same code base for Android and ios By adding some native code for functionality