Building the custom Android module for React Native

Building the custom Android module for React Native

·

3 min read

Building the custom Android module for React Native

React Native applications have two sides (React Javascript side and Android side). Assume these two sides are two sides of a river. Obviously, You need a bridge to cross this river. React Native team itself built the bridge for major things like Camera, Fingerprint, Scanner. But they can’t cover every feature in Android. So, They gave us the tools to build our bridge.

I was using AsyncStorage to store the user preferences in my React Native app. But, The value stored by the AsyncStorage was not accessible from the Java layer of Android. So, I was starting my JavascriptCore whenever my background service needed the user preferences. Then we decided to store the user preferences in the Android’s Native Shared Preferences. I was searching for a bridge in Google and js.coach. But, There was no bridge to store the Shared Preferences from the React native layer. I decided to create one.

To view the final repo, Click here

Create First Module First, Create an AndroidManifest.xml file with your package name.

</manifest></span>

We have to create the Module by extending the ReactContextBaseModule. The first step is to override the name of the module.

@Override
public String getName(){
 return “SharedPreferences”;
}</span>

I have already created a Java functions to handle the data in Shared Preferences. Check the SharedHandler.java and SharedDataProvider.java to know how the Shared Preferences works inside the Java layer. Here, I have exposed three functions putSharedValue(key, value), getSharedValue(key) and clear(). These three functions can be accessed from our Module.

We have to annotate the function with @ReactMethod for react methods like

@ReactMethod
public void setItem(String key, String value) {
 SharedHandler.init(getReactApplicationContext());
 SharedDataProvider.putSharedValue(key,value);
}</span>

I have initialised the SharedHandler with the application context provided by getReactApplicationContext(). Then I can call the function to execute the particular task.

In the previous ReactMethod, We didn’t have the requirement to send back anything to the Javascript layer. When we want to get the value from Shared preferences, We should send callback. Sending callback can be done like follows

@ReactMethod
public void getItem(String key, Callback successCallback){
 SharedHandler.init(getReactApplicationContext());
 String value = SharedDataProvider.getSharedValue(key);
 successCallback.invoke(value);
}</span>

If we need to send a callback, then we should send extra parameter for SuccessCallback. The callback can be sent back to the Javascript layer using successCallback.invoke() function. If you need error callback too, You can just add one more parameter in the ReactMethod.

After creating the React Module, We have to register the module. If you didn’t register the module, then It can’t be accessed from the javascript layer. Shared Preferences module is ready. You can directly consume the API in your application, or you can publish it in NPM.

If you are publishing it in NPM, Users have to make few changes to build the java files inside their Android app. For the detailed explanation of the setup process, You can check the README.md file