Add examples of Direct Manipulation in Fabric Intrerop (#36724)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/36724

Similarly to iOS, this adds some examples of direct manipulation on Android using
all the various methods.

Changelog:
[Internal] [Changed] - Add examples of Direct Manipulation in Fabric Intrerop

Reviewed By: cipolleschi

Differential Revision: D44541437

fbshipit-source-id: b6e10ac0a815f41ff3c980236b7d8c6937e92065

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

@@ -167,16 +167,16 @@ export default function MyNativeView(props: {}): React.Node {
         }}
       />
 
-      <Text style={{textAlign: 'center'}}>
+      <Text style={{color: 'green', textAlign: 'center'}}>
         &gt; Interop Layer Measurements &lt;
       </Text>
-      <Text style={{textAlign: 'center'}}>
+      <Text style={{color: 'green', textAlign: 'center'}}>
         measure {getTextFor(legacyMeasure)}
       </Text>
-      <Text style={{textAlign: 'center'}}>
+      <Text style={{color: 'green', textAlign: 'center'}}>
         InWindow {getTextFor(legacyMeasureInWindow)}
       </Text>
-      <Text style={{textAlign: 'center'}}>
+      <Text style={{color: 'green', textAlign: 'center'}}>
         InLayout {getTextFor(legacyMeasureLayout)}
       </Text>
       <Button

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

@@ -59,6 +59,11 @@ public class MyLegacyViewManager extends SimpleViewManager<MyNativeView> {
     view.setBackgroundColor(Color.parseColor(color));
   }
 
+  @ReactProp(name = "cornerRadius")
+  public void setCornerRadius(@NonNull MyNativeView view, @Nullable float cornerRadius) {
+    view.setCornerRadius(cornerRadius);
+  }
+
   @Override
   public final Map<String, Object> getExportedViewConstants() {
     return Collections.singletonMap("PI", 3.14);

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

@@ -9,6 +9,7 @@ package com.facebook.react.uiapp.component;
 
 import android.content.Context;
 import android.graphics.Color;
+import android.graphics.drawable.GradientDrawable;
 import android.view.View;
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.ReactContext;
@@ -18,20 +19,28 @@ import com.facebook.react.uimanager.events.RCTEventEmitter;
 class MyNativeView extends View {
 
   private int currentColor = 0;
+  private GradientDrawable background;
 
   public MyNativeView(Context context) {
     super(context);
+    background = new GradientDrawable();
   }
 
   @Override
   public void setBackgroundColor(int color) {
-    super.setBackgroundColor(color);
     if (color != currentColor) {
+      background.setColor(color);
       currentColor = color;
       emitNativeEvent(color);
+      setBackground(background);
     }
   }
 
+  public void setCornerRadius(float cornerRadius) {
+    background.setCornerRadius(cornerRadius);
+    setBackground(background);
+  }
+
   private void emitNativeEvent(int color) {
     WritableMap event = Arguments.createMap();
     WritableMap backgroundColor = Arguments.createMap();