Add the example fabric component to RN Tester for iOS

Summary:
This diff adds a new architecture example to RN Tester for the iOS App

Changelog: [internal]

Reviewed By: hramos

Differential Revision: D32128979

fbshipit-source-id: b008671553065f4965ba332ac06e01f54d70b331

packages/rn-tester/BUCK

@@ -14,6 +14,7 @@ load(
     "YOGA_APPLE_TARGET",
     "js_glob",
     "make_resource_glob",
+    "react_fabric_component_plugin_provider",
     "react_module_plugin_providers",
     "rn_apple_library",
     "rn_extra_build_flags",
@@ -59,7 +60,9 @@ rn_library(
             "js/examples/WebSocket/websocket_test_server.js",
         ],
     ),
+    codegen_components = True,
     labels = ["supermodule:xplat/default/public.react_native.playground"],
+    native_component_spec_name = "MyNativeViewSpec",
     skip_processors = True,
     visibility = ["PUBLIC"],
     deps = [
@@ -77,6 +80,9 @@ fb_native.filegroup(
         [
             "**/*NativeComponent.js",
         ],
+        exclude = [
+            "NativeComponentExample/**/*",
+        ],
     ),
     visibility = ["PUBLIC"],
 )
@@ -274,3 +280,40 @@ rn_apple_library(
         YOGA_APPLE_TARGET,
     ],
 )
+
+rn_xplat_cxx_library2(
+    name = "NativeComponentExample",
+    plugins_only = True,
+    srcs = glob(
+        [
+            "NativeComponentExample/ios/*.m",
+            "NativeComponentExample/ios/*.mm",
+        ],
+    ),
+    headers = glob(
+        [
+            "NativeComponentExample/ios/*.h",
+        ],
+    ),
+    header_namespace = "",
+    compiler_flags = [
+        "-fexceptions",
+        "-frtti",
+        "-std=c++17",
+        "-Wall",
+    ],
+    contacts = ["oncall+react_native@xmail.facebook.com"],
+    labels = [
+        "supermodule:xplat/default/public.react_native.infra",
+    ],
+    plugins = [
+        react_fabric_component_plugin_provider("RNTMyNativeView", "RNTMyNativeViewCls"),
+    ],
+    plugins_header = "RCTFabricComponentsPlugins.h",
+    reexport_all_header_dependencies = False,
+    visibility = ["PUBLIC"],
+    deps = [
+        ":generated_components-MyNativeViewSpec",
+        "//xplat/js/react-native-github:RCTFabricComponentViewsBase",
+    ],
+)

packages/rn-tester/Podfile

@@ -48,6 +48,9 @@ def pods(options = {})
 
   # RNTester native modules and components
   pod 'ScreenshotManager', :path => "NativeModuleExample"
+  if fabric_enabled
+    pod 'MyNativeView', :path => "NativeComponentExample"
+  end
 end
 
 target 'RNTester' do

packages/rn-tester/Podfile.lock

@@ -73,6 +73,13 @@ PODS:
   - fmt (6.2.1)
   - glog (0.3.5)
   - libevent (2.1.12)
+  - MyNativeView (0.0.1):
+    - RCTRequired
+    - RCTTypeSafety
+    - React
+    - React-Codegen
+    - React-RCTFabric
+    - ReactCommon/turbomodule/core
   - OpenSSL-Universal (1.1.180)
   - RCT-Folly (2021.06.28.00-v2):
     - boost
@@ -741,6 +748,7 @@ DEPENDENCIES:
   - FlipperKit/FlipperKitUserDefaultsPlugin (= 0.99.0)
   - FlipperKit/SKIOSNetworkPlugin (= 0.99.0)
   - glog (from `../../third-party-podspecs/glog.podspec`)
+  - MyNativeView (from `NativeComponentExample`)
   - OpenSSL-Universal (= 1.1.180)
   - RCT-Folly (from `../../third-party-podspecs/RCT-Folly.podspec`)
   - RCT-Folly/Fabric (from `../../third-party-podspecs/RCT-Folly.podspec`)
@@ -809,6 +817,8 @@ EXTERNAL SOURCES:
     :path: "../../React/FBReactNativeSpec"
   glog:
     :podspec: "../../third-party-podspecs/glog.podspec"
+  MyNativeView:
+    :path: NativeComponentExample
   RCT-Folly:
     :podspec: "../../third-party-podspecs/RCT-Folly.podspec"
   RCTRequired:
@@ -894,6 +904,7 @@ SPEC CHECKSUMS:
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
   glog: c10b67b343303f51715e5c5eedb18a41402f350a
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
+  MyNativeView: 4eaeecdc16568e81e702ef0a901127823d1ddc80
   OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b
   RCT-Folly: 803a9cfd78114b2ec0f140cfa6fa2a6bafb2d685
   RCTRequired: af2d6080a4b9ba0885b28ca78879a92066c71cab
@@ -930,6 +941,6 @@ SPEC CHECKSUMS:
   Yoga: c0d06f5380d34e939f55420669a60fe08b79bd75
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: 56348fb590e835e25615af889a5cad2d5b227480
+PODFILE CHECKSUM: 5c08bc01a92babb1f26302f610931c69b5f5785d
 
 COCOAPODS: 1.11.2

packages/rn-tester/js/examples/NewArchitecture/NewArchitectureExample.js

@@ -14,7 +14,8 @@ import * as React from 'react';
 import MyNativeView from '../../../NativeComponentExample/js/MyNativeView';
 
 exports.title = 'New Architecture Examples';
-exports.description = 'Test a component in the New Architecture';
+exports.description =
+  'Simple component using the new architecture. Fabric must be enabled.';
 exports.examples = [
   {
     title: 'New Architecture Renderer',

packages/rn-tester/js/utils/RNTesterList.ios.js

@@ -153,6 +153,12 @@ const Components: Array<RNTesterModuleInfo> = [
     category: 'Basic',
     supportsTVOS: true,
   },
+  {
+    key: 'NewArchitectureExample',
+    category: 'UI',
+    module: require('../examples/NewArchitecture/NewArchitectureExample'),
+    supportsTVOS: false,
+  },
 ];
 
 const APIs: Array<RNTesterModuleInfo> = [

packages/rn-tester/package.json

@@ -30,6 +30,13 @@
         "ios": {},
         "android": {},
         "jsSrcsDir": "NativeModuleExample"
+      },
+      {
+        "name": "MyNativeViewSpec",
+        "type": "components",
+        "ios": {},
+        "android": {},
+        "jsSrcsDir": "NativeComponentExample/js"
       }
     ]
   }