From 6368555ab0f80dcdd351fb90d49a1ddaee166cfc Mon Sep 17 00:00:00 2001
From: Nicola Corti <ncor@meta.com>
Date: Tue, 14 Jan 2025 09:15:36 -0800
Subject: [PATCH] RN-Tester: Reorder buttons in the New Architecture sample
 (#48666)

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

The New Architecture sample is getting too big and the two views are not visible anymore.
I'm fixing this but having buttons side by side.

Changelog:
[Internal] [Changed] -

Reviewed By: cipolleschi

Differential Revision: D68153245

fbshipit-source-id: 5557fd40f81078fe3994d8efe0e73784e043ed78
---
 .../NativeComponentExample/js/MyNativeView.js | 188 +++++++++---------
 1 file changed, 99 insertions(+), 89 deletions(-)

diff --git a/packages/rn-tester/NativeComponentExample/js/MyNativeView.js b/packages/rn-tester/NativeComponentExample/js/MyNativeView.js
index 5fe7c46c2dd..11126e00222 100644
--- a/packages/rn-tester/NativeComponentExample/js/MyNativeView.js
+++ b/packages/rn-tester/NativeComponentExample/js/MyNativeView.js
@@ -169,84 +169,107 @@ export default function MyNativeView(props: {}): React.Node {
       <Text style={{color: 'green', textAlign: 'center'}}>
         Opacity: {opacity.toFixed(1)}
       </Text>
-      <Button
-        title="Change Background"
-        onPress={() => {
-          let nextBGColor =
-            currentBGColor + 1 >= colors.length ? 0 : currentBGColor + 1;
-          let newColor = colors[nextBGColor];
-          RNTMyNativeViewCommands.callNativeMethodToChangeBackgroundColor(
-            // $FlowFixMe[incompatible-call]
-            ref.current,
-            newColor,
-          );
-
-          callNativeMethodToChangeBackgroundColor(legacyRef.current, newColor);
-          setCurrentBGColor(nextBGColor);
-        }}
-      />
-      <Button
-        title="Add Overlays"
-        onPress={() => {
-          let randomColorId = Math.floor(Math.random() * 5);
-          let overlayColors = [
-            colors[randomColorId],
-            colors[(randomColorId + 1) % 5],
-          ];
-          RNTMyNativeViewCommands.callNativeMethodToAddOverlays(
-            // $FlowFixMe[incompatible-call]
-            ref.current,
-            overlayColors,
-          );
-          callNativeMethodToAddOverlays(legacyRef.current, overlayColors);
-        }}
-      />
-      <Button
-        title="Remove Overlays"
-        onPress={() => {
-          RNTMyNativeViewCommands.callNativeMethodToRemoveOverlays(
-            // $FlowFixMe[incompatible-call]
-            ref.current,
-          );
-          callNativeMethodToRemoveOverlays(legacyRef.current);
-        }}
-      />
-      <Button
-        title="Set Opacity"
-        onPress={() => {
-          setOpacity(computeNextOpacity(opacity));
-          setArrayValues([
-            Math.floor(Math.random() * 100),
-            Math.floor(Math.random() * 100),
-            Math.floor(Math.random() * 100),
-          ]);
-        }}
-      />
-      <Button
-        title="Console.log Measure"
-        onPress={() => {
-          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(
+      <View
+        style={{
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          justifyContent: 'space-between',
+        }}>
+        <Button
+          title="Change Background"
+          onPress={() => {
+            let nextBGColor =
+              currentBGColor + 1 >= colors.length ? 0 : currentBGColor + 1;
+            let newColor = colors[nextBGColor];
+            RNTMyNativeViewCommands.callNativeMethodToChangeBackgroundColor(
               // $FlowFixMe[incompatible-call]
-              containerRef.current,
-              (x, y, width, height) => {
-                setLegacyMeasureLayout({x, y, width, height});
-              },
+              ref.current,
+              newColor,
             );
-          }
-        }}
-      />
+
+            callNativeMethodToChangeBackgroundColor(
+              legacyRef.current,
+              newColor,
+            );
+            setCurrentBGColor(nextBGColor);
+          }}
+        />
+        <Button
+          title="Set Opacity"
+          onPress={() => {
+            setOpacity(computeNextOpacity(opacity));
+            setArrayValues([
+              Math.floor(Math.random() * 100),
+              Math.floor(Math.random() * 100),
+              Math.floor(Math.random() * 100),
+            ]);
+          }}
+        />
+        <Button
+          title="Add Overlays"
+          onPress={() => {
+            let randomColorId = Math.floor(Math.random() * 5);
+            let overlayColors = [
+              colors[randomColorId],
+              colors[(randomColorId + 1) % 5],
+            ];
+            RNTMyNativeViewCommands.callNativeMethodToAddOverlays(
+              // $FlowFixMe[incompatible-call]
+              ref.current,
+              overlayColors,
+            );
+            callNativeMethodToAddOverlays(legacyRef.current, overlayColors);
+          }}
+        />
+        <Button
+          title="Remove Overlays"
+          onPress={() => {
+            RNTMyNativeViewCommands.callNativeMethodToRemoveOverlays(
+              // $FlowFixMe[incompatible-call]
+              ref.current,
+            );
+            callNativeMethodToRemoveOverlays(legacyRef.current);
+          }}
+        />
+        <Button
+          title="Console.log Measure"
+          onPress={() => {
+            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});
+                },
+              );
+            }
+          }}
+        />
+        <Button
+          title="Test setNativeProps"
+          onPress={() => {
+            const newCRIndex =
+              cornerRadiusIndex + 1 >= cornerRadiuses.length
+                ? 0
+                : cornerRadiusIndex + 1;
+            setCornerRadiusIndex(newCRIndex);
+            legacyRef.current?.setNativeProps({
+              cornerRadius: cornerRadiuses[newCRIndex],
+            });
+          }}
+        />
+      </View>
       <Text style={{color: 'green', textAlign: 'center'}}>
         &gt; Interop Layer Measurements &lt;
       </Text>
@@ -271,19 +294,6 @@ export default function MyNativeView(props: {}): React.Node {
       <Text style={{color: 'green', textAlign: 'center'}}>
         Legacy Style Event Fired {legacyStyleEventCount} times
       </Text>
-      <Button
-        title="Test setNativeProps"
-        onPress={() => {
-          const newCRIndex =
-            cornerRadiusIndex + 1 >= cornerRadiuses.length
-              ? 0
-              : cornerRadiusIndex + 1;
-          setCornerRadiusIndex(newCRIndex);
-          legacyRef.current?.setNativeProps({
-            cornerRadius: cornerRadiuses[newCRIndex],
-          });
-        }}
-      />
     </View>
   );
 }