create native android custom view with react native

Step 1-4, for any Android files they should be created or already exist at android/app/src/main/java/com/example/

1. Create a simple custom view in Android such as the following AdMobView.java, this is what will be showing on the UI.

import android.content.Context;
import android.graphics.Color;
import android.widget.FrameLayout;
import android.widget.TextView;
import androidx.annotation.NonNull;

public class AdMobView extends FrameLayout {

    private TextView textView;

    public AdMobView(@NonNull Context context) {
        super(context);
        this.setPadding(16,16,16,16);
        this.setBackgroundColor(Color.parseColor("#33B5FF"));

        this.textView = new TextView(context);
        this.addView(this.textView);
    }

    public void setText(String text) {
        this.textView.setText(text);
    }
}

2. Create a manager class for the custom view such as the following AdMobViewManager.java, this will initialize the custom view and work as a bridge between Android and React Native.

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.annotations.ReactProp;
import androidx.annotation.Nullable;

public class AdMobViewManager extends SimpleViewManager {

    public static final String REACT_CLASS = "AdMobView";
    ReactApplicationContext mCallerContext;

    public AdMobViewManager(ReactApplicationContext reactContext) {
        mCallerContext = reactContext;
    }

    @Override
    public String getName() {
        return REACT_CLASS;
    }

    @Override
    public AdMobView createViewInstance(ThemedReactContext context) {
        AdMobView adMobView = new AdMobView(context);
        return adMobView;
    }

    @ReactProp(name = "text")
    public void setText(AdMobView view, @Nullable String text) {
        view.setText(text);
    }

}

3. Create a package class to manage the native packages, if it is already there, then just add the modules.add(new AdMobViewManager(reactContext)); this to the createViewManagers function.

import com.codexpedia.nationalparkus.admob.AdMobModule;
import com.codexpedia.nationalparkus.admob.AdMobViewManager;
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.List;

public class MainPackage implements ReactPackage {

    @Override
    public List createViewManagers(ReactApplicationContext reactContext) {
        List modules = new ArrayList<>();
        modules.add(new AdMobViewManager(reactContext));

        return modules;
    }

    @Override
    public List createNativeModules(
            ReactApplicationContext reactContext) {
        List modules = new ArrayList<>();

        modules.add(new AdMobModule(reactContext));

        return modules;
    }

}

4. The MainPackage should be registered in the MainApplication.java like the following if it is not done yet.

@Override
protected List getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List packages = new PackageList(this).getPackages();
  packages.add(new MainPackage());

  // Packages that cannot be autolinked yet can be added manually here, for example:
  // packages.add(new MyReactNativePackage());
  return packages;
}

For any React Native files, anywhere you normally put your react native javascript files.
5. Create a file to export the native custom view from Android. NativeAdMobView.ts, remember always to export each native view in a single file without any other code such as the following, otherwise, you can run into error during hot reload such as “Tried to register two views with the same name AdMobView”

import { requireNativeComponent } from 'react-native';
const NativeAdMobView = requireNativeComponent('AdMobView');
export default NativeAdMobView;

6. Display the native view

Reference:
https://reactnative.dev/docs/native-components-android