Add Fabric Interop event example

Summary:
This changes adds an example to RNTester to verify that the Interop Layer can process bubbling events in Fabric as it used to do in Paper.

## Changelog:
[iOS][Added] - Add example in the Interop Layer to use events

Reviewed By: sammy-SC

Differential Revision: D43911390

fbshipit-source-id: ae75db25078669676e5a609e090f1e9674026391

packages/rn-tester/NativeComponentExample/ios/RNTLegacyView.h

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+#import <React/RCTComponent.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RNTLegacyView : UIView
+
+@property (nonatomic, copy) RCTBubblingEventBlock onColorChanged;
+
+@end
+
+NS_ASSUME_NONNULL_END

packages/rn-tester/NativeComponentExample/ios/RNTLegacyView.mm

@@ -0,0 +1,34 @@
+/*
+ * 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.
+ */
+
+#import "RNTLegacyView.h"
+
+@implementation RNTLegacyView
+
+- (void)setBackgroundColor:(UIColor *)backgroundColor
+{
+  super.backgroundColor = backgroundColor;
+  [self emitEvent];
+}
+
+- (void)emitEvent
+{
+  if (!self.onColorChanged) {
+    return;
+  }
+  CGFloat hue = 0.0;
+  CGFloat saturation = 0.0;
+  CGFloat brightness = 0.0;
+  CGFloat alpha = 0.0;
+  [self.backgroundColor getHue:&hue saturation:&saturation brightness:&brightness alpha:&alpha];
+  self.onColorChanged(@{
+    @"backgroundColor" :
+        @{@"hue" : @(hue), @"saturation" : @(saturation), @"brightness" : @(brightness), @"alpha" : @(alpha)}
+  });
+}
+
+@end

packages/rn-tester/NativeComponentExample/ios/RNTMyLegacyNativeViewManager.mm

@@ -8,6 +8,7 @@
 #import <React/RCTLog.h>
 #import <React/RCTUIManager.h>
 #import <React/RCTViewManager.h>
+#import "RNTLegacyView.h"
 #import "RNTMyNativeViewComponentView.h"
 
 @interface RNTMyLegacyNativeViewManager : RCTViewManager
@@ -22,10 +23,11 @@ @implementation RNTMyLegacyNativeViewManager
 
 RCT_REMAP_VIEW_PROPERTY(opacity, alpha, CGFloat)
 
+RCT_EXPORT_VIEW_PROPERTY(onColorChanged, RCTBubblingEventBlock)
+
 - (UIView *)view
 {
-  UIView *view = [[UIView alloc] init];
-  view.backgroundColor = UIColor.greenColor;
+  RNTLegacyView *view = [[RNTLegacyView alloc] init];
   return view;
 }
 

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

@@ -12,10 +12,22 @@ import type {HostComponent} from 'react-native';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
 import {requireNativeComponent} from 'react-native';
 
+type ColorChangedEvent = {
+  nativeEvent: {
+    backgroundColor: {
+      hue: number,
+      saturation: number,
+      brightness: number,
+      alpha: number,
+    },
+  },
+};
+
 type NativeProps = $ReadOnly<{|
   ...ViewProps,
   opacity?: number,
   color?: string,
+  onColorChanged?: (event: ColorChangedEvent) => void,
 |}>;
 
 export type MyLegacyViewType = HostComponent<NativeProps>;

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

@@ -26,11 +26,35 @@ const colors = [
   '#000033',
 ];
 
+class HSBA {
+  hue: number;
+  saturation: number;
+  brightness: number;
+  alpha: number;
+
+  constructor(
+    hue: number = 0.0,
+    saturation: number = 0.0,
+    brightness: number = 0.0,
+    alpha: number = 0.0,
+  ) {
+    this.hue = hue;
+    this.saturation = saturation;
+    this.brightness = brightness;
+    this.alpha = alpha;
+  }
+
+  toString(): string {
+    return `h: ${this.hue}, s: ${this.saturation}, b: ${this.brightness}, a: ${this.alpha}`;
+  }
+}
+
 // This is an example component that migrates to use the new architecture.
 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('#FF0000');
+  const [hsba, setHsba] = useState<HSBA>(new HSBA());
   return (
     <View style={{flex: 1}}>
       <Text style={{color: 'red'}}>Fabric View</Text>
@@ -40,7 +64,18 @@ export default function MyNativeView(props: {}): React.Node {
         style={{flex: 1}}
         opacity={opacity}
         color={color}
+        onColorChanged={event =>
+          setHsba(
+            new HSBA(
+              event.nativeEvent.backgroundColor.hue,
+              event.nativeEvent.backgroundColor.saturation,
+              event.nativeEvent.backgroundColor.brightness,
+              event.nativeEvent.backgroundColor.alpha,
+            ),
+          )
+        }
       />
+      <Text>HSBA: {hsba.toString()}</Text>
       <Button
         title="Change Background"
         onPress={() => {