How to use Native Modules in React Native + Android - Hybrid Apps
Well, when you are developing hybrid apps (React Native for some modules and native android for rest of the module) then you must have came up with this situation that How can I use the native android functionality / classes like SharedPreference or Utilities class etc ?
Well, It is really simple with Native Module. You can write your own app specific Native Modules. In this blog we will learn how to create one. For this blog our aim would be to access SharedPreference of Native Android app.
Before getting started please make sure that you have the following setup ready in your computer.
1. Android Studio
2. React Native setup
3. An existing hybrid (React Native + Android) project
If you have existing project only in native Android then follow this blog to setup the React Native.
Step 1 : Create the module
In your Android Studio, create a new Java file SharedPrefereneModule.java at your convenient path and extend it with ReactContextBaseJavaModule. There is a one abstract method getName() of this super class which you need to override. This method returns name of the module by which you can access it from React Native. Also, you need a constructor with React Application Context.
Here, we have also created an instance of AppSharedPreferenceManager (a class which handles shared preferences) which we will need in next steps.
Note: If you don’t want to do SharedPreference operations in other class then you can simply create SharedPreference instance instead here of AppSharedPreferenceManager.
Step 2: Create the packager
Now we need packager to provide this module to React Instance Manager, so Create a new java file SharedPreferencePackager.java at your convenient path and extend it with ReactPackage. This class has three abstract methods which we need to override. See the following code for it.
Here, we have added SharedPrefereneModule which we created in first step to Native Module list. This packager can also be used for Native Ui Components and JS modules, but in this blog we are only focusing on Native Modules so we are returning empty list in other two methods.
Step 3 : Add package to React Instance Manager
As we have created the SharePreferencePackager now we are ready to add it in React Instance Manager. To do so open your ReactActivity and find the reactInstanceManager initialization and add SharePreferencePackager.
This react instance manager you won’t be able to find if you have created project using react-native init . In that case you need to add this package inside getPackages() method.
Step 4: Add methods and usage
Now we are ready with the Native Module. We need to create methods which can read and write the SharedPreference of native android. So open the SharedPreferenceModule.java created in step 1. Add the methods required for your application with a @ReactMethod annotation. Here is a one sample method.
You must be worried about two thing in the above method.
1. Return type is void
2. What the hack is Callback?
So, one thing you need to understand is that you are calling this methods from React Native so you cannot simply return anything just by changing the return type from void to something like String or int or boolean. For the native Android to React Native communication the Callbacks are used. Callback is nothing but javascript callbacks just like onTextChange of <Text /> tag. You can accept as many callbacks as you want in this method (like successCallback, failureCallback etc.). When you have data you can invoke the callback and the rest will be handled by JS.
Here is the code snippet in React Native to use the created Native Module. As you see here we are passing one callback. When we have mpin ready at Java side we will invoke the callback and the JS console will print this mpin.
If you like this blog please click on heart ❤ to support me for reaching as many people as I can. In case of any queries you can comment below or drop an email on rajsuvariya@gmail.com.
Next, I will be writing blog on using Android Native views inside React Native. Follow me and stay tuned.
#ReactNative #Android #NativeModules #HybridApps
