Android Native UI Components documentation doesn't work

[rhalaly]

Description

I tried to implement your tutorial in Android Native UI Components document (link below).

I created a View Manager that contains a blue view:

package com.awesomeapp.customview

import android.graphics.Color
import android.view.View
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.SimpleViewManager
import com.facebook.react.uimanager.ThemedReactContext

class ReactImageManager(
    private val callerContext: ReactApplicationContext
) : SimpleViewManager<View>() {

    override fun getName() = REACT_CLASS

    companion object {
        const val REACT_CLASS = "RCTImageView2"
    }

    override fun createViewInstance(context: ThemedReactContext): View {
        val view = View(context)
        view.setBackgroundColor(Color.BLUE)
        return view
    }
}

A package:

package com.awesomeapp.customview

import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext

class ReactImagePackage: ReactPackage {
    override fun createViewManagers(
        reactContext: ReactApplicationContext
    ) = listOf(ReactImageManager(reactContext))

    override fun createNativeModules(
        reactContext: ReactApplicationContext
    ): MutableList<NativeModule> = mutableListOf()
}

Then registered the package in MainApplication:

@Override
protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
  // Packages that cannot be autolinked yet can be added manually here, for example:
  packages.add(new ReactImagePackage());
  return packages;
}

And wrapped in Typescript:

import { requireNativeComponent, ViewProps } from 'react-native';

interface MyCustomViewProps extends ViewProps {}

const MyCustomView = requireNativeComponent<MyCustomViewProps>('RCTImageView2');
export default MyCustomView;

But when I use it:

import React from 'react';
import { View, Text } from 'react-native';
import MyCustomView from './CustomView';

const CustomContainer: React.FC = () => {
  return (
    <View>
      <Text>Hi</Text>
      <MyCustomView />
      <Text>Hi</Text>
    </View>
  );
};

export default CustomContainer;

It doesn't appear in the DOM at all:

Documentation version

https://github.com/facebook/react-native-website/blob/da4bfe88aaa507bc9f58b5e669b9b462954069d3/docs/native-components-android.md