RNTester: add legacy style event to MyNativeViewNativeComponent (#42809)

Summary:
Pull Request resolved: #42809

This diff adds a legacy style event to `MyNativeViewNativeComponent`.
This is a way of defining events where you specify additional string type parameter in the EventHandler in the spec. This additional type parameter is an overridden top level event name, that can be completely unrelated to the event handler name.
In this example it is `onLegacyStyleEvent` and `alternativeLegacyName`.
More context here D16042065.

Changelog: [Internal]

Reviewed By: cortinico

Differential Revision: D53310318

fbshipit-source-id: 4dec08c872acdfd09b9939f690fb7bc777149580

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

@@ -124,6 +124,13 @@ - (void)callNativeMethodToRemoveOverlays
   [_view removeOverlays];
 }
 
+- (void)fireLagacyStyleEvent
+{
+  RNTMyNativeViewEventEmitter::OnLegacyStyleEvent value = {"Legacy Style Event Fired."};
+
+  std::static_pointer_cast<const RNTMyNativeViewEventEmitter>(_eventEmitter)->onLegacyStyleEvent(value);
+}
+
 @end
 
 Class<RCTComponentViewProtocol> RNTMyNativeViewCls(void)

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

@@ -119,6 +119,9 @@ export default function MyNativeView(props: {}): React.Node {
           console.log(event.nativeEvent.latLons);
           console.log(event.nativeEvent.multiArrays);
         }}
+        onLegacyStyleEvent={event => {
+          console.log(event.nativeEvent.string);
+        }}
       />
       <Text style={{color: 'red'}}>Legacy View</Text>
       <RNTMyLegacyNativeView
@@ -218,7 +221,15 @@ export default function MyNativeView(props: {}): React.Node {
           }
         }}
       />
-
+      <Button
+        title="Fire Legacy Style Event"
+        onPress={() => {
+          RNTMyNativeViewCommands.fireLagacyStyleEvent(
+            // $FlowFixMe[incompatible-call]
+            ref.current,
+          );
+        }}
+      />
       <Text style={{color: 'green', textAlign: 'center'}}>
         &gt; Interop Layer Measurements &lt;
       </Text>

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

@@ -32,13 +32,21 @@ type Event = $ReadOnly<{
   multiArrays: $ReadOnlyArray<$ReadOnlyArray<Int32>>,
 }>;
 
+type LegacyStyleEvent = $ReadOnly<{
+  string: string,
+}>;
+
 type NativeProps = $ReadOnly<{|
   ...ViewProps,
   opacity?: Float,
   values: $ReadOnlyArray<Int32>,
 
   // Events
   onIntArrayChanged?: ?BubblingEventHandler<Event>,
+  onLegacyStyleEvent?: ?BubblingEventHandler<
+    LegacyStyleEvent,
+    'alternativeLegacyName',
+  >,
 |}>;
 
 export type MyNativeViewType = HostComponent<NativeProps>;
@@ -57,13 +65,16 @@ interface NativeCommands {
   +callNativeMethodToRemoveOverlays: (
     viewRef: React.ElementRef<MyNativeViewType>,
   ) => void;
+
+  +fireLagacyStyleEvent: (viewRef: React.ElementRef<MyNativeViewType>) => void;
 }
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
   supportedCommands: [
     'callNativeMethodToChangeBackgroundColor',
     'callNativeMethodToAddOverlays',
     'callNativeMethodToRemoveOverlays',
+    'fireLagacyStyleEvent',
   ],
 });
 

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

@@ -124,6 +124,15 @@ class MyNativeView(context: ThemedReactContext) : View(context) {
     eventDispatcher?.dispatchEvent(event)
   }
 
+  fun emitLegacyStyleEvent() {
+    val reactContext = context as ReactContext
+    val surfaceId = UIManagerHelper.getSurfaceId(reactContext)
+    val eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, id)
+    val payload = Arguments.createMap().apply { putString("string", "Legacy Style Event Fired.") }
+    val event = OnLegacyStyleEvent(surfaceId, id, payload)
+    eventDispatcher?.dispatchEvent(event)
+  }
+
   inner class OnIntArrayChangedEvent(
       surfaceId: Int,
       viewId: Int,
@@ -133,4 +142,11 @@ class MyNativeView(context: ThemedReactContext) : View(context) {
 
     override fun getEventData() = payload
   }
+
+  inner class OnLegacyStyleEvent(surfaceId: Int, viewId: Int, private val payload: WritableMap) :
+      Event<OnLegacyStyleEvent>(surfaceId, viewId) {
+    override fun getEventName() = "alternativeLegacyName"
+
+    override fun getEventData() = payload
+  }
 }

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

@@ -53,6 +53,10 @@ internal class MyNativeViewManager :
     view.removeOverlays()
   }
 
+  override fun fireLagacyStyleEvent(view: MyNativeView) {
+    view.emitLegacyStyleEvent()
+  }
+
   @ReactProp(name = ViewProps.OPACITY, defaultFloat = 1f)
   override fun setOpacity(view: MyNativeView, opacity: Float) {
     super.setOpacity(view, opacity)