From baded0f9e3e2be43da0c046bd35f4a69362cbb45 Mon Sep 17 00:00:00 2001 From: Sota Ogo Date: Tue, 7 Dec 2021 16:08:31 -0800 Subject: [PATCH] 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 | 43 +++++++++++++++++++ packages/rn-tester/Podfile | 3 ++ packages/rn-tester/Podfile.lock | 13 +++++- .../NewArchitecture/NewArchitectureExample.js | 3 +- .../rn-tester/js/utils/RNTesterList.ios.js | 6 +++ packages/rn-tester/package.json | 7 +++ 6 files changed, 73 insertions(+), 2 deletions(-) diff --git a/packages/rn-tester/BUCK b/packages/rn-tester/BUCK index 3e577b4b788..6fdf40b6c76 100644 --- a/packages/rn-tester/BUCK +++ b/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", + ], +) diff --git a/packages/rn-tester/Podfile b/packages/rn-tester/Podfile index ea40fde8e52..a01cf6360e2 100644 --- a/packages/rn-tester/Podfile +++ b/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 diff --git a/packages/rn-tester/Podfile.lock b/packages/rn-tester/Podfile.lock index ae06750208a..23dbb9fc53a 100644 --- a/packages/rn-tester/Podfile.lock +++ b/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 diff --git a/packages/rn-tester/js/examples/NewArchitecture/NewArchitectureExample.js b/packages/rn-tester/js/examples/NewArchitecture/NewArchitectureExample.js index ccdd583000a..924a65360dd 100644 --- a/packages/rn-tester/js/examples/NewArchitecture/NewArchitectureExample.js +++ b/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', diff --git a/packages/rn-tester/js/utils/RNTesterList.ios.js b/packages/rn-tester/js/utils/RNTesterList.ios.js index 633c964ae72..c3f99a858e1 100644 --- a/packages/rn-tester/js/utils/RNTesterList.ios.js +++ b/packages/rn-tester/js/utils/RNTesterList.ios.js @@ -153,6 +153,12 @@ const Components: Array = [ category: 'Basic', supportsTVOS: true, }, + { + key: 'NewArchitectureExample', + category: 'UI', + module: require('../examples/NewArchitecture/NewArchitectureExample'), + supportsTVOS: false, + }, ]; const APIs: Array = [ diff --git a/packages/rn-tester/package.json b/packages/rn-tester/package.json index f1acb0f4903..e9f45f46ce2 100644 --- a/packages/rn-tester/package.json +++ b/packages/rn-tester/package.json @@ -30,6 +30,13 @@ "ios": {}, "android": {}, "jsSrcsDir": "NativeModuleExample" + }, + { + "name": "MyNativeViewSpec", + "type": "components", + "ios": {}, + "android": {}, + "jsSrcsDir": "NativeComponentExample/js" } ] }