Add Examples for Direct Manipulation in the Interop Layer

Summary: This change add to RNTester examples of a legacy Native Component, loaded in the New Architecture through the Interop Layer, that uses the APIs described in the [Direct Manipulation](https://reactnative.dev/docs/direct-manipulation) sectioon of the website. ## Changelog: [iOS][Added] - Added examples of direct manipulation Reviewed By: sammy-SC Differential Revision: D43978674 fbshipit-source-id: d8366a7046d1110f1378d7a2c93b53869c8de072
facebook · Mar 28, 2023 · 901bee1 · 901bee1
1 parent ea65af1
commit 901bee1
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 20 deletions.
diff --git a/packages/react-native/Libraries/ReactNative/UIManager.js b/packages/react-native/Libraries/ReactNative/UIManager.js
@@ -9,7 +9,6 @@
  */
 
 import type {RootTag} from '../Types/RootTagTypes';
-import type {Spec as FabricUIManagerSpec} from './FabricUIManager';
 import type {Spec} from './NativeUIManager';
 
 import {getFabricUIManager} from './FabricUIManager';

diff --git a/packages/rn-tester/NativeComponentExample/ios/RNTMyLegacyNativeViewManager.mm b/packages/rn-tester/NativeComponentExample/ios/RNTMyLegacyNativeViewManager.mm
@@ -30,6 +30,13 @@ + (BOOL)requiresMainQueueSetup
 
 RCT_EXPORT_VIEW_PROPERTY(onColorChanged, RCTBubblingEventBlock)
 
+RCT_CUSTOM_VIEW_PROPERTY(cornerRadius, CGFloat, RNTLegacyView)
+{
+  view.clipsToBounds = true;
+  NSNumber *cornerRadius = (NSNumber *)json;
+  view.layer.cornerRadius = [cornerRadius floatValue];
+}
+
 RCT_EXPORT_METHOD(changeBackgroundColor : (nonnull NSNumber *)reactTag color : (NSString *)color)
 {
   [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {

diff --git a/packages/rn-tester/NativeComponentExample/js/MyNativeView.js b/packages/rn-tester/NativeComponentExample/js/MyNativeView.js
@@ -29,6 +29,8 @@ const colors = [
   '#000033',
 ];
 
+const cornerRadiuses = [0, 20, 40, 60, 80, 100, 120];
+
 class HSBA {
   hue: number;
   saturation: number;
@@ -52,14 +54,36 @@ class HSBA {
   }
 }
 
+type MeasureStruct = {
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+};
+
+const MeasureStructZero: MeasureStruct = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+};
+
 // This is an example component that migrates to use the new architecture.
 export default function MyNativeView(props: {}): React.Node {
+  const containerRef = useRef<typeof View | null>(null);
   const ref = useRef<React.ElementRef<MyNativeViewType> | null>(null);
   const legacyRef = useRef<React.ElementRef<MyLegacyViewType> | null>(null);
   const [opacity, setOpacity] = useState(1.0);
   const [hsba, setHsba] = useState<HSBA>(new HSBA());
+  const [cornerRadiusIndex, setCornerRadiusIndex] = useState<number>(0);
+  const [legacyMeasure, setLegacyMeasure] =
+    useState<MeasureStruct>(MeasureStructZero);
+  const [legacyMeasureInWindow, setLegacyMeasureInWindow] =
+    useState<MeasureStruct>(MeasureStructZero);
+  const [legacyMeasureLayout, setLegacyMeasureLayout] =
+    useState<MeasureStruct>(MeasureStructZero);
   return (
-    <View style={{flex: 1}}>
+    <View ref={containerRef} 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>
@@ -108,6 +132,52 @@ export default function MyNativeView(props: {}): React.Node {
           ref.current?.measure((x, y, width, height) => {
             console.log(x, y, width, height);
           });
+
+          legacyRef.current?.measure((x, y, width, height) => {
+            setLegacyMeasure({x, y, width, height});
+          });
+          legacyRef.current?.measureInWindow((x, y, width, height) => {
+            setLegacyMeasureInWindow({x, y, width, height});
+          });
+
+          if (containerRef.current) {
+            legacyRef.current?.measureLayout(
+              // $FlowFixMe[incompatible-call]
+              containerRef.current,
+              (x, y, width, height) => {
+                setLegacyMeasureLayout({x, y, width, height});
+              },
+            );
+          }
+        }}
+      />
+
+      <Text>Interop Layer Measurements:</Text>
+      <Text>
+        - measure: x: {legacyMeasure.x}, y: {legacyMeasure.y}, width:{' '}
+        {legacyMeasure.width}, height: {legacyMeasure.height}
+      </Text>
+      <Text>
+        - measureInWindow: x: {legacyMeasureInWindow.x}, y:{' '}
+        {legacyMeasureInWindow.y}, width: {legacyMeasureInWindow.width}, height:{' '}
+        {legacyMeasureInWindow.height}
+      </Text>
+      <Text>
+        - measureInLayout: x: {legacyMeasureLayout.x}, y:{' '}
+        {legacyMeasureLayout.y}, width: {legacyMeasureLayout.width}, height:{' '}
+        {legacyMeasureLayout.height}
+      </Text>
+      <Button
+        title="Test setNativeProps"
+        onPress={() => {
+          const newCRIndex =
+            cornerRadiusIndex + 1 >= cornerRadiuses.length
+              ? 0
+              : cornerRadiusIndex + 1;
+          setCornerRadiusIndex(newCRIndex);
+          legacyRef.current?.setNativeProps({
+            cornerRadius: cornerRadiuses[newCRIndex],
+          });
         }}
       />
     </View>

diff --git a/packages/rn-tester/Podfile.lock b/packages/rn-tester/Podfile.lock
@@ -3,13 +3,6 @@ PODS:
   - CocoaAsyncSocket (7.6.5)
   - DoubleConversion (1.1.6)
   - FBLazyVector (1000.0.0)
-  - FBReactNativeSpec (1000.0.0):
-    - RCT-Folly (= 2021.07.22.00)
-    - RCTRequired (= 1000.0.0)
-    - RCTTypeSafety (= 1000.0.0)
-    - React-Core (= 1000.0.0)
-    - React-jsi (= 1000.0.0)
-    - ReactCommon/turbomodule/core (= 1000.0.0)
   - Flipper (0.182.0):
     - Flipper-Folly (~> 2.6)
   - Flipper-Boost-iOSX (1.76.0.1.11)
@@ -78,6 +71,26 @@ PODS:
   - hermes-engine/JSI (1000.0.0)
   - hermes-engine/Public (1000.0.0)
   - libevent (2.1.12)
+  - MyNativeView (0.0.1):
+    - RCT-Folly (= 2021.07.22.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+  - NativeCxxModuleExample (0.0.1):
+    - RCT-Folly (= 2021.07.22.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
   - OCMock (3.9.1)
   - OpenSSL-Universal (1.1.1100)
   - RCT-Folly (2021.07.22.00):
@@ -122,7 +135,6 @@ PODS:
     - React-RCTVibration (= 1000.0.0)
   - React-callinvoker (1000.0.0)
   - React-Codegen (1000.0.0):
-    - FBReactNativeSpec
     - hermes-engine
     - RCT-Folly
     - RCTRequired
@@ -133,7 +145,6 @@ PODS:
     - React-jsi
     - React-jsiexecutor
     - React-NativeModulesApple
-    - React-rncore
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
   - React-Core (1000.0.0):
@@ -716,6 +727,8 @@ PODS:
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-graphics
+    - React-RCTFabric
     - ReactCommon/turbomodule/core
   - React-RCTBlob (1000.0.0):
     - hermes-engine
@@ -813,7 +826,14 @@ PODS:
     - React-perflogger (= 1000.0.0)
   - ScreenshotManager (0.0.1):
     - RCT-Folly (= 2021.07.22.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
     - React-Core
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
   - SocketRocket (0.6.0)
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
@@ -823,7 +843,6 @@ DEPENDENCIES:
   - boost (from `../react-native/third-party-podspecs/boost.podspec`)
   - DoubleConversion (from `../react-native/third-party-podspecs/DoubleConversion.podspec`)
   - FBLazyVector (from `../react-native/Libraries/FBLazyVector`)
-  - FBReactNativeSpec (from `../react-native/React/FBReactNativeSpec`)
   - Flipper (= 0.182.0)
   - Flipper-Boost-iOSX (= 1.76.0.1.11)
   - Flipper-DoubleConversion (= 3.2.0.1)
@@ -847,6 +866,8 @@ DEPENDENCIES:
   - glog (from `../react-native/third-party-podspecs/glog.podspec`)
   - hermes-engine (from `../react-native/sdks/hermes/hermes-engine.podspec`)
   - libevent (~> 2.1.12)
+  - MyNativeView (from `NativeComponentExample`)
+  - NativeCxxModuleExample (from `NativeCxxModuleExample`)
   - OCMock (~> 3.9.1)
   - OpenSSL-Universal (= 1.1.1100)
   - RCT-Folly (from `../react-native/third-party-podspecs/RCT-Folly.podspec`)
@@ -916,12 +937,14 @@ EXTERNAL SOURCES:
     :podspec: "../react-native/third-party-podspecs/DoubleConversion.podspec"
   FBLazyVector:
     :path: "../react-native/Libraries/FBLazyVector"
-  FBReactNativeSpec:
-    :path: "../react-native/React/FBReactNativeSpec"
   glog:
     :podspec: "../react-native/third-party-podspecs/glog.podspec"
   hermes-engine:
     :podspec: "../react-native/sdks/hermes/hermes-engine.podspec"
+  MyNativeView:
+    :path: NativeComponentExample
+  NativeCxxModuleExample:
+    :path: NativeCxxModuleExample
   RCT-Folly:
     :podspec: "../react-native/third-party-podspecs/RCT-Folly.podspec"
   RCTRequired:
@@ -1004,7 +1027,6 @@ SPEC CHECKSUMS:
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   FBLazyVector: d68947eddece25638eb0f642d1b957c90388afd1
-  FBReactNativeSpec: e15126dac01896217e97d3ed3045a67be39e97cd
   Flipper: 6edb735e6c3e332975d1b17956bcc584eccf5818
   Flipper-Boost-iOSX: fd1e2b8cbef7e662a122412d7ac5f5bea715403c
   Flipper-DoubleConversion: 2dc99b02f658daf147069aad9dbd29d8feb06d30
@@ -1015,16 +1037,18 @@ SPEC CHECKSUMS:
   FlipperKit: 2efad7007d6745a3f95e4034d547be637f89d3f6
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
   glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
-  hermes-engine: d4e3147fcec14fb95d56cad45f03f126e725a098
+  hermes-engine: bf7ef573948c45d75fc71f85ba03184abe483d66
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
+  MyNativeView: d7e87ab855105456b31ea242b35d7fb573210d9b
+  NativeCxxModuleExample: db44cdd5cb33c76ba1d73335b494ef1ed12406c5
   OCMock: 9491e4bec59e0b267d52a9184ff5605995e74be8
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
   RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
   RCTRequired: 54a4f03dbbebb0cfdb4e2ba8d3b1d0b1258f8c08
   RCTTypeSafety: a41e253b4ed644708899857d912b2f50c7b6214d
   React: 2fc6c4c656cccd6753016528ad41199c16fd558e
   React-callinvoker: a7d5e883a83bb9bd3985b08be832c5e76451d18f
-  React-Codegen: ecc7c203dcc86316ff12a865dbfc71190458b367
+  React-Codegen: 70ea4e44a44a808f16641672f6a74f8d8fe69b2c
   React-Core: 6ed76c248f07d2d65d8d15b33a75444ef6ff7938
   React-CoreModules: 9b9060df7f561e9c8f8364333c2ec645d7c698d2
   React-cxxreact: aff243750dad852080636e615d7ae5639381735b
@@ -1040,7 +1064,7 @@ SPEC CHECKSUMS:
   React-perflogger: b4b9fb2ddd856b78003708ab3cf66ce03e6bc7c4
   React-RCTActionSheet: 1b1501ef80928be10702cd0ce09120358094cd82
   React-RCTAnimation: 6741f7be3e269e057c1426074cc70f34b56e114b
-  React-RCTAppDelegate: 777164f9f62174c65df37286df4eee43b44a6fb0
+  React-RCTAppDelegate: 1744ec923bea549c3c29da635c892d8d78adbaae
   React-RCTBlob: fd1ee93e48aa67b0183346a59754375de93de63d
   React-RCTFabric: 179b2203e1b8b89b6ec8fa6104071beb553b1684
   React-RCTImage: 055685a12c88939437f6520d9e7c120cd666cbf1
@@ -1051,11 +1075,11 @@ SPEC CHECKSUMS:
   React-RCTTest: 81ebfa8c2e1b0b482effe12485e6486dc0ff70d7
   React-RCTText: 4e5ae05b778a0ed2b22b012af025da5e1a1c4e54
   React-RCTVibration: ecfd04c1886a9c9a4e31a466c0fbcf6b36e92fde
-  React-rncore: 4c50bd546c117f4024a84bf6de1dd905d5fa3e82
+  React-rncore: 5ed874d08dd7be575757de66f7e189e03c8697a3
   React-runtimeexecutor: c7b2cd6babf6cc50340398bfbb7a9da13c93093f
   ReactCommon: b3e76cb18ee28cd0e3a927f5b53f888312443b6b
   ReactCommon-Samples: 7bf1ed1f5d659fae980b40c35c5a431d0ec49189
-  ScreenshotManager: 4e5729bfcd19014d277e57eb60e8e75db64b2953
+  ScreenshotManager: d0390bcd2ecdea4aecbe4931ad70a5b94f09b06e
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Yoga: 1b1a12ff3d86a10565ea7cbe057d42f5e5fb2a07
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a