Android native modules in React Native

[[176954]]

When developing Android apps with React Native, you may need to use modules that are not encapsulated by React Native. But you can write native modules in Java and then selectively expose public interfaces to React Native. Let's try it together!

What are we going to write?

At the time of writing this article, React Native includes an ImagePickerIOS component, but there is no corresponding ImagePicker component on the Android platform. We will now build a simple ImagePicker for Android that is roughly similar to ImagePickerIOS.

Writing an Android native module for React Native requires the following steps:

1. Create a ReactPackage, include multiple modules (Native and Javascript) together, and then reference it in the getPackages method in MainActivity.
2. Create a Java class that inherits ReactContextBaseJavaModule and implements the required interfaces, then register it to our ReactPackage.
3. Override the getName method of the above class, which will be used as the calling method name of Javascript.
4. Use @ReactMethod annotation to expose required public methods to JavaScript.
5. ***, import your modules via NativeModules in Javascript.

Let’s practice this together.

Create a ReactPackage

Launch AndroidStudio and navigate to MyApp/android/app/src/main/java/com/myapp/MainActivity.java. It should look like this:

 package com.myapp; 
 
 import com.facebook.react.ReactActivity;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.shell.MainReactPackage; 
 
 import java.util.Arrays;
 import java.util.List; 
 
 public class MainActivity extends ReactActivity { 
 
 @Override
    protected String getMainComponentName() {
 return   "MyApp" ;
 } 
 
 @Override
    protected boolean getUseDeveloperSupport() {
 return BuildConfig.DEBUG;
 } 
 
 @Override
    protected List<ReactPackage> getPackages() {
 return Arrays.<ReactPackage>asList(
            new MainReactPackage()
 );
 }
 }

Let's first import a package that has not yet been defined:

 import com.myapp.imagepicker.*; // import the package 
 
 public class MainActivity extends ReactActivity {
 @Override
    protected List<ReactPackage> getPackages() {
 return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new ImagePickerPackage() // include it in getPackages
 );
 }
 }

Now let's write that package. We'll create a new directory for it called imagepicker and write ImagePickerPackage:

 package com.myapp.imagepicker; 
 
 import com.facebook.react.ReactPackage;
 import com.facebook.react.bridge.JavaScriptModule;
 import com.facebook.react.bridge.NativeModule;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.uimanager.ViewManager; 
 
 import java.util.ArrayList;
 import java.util.Collections;
 import java.util.List; 
 
 public class ImagePickerPackage implements ReactPackage {
 @Override
 public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>(); 
 
        modules.add (new ImagePickerModule(reactContext)); 
 
 return modules;
 } 
 
 @Override
 public List<Class<? extends JavaScriptModule>> createJSModules() {
 return Collections.emptyList();
 } 
 
 @Override
 public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
 return Collections.emptyList();
 }
 }

Now we have created a package and included it in MainActivity.

Create a ReactContextBaseJavaModule

We will start by creating ImagePickerModule, which extends ReactContextBaseJavaModule.

 package com.myapp.imagepicker; 
 
 import com.facebook.react.bridge.ReactContextBaseJavaModule; 
 
 public class ImagePickerModule extends ReactContextBaseJavaModule {
 public ImagePickerModule(ReactApplicationContext reactContext) {
 super(reactContext);
 }
 }

This is a good start, in order for React Native to find our module from NativeModules, we need to override the getName method.

 @Override
 public String getName() {
 return   "ImagePicker" ;
 }

Now that we have a native module that can be imported by JavaScript code, let's make it do something interesting.

Exposure method

ImagePickerIOS defines an openSelectDialog method that can be passed a configuration object and callbacks for failure and success. Let's define a similar method in ImagePickerModule.

 import com.facebook.react.bridge.Callback;
 import com.facebook.react.bridge.ReadableMap; 
 
 public class ImagePickerModule extends ReactContextBaseJavaModule {
 @ReactMethod
 public void openSelectDialog(ReadableMap config, Callback successCallback, Callback cancelCallback) {
        Activity currentActivity = getCurrentActivity(); 
     
        if (currentActivity == null ) {
            cancelCallback.invoke( "Activity doesn't exist" );
 return ;
 }
 }
 }

Here we import Callback and ReadableMap from React Native to correspond to function and object in JavaScript. We annotate this method with @ReactMethod so that it can be referenced by JavaScript as part of ImagePicker.

In the method body we get the current activity, and if there is no activity, we call the cancel callback method. We now have a functioning method, but it doesn't do anything interesting yet. Let's use it to open the photo album.

 public class ImagePickerModule extends ReactContextBaseJavaModule {
    private static final int PICK_IMAGE = 1; 
 
    private Callback pickerSuccessCallback;
    private Callback pickerCancelCallback; 
 
 @ReactMethod
 public void openSelectDialog(ReadableMap config, Callback successCallback, Callback cancelCallback) {
        Activity currentActivity = getCurrentActivity(); 
 
        if (currentActivity == null ) {
            cancelCallback.invoke( "Activity doesn't exist" );
 return ;
 } 
 
        pickerSuccessCallback = successCallback;
        pickerCancelCallback = cancelCallback; 
 
 try {
            final Intent galleryIntent = new Intent(); 
 
            galleryIntent.setType( "image/*" );
            galleryIntent.setAction(Intent.ACTION_GET_CONTENT); 
 
            final Intent chooserIntent = Intent.createChooser(galleryIntent, "Pick an image" ); 
 
            currentActivity.startActivityForResult(chooserIntent, PICK_IMAGE);
        } catch (Exception e) {
            cancelCallback.invoke(e);
 }
 }
 }

First, we set up the callback, then we create an Intent and pass it to startActivityForResult. Finally, we wrap everything in a try/catch block to handle any exceptions that might occur.

When you call openSelectDialog, you should be able to see an album. However, when you select a picture, the album does not do anything. In order to be able to process the image data, we need to handle the return value of the activity in the module.

First, we need to add the activity event listener to the react context:

 public class ImagePickerModule extends ReactContextBaseJavaModule implements ActivityEventListener {
 public ImagePickerModule(ReactApplicationContext reactContext) {
 super(reactContext);
        reactContext.addActivityEventListener(this);
 }
 }

Now we can get the data returned by the album.

 @Override
 public void onActivityResult(final int requestCode, final int resultCode, final Intent intent) {
    if (pickerSuccessCallback != null ) {
        if (resultCode == Activity.RESULT_CANCELED) {
            pickerCancelCallback.invoke( "ImagePicker was canceled" );
        } else if (resultCode == Activity.RESULT_OK) {
            Uri uri = intent.getData(); 
 
            if (uri == null ) {
                pickerCancelCallback.invoke( "No image data found" );
 } else {
 try {
                    pickerSuccessCallback.invoke(uri);
                } catch (Exception e) {
                    pickerCancelCallback.invoke( "No image data found" );
 }
 }
 }
 }
 }

Here we should be able to get the image URI through the success callback.

 NativeModules.ImagePicker.openSelectDialog(
 {}, // no config yet
  (uri) => { console.log(uri) },
  (error) => { console.log(error) }
 )

To roughly mimic the behavior of ImagePickerIOS, we can allow the user to select an image, video, or open the camera directly. The writing of these functions is basically the same as above, and we will leave it as an exercise for the reader.