Add Fabric Interop event example (#36692)

Summary:
Pull Request resolved: #36692

Similar to the iOS counterpart,
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:
[Internal] [Changed] - Add Fabric Interop event example

Reviewed By: cipolleschi

Differential Revision: D44467555

fbshipit-source-id: 1f1af27583c402641c549bc2926a64469dcd7b3f

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

@@ -11,12 +11,14 @@
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.common.MapBuilder;
 import com.facebook.react.module.annotations.ReactModule;
 import com.facebook.react.uimanager.SimpleViewManager;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.ViewProps;
 import com.facebook.react.uimanager.annotations.ReactProp;
 import java.util.Collections;
+import java.util.HashMap;
 import java.util.Map;
 
 /** Legacy View manager (non Fabric compatible) for {@link MyNativeView} components. */
@@ -59,4 +61,19 @@ public void setColor(@NonNull MyNativeView view, @Nullable String color) {
   public final Map<String, Object> getExportedViewConstants() {
     return Collections.singletonMap("PI", 3.14);
   }
+
+  @Override
+  public final Map<String, Object> getExportedCustomBubblingEventTypeConstants() {
+    Map<String, Object> eventTypeConstants = new HashMap<String, Object>();
+    eventTypeConstants.putAll(
+        MapBuilder.<String, Object>builder()
+            .put(
+                "onColorChanged",
+                MapBuilder.of(
+                    "phasedRegistrationNames",
+                    MapBuilder.of(
+                        "bubbled", "onColorChanged", "captured", "onColorChangedCapture")))
+            .build());
+    return eventTypeConstants;
+  }
 }

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

@@ -8,11 +8,41 @@
 package com.facebook.react.uiapp.component;
 
 import android.content.Context;
+import android.graphics.Color;
 import android.view.View;
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
 
 class MyNativeView extends View {
 
+  private int currentColor = 0;
+
   public MyNativeView(Context context) {
     super(context);
   }
+
+  @Override
+  public void setBackgroundColor(int color) {
+    super.setBackgroundColor(color);
+    if (color != currentColor) {
+      currentColor = color;
+      emitNativeEvent(color);
+    }
+  }
+
+  private void emitNativeEvent(int color) {
+    WritableMap event = Arguments.createMap();
+    WritableMap backgroundColor = Arguments.createMap();
+    float[] hsv = new float[3];
+    Color.colorToHSV(color, hsv);
+    backgroundColor.putDouble("hue", hsv[0]);
+    backgroundColor.putDouble("saturation", hsv[1]);
+    backgroundColor.putDouble("brightness", hsv[2]);
+    backgroundColor.putDouble("alpha", Color.alpha(color));
+    event.putMap("backgroundColor", backgroundColor);
+    ReactContext reactContext = (ReactContext) getContext();
+    reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(getId(), "onColorChanged", event);
+  }
 }