Using Native UI Component with React Native (Android version)

I wanted to use the components of the third-party Native SDK with React Native, so I looked it up. Even if I can read English, the formula is difficult to understand because it is insufficiently explained or superfluous. I'm new to Android Java, so don't be afraid. Various settings are required for setting properties and using other APIs. Click here for iOS.

Official documentation

https://facebook.github.io/react-native/docs/native-components-android.html

The simplest code

1. Create a Manager class that returns a Native Component Name and View instance.
2. Create a Package that organizes Manager classes (and other Java modules).
3. Register Package in MainApplication.java.
4. Specify the name given in the Manager class and call it from JavaScript.

ExampleManager.java

package com.example;

import android.widget.TextView;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;

public class ExampleManager extends SimpleViewManager<TextView> {
    public static final String REACT_CLASS = "Example";

    // Component name that will be called from JavaScript
    @Override
    public String getName() {
        return REACT_CLASS;
    }

    // Return the view component instantiated with Activity context
    @Override
    public TextView createViewInstance(ThemedReactContext reactContext) {
        TextView mTextView = new TextView(reactContext.getCurrentActivity());
        return mTextView;
    }
}

ExamplePackage.java

package com.example;

import java.util.Arrays;
import java.util.List;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

public class ExamplePackage implements ReactPackage {
    // Expose Java components to JavaScript
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
      return Arrays.<ViewManager>asList(
          new ExampleManager()
      );
    }
}

MainApplication.java

public class MainApplication extends Application implements ReactApplication {

    ...

    // Register the new package
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new ExamplePackage() // New
      );
    }

    ...

}

App.js

import React from 'react';
import { requireNativeComponent } from 'react-native';

const Example = requireNativeComponent('Example', null);

export default class App extends React.Component {
  render() {
    return (
      <Example />
    );
  }
});