Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove unnecessary wrapper from Performance/PerformanceObserver examples screen in RNTester (#43706)

Browse Source 
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
This commit is contained in:
Rubén Norte
2024-04-02 06:27:05 -07:00
committed by Facebook GitHub Bot
parent f9c61f6ecd
commit 2f1643dc0c
1 changed files with 65 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/rn-tester/js/examples/Performance/PerformanceApiExample.js
+65 -78
View File
@@ -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>
);
}