How to use Android code in React Native

When you are developing Hybrid Apps, you must have come up with this situation: 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 a bridge containing our components (TextView, Image, anything we want).

We 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 a simple “TextView” in the XML file.
3. Add the following code in the “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 a module:-

1. Right-click on the “./app/java/com/project_name” directory and click “New” and then select “Java Class”.
2. Type “ReactModule” in the 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 a packager:-

1. click on the “./app/java/com/project_name” directory and click “New” and then select “Java Class”.
2. Type “ReactNativePackager” in the 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 to 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.

Stay Connected🔔

Thank you for reading until the end. Before you go:

• 👏 Please consider clapping and following me!
• 🔗 Follow on LinkedIn | GitHub
• 📝 More content at mobodevstuff.com
• 🎨 Check out my portfolio at manishahire.com