Expose UnstableReactLegacyComponentDescriptor inside react/renderer/components/legacyviewmanagerinterop (#36344)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/36344

This adds the `UnstableReactLegacyComponentDescriptor`, part of the Fabric Interop Layer,
inside the `react/renderer/components/legacyviewmanagerinterop` module so that it can be included by the user externally.

If we wish to place it somewhere else, I'm more than happy to move it around.

Changelog:
[Internal] [Changed] - Expose UnstableReactLegacyComponentDescriptor inside react/renderer/components/legacyviewmanagerinterop

Reviewed By: mdvacca, cipolleschi

Differential Revision: D43500868

fbshipit-source-id: acfcd89efc42ff7a4ee6cb0a1cbd71d69f79721f

ReactAndroid/build.gradle

@@ -120,6 +120,10 @@ final def preparePrefab = tasks.register("preparePrefab", PreparePrefabHeadersTa
                 "rrc_view",
                 new Pair("../ReactCommon/react/renderer/components/view/", "react/renderer/components/view/")
             ),
+            new PrefabPreprocessingEntry(
+                "rrc_legacyviewmanagerinterop",
+                new Pair("../ReactCommon/react/renderer/components/legacyviewmanagerinterop/", "react/renderer/components/legacyviewmanagerinterop/")
+            ),
             new PrefabPreprocessingEntry(
                 "jsi",
                 new Pair("../ReactCommon/jsi/", "")
@@ -485,6 +489,7 @@ android {
                     "rrc_image",
                     "rrc_root",
                     "rrc_view",
+                    "rrc_legacyviewmanagerinterop",
                     "jsi",
                     "glog",
                     "fabricjni",
@@ -586,6 +591,9 @@ android {
         rrc_view {
             headers(new File(prefabHeadersDir, "rrc_view").absolutePath)
         }
+        rrc_legacyviewmanagerinterop {
+            headers(new File(prefabHeadersDir, "rrc_legacyviewmanagerinterop").absolutePath)
+        }
         jsi {
             headers(new File(prefabHeadersDir, "jsi").absolutePath)
         }

ReactAndroid/cmake-utils/ReactNative-application.cmake

@@ -69,6 +69,7 @@ add_library(folly_runtime ALIAS ReactAndroid::folly_runtime)
 add_library(react_nativemodule_core ALIAS ReactAndroid::react_nativemodule_core)
 add_library(react_render_imagemanager ALIAS ReactAndroid::react_render_imagemanager)
 add_library(rrc_image ALIAS ReactAndroid::rrc_image)
+add_library(rrc_legacyviewmanagerinterop ALIAS ReactAndroid::rrc_legacyviewmanagerinterop)
 
 find_package(fbjni REQUIRED CONFIG)
 add_library(fbjni ALIAS fbjni::fbjni)
@@ -91,6 +92,7 @@ target_link_libraries(${CMAKE_PROJECT_NAME}
         react_render_mapbuffer              # prefab ready
         rrc_image                           # prefab ready
         rrc_view                            # prefab ready
+        rrc_legacyviewmanagerinterop        # prefab ready
         runtimeexecutor                     # prefab ready
         turbomodulejsijni                   # prefab ready
         yoga)                               # prefab ready

ReactAndroid/src/main/jni/CMakeLists.txt

@@ -87,6 +87,7 @@ add_react_common_subdir(react/renderer/components/textinput)
 add_react_common_subdir(react/renderer/components/progressbar)
 add_react_common_subdir(react/renderer/components/root)
 add_react_common_subdir(react/renderer/components/image)
+add_react_common_subdir(react/renderer/components/legacyviewmanagerinterop)
 add_react_common_subdir(react/renderer/componentregistry/native)
 add_react_common_subdir(react/renderer/components/text)
 add_react_common_subdir(react/renderer/components/unimplementedview)

ReactCommon/react/renderer/components/legacyviewmanagerinterop/CMakeLists.txt

@@ -0,0 +1,31 @@
+# Copyright (c) Meta Platforms, Inc. and affiliates.
+#
+# This source code is licensed under the MIT license found in the
+# LICENSE file in the root directory of this source tree.
+
+cmake_minimum_required(VERSION 3.13)
+set(CMAKE_VERBOSE_MAKEFILE on)
+
+add_compile_options(
+        -fexceptions
+        -frtti
+        -std=c++17
+        -Wall
+        -Wpedantic
+        -Wno-gnu-zero-variadic-macro-arguments
+        -DLOG_TAG=\"Fabric\")
+
+file(GLOB rrc_legacyviewmanagerinterop_SRC CONFIGURE_DEPENDS *.cpp)
+add_library(rrc_legacyviewmanagerinterop SHARED ${rrc_legacyviewmanagerinterop_SRC})
+
+target_include_directories(rrc_legacyviewmanagerinterop PUBLIC ${REACT_COMMON_DIR})
+
+target_link_libraries(rrc_legacyviewmanagerinterop
+        glog
+        glog_init
+        folly_runtime
+        jsi
+        react_render_core
+        rrc_view
+        yoga
+)

ReactCommon/react/renderer/components/legacyviewmanagerinterop/UnstableLegacyViewManagerInteropComponentDescriptor.h

@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <react/renderer/components/view/ViewProps.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+
+namespace facebook {
+namespace react {
+
+/*
+ * Descriptor for <UnstableReactLegacyComponent> component.
+ *
+ * This component is part of the Fabric Interop Layer and is subject to future
+ * changes (hence the "Unstable" prefix).
+ */
+template <const char *concreteComponentName>
+class UnstableLegacyViewManagerInteropComponentDescriptor
+    : public ConcreteComponentDescriptor<
+          ConcreteViewShadowNode<concreteComponentName, ViewProps>> {
+ public:
+  UnstableLegacyViewManagerInteropComponentDescriptor<concreteComponentName>(
+      ComponentDescriptorParameters const &parameters)
+      : ConcreteComponentDescriptor<
+            ConcreteViewShadowNode<concreteComponentName, ViewProps>>(
+            parameters) {}
+
+ private:
+};
+
+} // namespace react
+} // namespace facebook

packages/rn-tester/NativeComponentExample/js/MyLegacyViewNativeComponent.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {HostComponent} from 'react-native';
+import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
+import {requireNativeComponent} from 'react-native';
+
+type NativeProps = $ReadOnly<{|
+  ...ViewProps,
+  opacity?: number,
+  color?: string,
+|}>;
+
+export type MyLegacyViewType = HostComponent<NativeProps>;
+
+export default (requireNativeComponent(
+  'RNTMyLegacyNativeView',
+): HostComponent<NativeProps>);

packages/rn-tester/NativeComponentExample/js/MyNativeView.js

@@ -10,10 +10,11 @@
 
 import * as React from 'react';
 import {useRef, useState} from 'react';
-import {View, Button} from 'react-native';
+import {View, Button, Text} from 'react-native';
 import RNTMyNativeView, {
   Commands as RNTMyNativeViewCommands,
 } from './MyNativeViewNativeComponent';
+import RNTMyLegacyNativeView from './MyLegacyViewNativeComponent';
 import type {MyNativeViewType} from './MyNativeViewNativeComponent';
 
 const colors = [
@@ -29,18 +30,27 @@ const colors = [
 export default function MyNativeView(props: {}): React.Node {
   const ref = useRef<React.ElementRef<MyNativeViewType> | null>(null);
   const [opacity, setOpacity] = useState(1.0);
+  const [color, setColor] = useState('#000000');
   return (
     <View style={{flex: 1}}>
+      <Text style={{color: 'red'}}>Fabric View</Text>
       <RNTMyNativeView ref={ref} style={{flex: 1}} opacity={opacity} />
+      <Text style={{color: 'red'}}>Legacy View</Text>
+      <RNTMyLegacyNativeView
+        style={{flex: 1}}
+        opacity={opacity}
+        color={color}
+      />
       <Button
         title="Change Background"
         onPress={() => {
-          if (ref.current) {
-            RNTMyNativeViewCommands.callNativeMethodToChangeBackgroundColor(
-              ref.current,
-              colors[Math.floor(Math.random() * 5)],
-            );
-          }
+          let newColor = colors[Math.floor(Math.random() * 5)];
+          setColor(newColor);
+          RNTMyNativeViewCommands.callNativeMethodToChangeBackgroundColor(
+            // $FlowFixMe[incompatible-call]
+            ref.current,
+            newColor,
+          );
         }}
       />
       <Button

packages/rn-tester/android/app/src/main/java/com/facebook/react/uiapp/RNTesterApplication.java

@@ -22,10 +22,12 @@ import com.facebook.react.defaults.DefaultReactNativeHost;
 import com.facebook.react.module.model.ReactModuleInfo;
 import com.facebook.react.module.model.ReactModuleInfoProvider;
 import com.facebook.react.shell.MainReactPackage;
+import com.facebook.react.uiapp.component.MyLegacyViewManager;
 import com.facebook.react.uiapp.component.MyNativeViewManager;
 import com.facebook.react.uimanager.ViewManager;
 import com.facebook.react.views.text.ReactFontManager;
 import com.facebook.soloader.SoLoader;
+import java.util.ArrayList;
 import java.util.Arrays;
 import java.util.Collections;
 import java.util.HashMap;
@@ -106,7 +108,10 @@ public class RNTesterApplication extends Application implements ReactApplication
                 @Override
                 public List<ViewManager> createViewManagers(
                     @NonNull ReactApplicationContext reactContext) {
-                  return Collections.singletonList(new MyNativeViewManager());
+                  List<ViewManager> viewManagers = new ArrayList<>();
+                  viewManagers.add(new MyNativeViewManager());
+                  viewManagers.add(new MyLegacyViewManager(reactContext));
+                  return viewManagers;
                 }
               });
         }

packages/rn-tester/android/app/src/main/java/com/facebook/react/uiapp/component/MyLegacyViewManager.java

@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.uiapp.component;
+
+import android.graphics.Color;
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.module.annotations.ReactModule;
+import com.facebook.react.uimanager.SimpleViewManager;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.ViewProps;
+import com.facebook.react.uimanager.annotations.ReactProp;
+
+/** Legacy View manager (non Fabric compatible) for {@link MyNativeView} components. */
+@ReactModule(name = MyLegacyViewManager.REACT_CLASS)
+public class MyLegacyViewManager extends SimpleViewManager<MyNativeView> {
+
+  public static final String REACT_CLASS = "RNTMyLegacyNativeView";
+  private final ReactApplicationContext mCallerContext;
+
+  public MyLegacyViewManager(ReactApplicationContext reactContext) {
+    mCallerContext = reactContext;
+  }
+
+  @NonNull
+  @Override
+  public String getName() {
+    return REACT_CLASS;
+  }
+
+  @NonNull
+  @Override
+  protected MyNativeView createViewInstance(@NonNull ThemedReactContext reactContext) {
+    MyNativeView view = new MyNativeView(reactContext);
+    view.setBackgroundColor(Color.RED);
+    return view;
+  }
+
+  @Override
+  @ReactProp(name = ViewProps.OPACITY, defaultFloat = 1.f)
+  public void setOpacity(@NonNull MyNativeView view, float opacity) {
+    super.setOpacity(view, opacity);
+  }
+
+  @ReactProp(name = ViewProps.COLOR)
+  public void setColor(@NonNull MyNativeView view, @Nullable String color) {
+    view.setBackgroundColor(Color.parseColor(color));
+  }
+}

packages/rn-tester/android/app/src/main/jni/OnLoad.cpp

@@ -13,15 +13,21 @@
 #include <fbjni/fbjni.h>
 #include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
 #include <react/renderer/components/AppSpecs/ComponentDescriptors.h>
+#include <react/renderer/components/legacyviewmanagerinterop/UnstableLegacyViewManagerInteropComponentDescriptor.h>
 #include <rncore.h>
 
 namespace facebook {
 namespace react {
 
+extern const char RNTMyNativeViewName[] = "RNTMyLegacyNativeView";
+
 void registerComponents(
     std::shared_ptr<ComponentDescriptorProviderRegistry const> registry) {
   registry->add(concreteComponentDescriptorProvider<
                 RNTMyNativeViewComponentDescriptor>());
+  registry->add(concreteComponentDescriptorProvider<
+                UnstableLegacyViewManagerInteropComponentDescriptor<
+                    RNTMyNativeViewName>>());
 }
 
 std::shared_ptr<TurboModule> cxxModuleProvider(