Remove chonky header for single modules (#50672)

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

We have precious little screen real estate, esp in E2E tests where we get 320x192 dips. Let's clean this up.

Changelog: [Internal]

Reviewed By: cortinico, GijsWeterings

Differential Revision: D72683491

fbshipit-source-id: 222a77f937dfb9dcceb627d8f084c58df7c07b56
This commit is contained in:
Nick Gerleman
2025-04-11 17:13:19 -07:00
committed by Facebook GitHub Bot
parent e385ff689b
commit 675b51f562
2 changed files with 0 additions and 115 deletions
@@ -1,108 +0,0 @@
/**
* 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
*/
import {type RNTesterTheme} from './RNTesterTheme';
import * as React from 'react';
import {Button, Platform, StyleSheet, Text, View} from 'react-native';
function RNTTestDetails({
description,
expect,
title,
theme,
}: {
description?: string,
expect?: string,
title: string,
theme: RNTesterTheme,
}): React.Node {
const [collapsed, setCollapsed] = React.useState(true);
const content =
description == null && expect == null ? null : (
<>
{description == null ? null : (
<View style={styles.section}>
<Text style={[styles.heading, {color: theme.LabelColor}]}>
Description
</Text>
<Text style={[styles.paragraph, {color: theme.LabelColor}]}>
{description}
</Text>
</View>
)}
{expect == null ? null : (
<View style={styles.section}>
<Text style={[styles.heading, {color: theme.LabelColor}]}>
Expectation
</Text>
<Text style={[styles.paragraph, {color: theme.LabelColor}]}>
{expect}
</Text>
</View>
)}
</>
);
return (
<View
style={StyleSheet.compose(styles.container, {
borderColor: theme.SeparatorColor,
backgroundColor:
Platform.OS === 'ios'
? theme.SystemBackgroundColor
: theme.BackgroundColor,
})}>
<View style={styles.titleRow}>
<Text
numberOfLines={1}
style={StyleSheet.compose(styles.title, {color: theme.LabelColor})}>
{title}
</Text>
{content != null && (
<Button
title={collapsed ? 'Expand' : 'Collapse'}
onPress={() => setCollapsed(!collapsed)}
color={theme.LinkColor}
/>
)}
</View>
{!collapsed ? content : null}
</View>
);
}
const styles = StyleSheet.create({
container: {
paddingHorizontal: 10,
paddingTop: 6,
paddingBottom: 10,
borderBottomWidth: 1,
},
heading: {
fontSize: 16,
fontWeight: '500',
},
paragraph: {
fontSize: 14,
},
section: {
marginVertical: 4,
},
title: {
fontSize: 18,
},
titleRow: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
});
export default RNTTestDetails;
@@ -15,7 +15,6 @@ import type {
import {type RNTesterTheme, RNTesterThemeContext} from './RNTesterTheme';
import RNTPressableRow from './RNTPressableRow';
import RNTTestDetails from './RNTTestDetails';
import * as React from 'react';
import {Platform, ScrollView, StyleSheet, Text, View} from 'react-native';
@@ -80,12 +79,6 @@ export default function RNTesterModuleContainer(props: Props): React.Node {
return singleModule != null ? (
<>
<RNTTestDetails
title={singleModule.title}
description={singleModule.description}
expect={singleModule.expect}
theme={theme}
/>
{singleModule.scrollable === true ? (
<ScrollView style={styles.examplesContainer} testID="example-container">
<singleModule.render />