How to use Android code in React Native

When you are developing Hybrid Apps then you must have come up with this situation that How can I use the native code in React Native?

In the previous tutorial, we learned “How to use iOS code in React Native”. And now in this tutorial, we learn “How to use Android code in React Native”.

So let’s see, how to use native code in react native. Here we use android code in react native. So, we need to create and bridge which will contain our components (TextView, Image, anything we want).

We will need to work in Android Studio, so let’s open up our project there.

Bridge Container View

Step 1: Create your activity

Steps to create activity:-

1. Right-click on the “./app/java/com/project_name” directory and click “New” then select “Activity” and then select “Empty Activity”.
2. Type “Native UI” in the activity name field and click “Finish”.

Step 2: Add you custom UI in “.XML” file

Steps to add custom UI :-

1. Open “activity_native_ui.xml” from “./app/res/layout”
2. Add simple “TextView” in XML file.
3. Add the following code in “android.support.constraint.ConstraintLayout” tag :

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Manish Ahire"
    android:textSize="40dp"/>

Step 3: Create the module

Steps to create module :-

1. Right click on the “./app/java/com/project_name” directory and click “New” and then select “Java Class”.
2. Type “ReactModule” in name field and click “OK”
3. Double click on the “ReactModule” and replace the code with :

package com.your_project_name;

import android.content.Intent;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class ReactModule extends ReactContextBaseJavaModule {
    ReactModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }
    @Override
    public void initialize() {
        super.initialize();
    }
    /**
     * @return the name of this module. This will be the name used to {@code require()} this module
     * from JavaScript.
     */
    @Override
    public String getName() {
        return "NativeUI";
    }

    @ReactMethod
    void navigateToExample() {
        ReactApplicationContext context = getReactApplicationContext();
        Intent intent = new Intent(context, NativeUI.class);
        context.startActivity(intent);
    }
}

Step 4: Create the packager

Steps to create packager :-

1. click on the “./app/java/com/project_name” directory and click “New” and then select “Java Class”.
2. Type “ReactNativePackager” in name field and click “OK”
3. Double click on the “ReactNativePackager” and replace the code with :

package com.your_project_name;
import com.facebook.react.ReactPackage;
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 ReactNativePackager  implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new ReactModule(reactContext));
        return modules;
    }
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

Step 5: Add “ReactNativePackager” in “MainApplication.java” file

1. Open the “MainApplication.java”
2. Replace the “getPackages()” method with :

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      new ReactNativePackager()
  );
}

Render The View

Now let’s open up your .js file and add “NativeModules” import:

import { NativeModules } from 'react-native'

Then after the imports, let’s get access the native UI like this:

NativeModules.NativeUI.navigateToExample()

Save the file and run your project. You should see our view rendered:

Now you can use any native UI in react native.

Thank you,

Happy Coding 😊