mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Nick Gerleman
a999f0d2f3
Summary: Right now RNTestePage either adds a large spacer to the end of content, unless `noSpacer` is added. But with `noSpacer`, scrolling content may not be reachable because we are putting padding on the wrong container. This fixes that and removes a few cases where we had multi hundred px empty space in favor of uniformly taking up the parent, and a 10px padding. This also moves the constant margin at the top of RNTesterBlock to the container, so that in the E2E container we can save the 30px. Changelog: [Internal] Reviewed By: javache Differential Revision: D44197303 fbshipit-source-id: 8dc67f3588bc28316e2fee8d25a0bc59995f1728
78 lines
1.7 KiB
JavaScript
78 lines
1.7 KiB
JavaScript
/**
|
|
* 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
|
|
*/
|
|
|
|
import * as React from 'react';
|
|
import {RNTesterThemeContext} from './RNTesterTheme';
|
|
import {StyleSheet, Text, View} from 'react-native';
|
|
|
|
type Props = $ReadOnly<{|
|
|
children?: React.Node,
|
|
title?: ?string,
|
|
description?: ?string,
|
|
|}>;
|
|
|
|
const RNTesterBlock = ({description, title, children}: Props): React.Node => {
|
|
const theme = React.useContext(RNTesterThemeContext);
|
|
return (
|
|
<View
|
|
style={[
|
|
[styles.container],
|
|
{
|
|
borderColor: theme.SeparatorColor,
|
|
backgroundColor: theme.SecondaryGroupedBackgroundColor,
|
|
},
|
|
]}>
|
|
<View style={[styles.titleContainer]}>
|
|
{title && (
|
|
<Text style={[styles.titleText, {color: theme.LabelColor}]}>
|
|
{title}
|
|
</Text>
|
|
)}
|
|
{description && (
|
|
<Text
|
|
style={[
|
|
styles.descriptionText,
|
|
{color: theme.LabelColor, marginTop: description ? 10 : 0},
|
|
]}>
|
|
{description}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
<View style={styles.children}>{children}</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
borderRadius: 0,
|
|
borderWidth: 1,
|
|
marginHorizontal: 20,
|
|
},
|
|
titleText: {
|
|
fontSize: 18,
|
|
fontWeight: '300',
|
|
},
|
|
titleContainer: {
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 5,
|
|
},
|
|
descriptionText: {
|
|
fontSize: 12,
|
|
opacity: 0.5,
|
|
},
|
|
children: {
|
|
marginHorizontal: 20,
|
|
marginVertical: 10,
|
|
},
|
|
});
|
|
|
|
module.exports = RNTesterBlock;
|