From 2f1643dc0ce57a355c36a286ea9c50dad07d4f78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rub=C3=A9n=20Norte?= <rubennorte@meta.com>
Date: Tue, 2 Apr 2024 06:27:05 -0700
Subject: [PATCH] Remove unnecessary wrapper from
 Performance/PerformanceObserver examples screen in RNTester (#43706)

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

Changelog: [internal]

Just a small improvement of the UI for the Performance API examples in RNTester.

Reviewed By: christophpurrer

Differential Revision: D55489933

fbshipit-source-id: a1fe4f4962227941827f02cf18a0d4685e18f006
---
 .../Performance/PerformanceApiExample.js      | 143 ++++++++----------
 1 file changed, 65 insertions(+), 78 deletions(-)

diff --git a/packages/rn-tester/js/examples/Performance/PerformanceApiExample.js b/packages/rn-tester/js/examples/Performance/PerformanceApiExample.js
index 9f849330c18..243f7145f46 100644
--- a/packages/rn-tester/js/examples/Performance/PerformanceApiExample.js
+++ b/packages/rn-tester/js/examples/Performance/PerformanceApiExample.js
@@ -9,11 +9,9 @@
  * @oncall react_native
  */
 
-'use strict';
 import type MemoryInfo from 'react-native/src/private/webapis/performance/MemoryInfo';
 import type ReactNativeStartupTiming from 'react-native/src/private/webapis/performance/ReactNativeStartupTiming';
 
-import RNTesterPage from '../../components/RNTesterPage';
 import {RNTesterThemeContext} from '../../components/RNTesterTheme';
 import * as React from 'react';
 import {useContext, useEffect} from 'react';
@@ -37,22 +35,20 @@ function MemoryExample(): React.Node {
     setMemoryInfo(performance.memory);
   }, []);
   return (
-    <RNTesterPage noScroll={true} title="performance.memory">
-      <View style={styles.container}>
-        <Button onPress={onGetMemoryInfo} title="Click to update memory info" />
-        <View>
-          <Text style={{color: theme.LabelColor}}>
-            {`jsHeapSizeLimit: ${String(memoryInfo?.jsHeapSizeLimit)} bytes`}
-          </Text>
-          <Text style={{color: theme.LabelColor}}>
-            {`totalJSHeapSize: ${String(memoryInfo?.totalJSHeapSize)} bytes`}
-          </Text>
-          <Text style={{color: theme.LabelColor}}>
-            {`usedJSHeapSize: ${String(memoryInfo?.usedJSHeapSize)} bytes`}
-          </Text>
-        </View>
+    <View style={styles.container}>
+      <Button onPress={onGetMemoryInfo} title="Click to update memory info" />
+      <View>
+        <Text style={{color: theme.LabelColor}}>
+          {`jsHeapSizeLimit: ${String(memoryInfo?.jsHeapSizeLimit)} bytes`}
+        </Text>
+        <Text style={{color: theme.LabelColor}}>
+          {`totalJSHeapSize: ${String(memoryInfo?.totalJSHeapSize)} bytes`}
+        </Text>
+        <Text style={{color: theme.LabelColor}}>
+          {`usedJSHeapSize: ${String(memoryInfo?.usedJSHeapSize)} bytes`}
+        </Text>
       </View>
-    </RNTesterPage>
+    </View>
   );
 }
 
