From d528fe28a618f50eb95ef78dbbf2d5ab3b01b36f Mon Sep 17 00:00:00 2001
From: Xin Chen <xch@meta.com>
Date: Thu, 23 Feb 2023 09:14:10 -0800
Subject: [PATCH] Add performance.memory API example to RNTester

Summary:
Add performance API example to RN tester, start with the `performance.memory` API.

- Update `RNTesterList` file for both android and ios

Changelog:
[General][Internal] - Add `performance.memory` API example to RNTester

Reviewed By: rshest

Differential Revision: D43326565

fbshipit-source-id: adeb18ce9f1f90d9e9ecf66b533307028bc02df8
---
 .../Performance/PerformanceApiExample.js      | 82 +++++++++++++++++++
 .../js/utils/RNTesterList.android.js          |  5 ++
 .../rn-tester/js/utils/RNTesterList.ios.js    |  5 ++
 3 files changed, 92 insertions(+)
 create mode 100644 packages/rn-tester/js/examples/Performance/PerformanceApiExample.js

diff --git a/packages/rn-tester/js/examples/Performance/PerformanceApiExample.js b/packages/rn-tester/js/examples/Performance/PerformanceApiExample.js
new file mode 100644
index 00000000000..34ac57f847a
--- /dev/null
+++ b/packages/rn-tester/js/examples/Performance/PerformanceApiExample.js
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict-local
+ * @oncall react_native
+ */
+
+'use strict';
+
+import * as React from 'react';
+import {StyleSheet, View, Text, Button} from 'react-native';
+import RNTesterPage from '../../components/RNTesterPage';
+
+const {useState} = React;
+
+function MemoryExample(): React.Node {
+  // Memory API testing
+  const [memoryInfo, setMemoryInfo] = useState<{
+    jsHeapSizeLimit?: ?number,
+    totalJSHeapSize?: ?number,
+    usedJSHeapSize?: ?number,
+  }>({});
+  const onGetMemoryInfo = () => {
+    // performance.memory is not included in bom.js yet.
+    // Once we release the change in flow this can be removed.
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[incompatible-call]
+    setMemoryInfo(performance.memory);
+  };
+  return (
+    <RNTesterPage noSpacer={true} noScroll={true} title="performance.memory">
+      <View style={styles.container}>
+        <Button onPress={onGetMemoryInfo} title="Click to update memory info" />
+        <View>
+          <Text>
+            {`jsHeapSizeLimit: ${
+              memoryInfo.jsHeapSizeLimit == null
+                ? 'N/A'
+                : memoryInfo.jsHeapSizeLimit
+            } bytes`}
+          </Text>
+          <Text>
+            {`totalJSHeapSize: ${
+              memoryInfo.totalJSHeapSize == null
+                ? 'N/A'
+                : memoryInfo.totalJSHeapSize
+            } bytes`}
+          </Text>
+          <Text>
+            {`usedJSHeapSize: ${
+              memoryInfo.usedJSHeapSize == null
+                ? 'N/A'
+                : memoryInfo.usedJSHeapSize
+            } bytes`}
+          </Text>
+        </View>
+      </View>
+    </RNTesterPage>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 10,
+  },
+});
+
+exports.title = 'Performance API Examples';
+exports.category = 'Basic';
+exports.description = 'Shows the performance API provided in React Native';
+exports.examples = [
+  {
+    title: 'performance.memory',
+    render: function (): React.Element<typeof MemoryExample> {
+      return <MemoryExample />;
+    },
+  },
+];
diff --git a/packages/rn-tester/js/utils/RNTesterList.android.js b/packages/rn-tester/js/utils/RNTesterList.android.js
index c76ba8c5db3..152f0344146 100644
--- a/packages/rn-tester/js/utils/RNTesterList.android.js
+++ b/packages/rn-tester/js/utils/RNTesterList.android.js
@@ -297,6 +297,11 @@ const APIs: Array<RNTesterModuleInfo> = [
     category: 'Basic',
     module: require('../examples/TurboModule/TurboCxxModuleExample'),
   },
+  {
+    key: 'PerformanceApiExample',
+    category: 'Basic',
+    module: require('../examples/Performance/PerformanceApiExample'),
+  },
 ];
 
 if (ReactNativeFeatureFlags.shouldEmitW3CPointerEvents()) {
diff --git a/packages/rn-tester/js/utils/RNTesterList.ios.js b/packages/rn-tester/js/utils/RNTesterList.ios.js
index 7676a8831f4..019887eb9e0 100644
--- a/packages/rn-tester/js/utils/RNTesterList.ios.js
+++ b/packages/rn-tester/js/utils/RNTesterList.ios.js
@@ -278,6 +278,11 @@ const APIs: Array<RNTesterModuleInfo> = [
     key: 'XHRExample',
     module: require('../examples/XHR/XHRExample'),
   },
+  {
+    key: 'PerformanceApiExample',
+    category: 'Basic',
+    module: require('../examples/Performance/PerformanceApiExample'),
+  },
 ];
 
 if (ReactNativeFeatureFlags.shouldEmitW3CPointerEvents()) {