@@ -68,45 +64,43 @@ function StartupTimingExample(): React.Node {
     setStartUpTiming(performance.rnStartupTiming);
   }, []);
   return (
-    <RNTesterPage noScroll={true} title="performance.reactNativeStartupTiming">
-      <View style={styles.container}>
-        <Button
-          onPress={onGetStartupTiming}
-          title="Click to update React startup timing"
-        />
-        <View>
-          <Text
-            style={{
-              color: theme.LabelColor,
-            }}>{`startTime: ${String(startUpTiming?.startTime)} ms`}</Text>
-          <Text
-            style={{
-              color: theme.LabelColor,
-            }}>{`initializeRuntimeStart: ${String(
-            startUpTiming?.initializeRuntimeStart,
-          )} ms`}</Text>
-          <Text style={{color: theme.LabelColor}}>
-            {`executeJavaScriptBundleEntryPointStart: ${String(
-              startUpTiming?.executeJavaScriptBundleEntryPointStart,
-            )} ms`}
-          </Text>
-          <Text
-            style={{
-              color: theme.LabelColor,
-            }}>{`executeJavaScriptBundleEntryPointEnd: ${String(
-            startUpTiming?.executeJavaScriptBundleEntryPointEnd,
-          )} ms`}</Text>
-          <Text
-            style={{color: theme.LabelColor}}>{`initializeRuntimeEnd: ${String(
-            startUpTiming?.initializeRuntimeEnd,
-          )} ms`}</Text>
-          <Text
-            style={{
-              color: theme.LabelColor,
-            }}>{`endTime: ${String(startUpTiming?.endTime)} ms`}</Text>
-        </View>
+    <View style={styles.container}>
+      <Button
+        onPress={onGetStartupTiming}
+        title="Click to update React startup timing"
+      />
+      <View>
+        <Text
+          style={{
+            color: theme.LabelColor,
+          }}>{`startTime: ${String(startUpTiming?.startTime)} ms`}</Text>
+        <Text
+          style={{
+            color: theme.LabelColor,
+          }}>{`initializeRuntimeStart: ${String(
+          startUpTiming?.initializeRuntimeStart,
+        )} ms`}</Text>
+        <Text style={{color: theme.LabelColor}}>
+          {`executeJavaScriptBundleEntryPointStart: ${String(
+            startUpTiming?.executeJavaScriptBundleEntryPointStart,
+          )} ms`}
+        </Text>
+        <Text
+          style={{
+            color: theme.LabelColor,
+          }}>{`executeJavaScriptBundleEntryPointEnd: ${String(
+          startUpTiming?.executeJavaScriptBundleEntryPointEnd,
+        )} ms`}</Text>
+        <Text
+          style={{color: theme.LabelColor}}>{`initializeRuntimeEnd: ${String(
+          startUpTiming?.initializeRuntimeEnd,
+        )} ms`}</Text>
+        <Text
+          style={{
+            color: theme.LabelColor,
+          }}>{`endTime: ${String(startUpTiming?.endTime)} ms`}</Text>
       </View>
-    </RNTesterPage>
+    </View>
   );
 }
 
@@ -132,30 +126,23 @@ function PerformanceObserverUserTimingExample(): React.Node {
   }, []);
 
   return (
-    <RNTesterPage
-      noScroll={true}
-      title="PerformanceObserver (marks and measures)">
-      <View style={styles.container}>
-        <Button
-          onPress={onPress}
-          title="Click to log some marks and measures"
-        />
-        <View>
-          {entries.map((entry, index) =>
-            entry.entryType === 'mark' ? (
-              <Text style={{color: theme.LabelColor}} key={index}>
-                Mark {entry.name}: {entry.startTime}
-              </Text>
-            ) : (
-              <Text style={{color: theme.LabelColor}} key={index}>
-                Measure {entry.name}: {entry.startTime} -{' '}
-                {entry.startTime + entry.duration} ({entry.duration}ms)
-              </Text>
-            ),
-          )}
-        </View>
+    <View style={styles.container}>
+      <Button onPress={onPress} title="Click to log some marks and measures" />
+      <View>
+        {entries.map((entry, index) =>
+          entry.entryType === 'mark' ? (
+            <Text style={{color: theme.LabelColor}} key={index}>
+              Mark {entry.name}: {entry.startTime}
+            </Text>
+          ) : (
+            <Text style={{color: theme.LabelColor}} key={index}>
+              Measure {entry.name}: {entry.startTime} -{' '}
+              {entry.startTime + entry.duration} ({entry.duration}ms)
+            </Text>
+          ),
+        )}
       </View>
-    </RNTesterPage>
+    </View>
   );
 }