Cleanup RNTesterExampleFilter/RNTesterPage/RNTesterBlock Spacers

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

Author: NickGerleman

packages/rn-tester/js/components/RNTesterBlock.js

@@ -54,7 +54,6 @@ const styles = StyleSheet.create({
   container: {
     borderRadius: 0,
     borderWidth: 1,
-    marginTop: 30,
     marginHorizontal: 20,
   },
   titleText: {

packages/rn-tester/js/components/RNTesterExampleFilter.js

@@ -92,11 +92,6 @@ class RNTesterExampleFilter<T> extends React.Component<Props<T>, State> {
           keyboardShouldPersistTaps="handled"
           keyboardDismissMode="interactive">
           {this.props.render({filteredSections})}
-          {/**
-           * This is a fake list item. It is needed to provide the ScrollView some bottom padding.
-           * The height of this item is basically ScreenHeight - the height of (Header + bottom navbar)
-           * */}
-          <View style={{height: 350}} />
         </ScrollView>
       );
     } else {

packages/rn-tester/js/components/RNTesterModuleContainer.js

@@ -107,7 +107,13 @@ export default function RNTesterModuleContainer(props: Props): React.Node {
           sections={sections}
           filter={filter}
           render={({filteredSections}) =>
-            filteredSections[0].data.map(renderExample)
+            module.showIndividualExamples === true ? (
+              filteredSections[0].data.map(renderExample)
+            ) : (
+              <View style={styles.sectionContainer}>
+                {filteredSections[0].data.map(renderExample)}
+              </View>
+            )
           }
         />
       </View>
@@ -160,4 +166,8 @@ const styles = StyleSheet.create({
     }),
     marginHorizontal: 15,
   },
+  sectionContainer: {
+    rowGap: 30,
+    paddingVertical: 30,
+  },
 });

packages/rn-tester/js/components/RNTesterPage.js

@@ -12,66 +12,55 @@ const RNTesterTitle = require('./RNTesterTitle');
 const React = require('react');
 const {SafeAreaView, ScrollView, StyleSheet, View} = require('react-native');
 import {RNTesterThemeContext} from './RNTesterTheme';
+import {useContext} from 'react';
 
 type Props = $ReadOnly<{|
   children?: React.Node,
   title?: ?string,
   noScroll?: ?boolean,
-  noSpacer?: ?boolean,
 |}>;
 
-class RNTesterPage extends React.Component<Props> {
-  render(): React.Node {
-    let ContentWrapper;
-    let wrapperProps: {
-      automaticallyAdjustContentInsets?: boolean,
-      keyboardShouldPersistTaps?: string,
-      keyboardDismissMode?: string,
-    } = {};
-    if (this.props.noScroll) {
-      ContentWrapper = ((View: any): React.ComponentType<any>);
-    } else {
-      ContentWrapper = (ScrollView: React.ComponentType<any>);
-      wrapperProps.automaticallyAdjustContentInsets = !this.props.title;
-      wrapperProps.keyboardShouldPersistTaps = 'handled';
-      wrapperProps.keyboardDismissMode = 'interactive';
-    }
-    const title = this.props.title ? (
-      <RNTesterTitle title={this.props.title} />
-    ) : null;
-    const spacer = this.props.noSpacer ? null : <View style={styles.spacer} />;
-    return (
-      <RNTesterThemeContext.Consumer>
-        {theme => {
-          return (
-            <SafeAreaView
-              style={[
-                styles.container,
-                {backgroundColor: theme.SecondarySystemBackgroundColor},
-              ]}>
-              {title}
-              <ContentWrapper style={styles.wrapper} {...wrapperProps}>
-                {this.props.children}
-                {spacer}
-              </ContentWrapper>
-            </SafeAreaView>
-          );
-        }}
-      </RNTesterThemeContext.Consumer>
-    );
-  }
+function RNTesterPage({children, title, noScroll}: Props): React.Node {
+  const theme = useContext(RNTesterThemeContext);
+
+  return (
+    <SafeAreaView
+      style={[
+        styles.background,
+        {backgroundColor: theme.SecondarySystemBackgroundColor},
+      ]}>
+      {title && <RNTesterTitle title={title} />}
+      {noScroll ? (
+        <View style={styles.noscrollWrapper}>{children}</View>
+      ) : (
+        <ScrollView
+          automaticallyAdjustContentInsets={!title}
+          contentContainerStyle={styles.scrollWrapperContentContainer}
+          keyboardDismissMode="interactive"
+          keyboardShouldPersistTaps="handled"
+          style={styles.scrollWrapper}>
+          {children}
+        </ScrollView>
+      )}
+    </SafeAreaView>
+  );
 }
 
 const styles = StyleSheet.create({
-  container: {
+  background: {
     flex: 1,
   },
-  spacer: {
-    height: 270,
+  noscrollWrapper: {
+    flex: 1,
+    paddingVertical: 10,
+    rowGap: 30,
   },
-  wrapper: {
+  scrollWrapper: {
     flex: 1,
-    paddingTop: 10,
+  },
+  scrollWrapperContentContainer: {
+    paddingVertical: 10,
+    rowGap: 30,
   },
 });
 

packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js

@@ -40,6 +40,9 @@ const mixedCheckboxImageSource = require('./mixed.png');
 const {createRef} = require('react');
 
 const styles = StyleSheet.create({
+  sectionContainer: {
+    rowGap: 20,
+  },
   default: {
     borderWidth: StyleSheet.hairlineWidth,
     borderColor: '#0f0f0f',
@@ -103,7 +106,7 @@ const styles = StyleSheet.create({
 class AccessibilityExample extends React.Component<{}> {
   render(): React.Node {
     return (
-      <View>
+      <View style={styles.sectionContainer}>
         <RNTesterBlock title="TextView without label">
           <Text>
             Text's accessibilityLabel is the raw text itself unless it is set
@@ -284,7 +287,7 @@ class AccessibilityExample extends React.Component<{}> {
 class AutomaticContentGrouping extends React.Component<{}> {
   render(): React.Node {
     return (
-      <View>
+      <View style={styles.sectionContainer}>
         <RNTesterBlock title="The parent and the children have a different role">
           <TouchableNativeFeedback accessible={true} accessibilityRole="button">
             <View accessible={false}>
@@ -731,7 +734,7 @@ class AccessibilityRoleAndStateExample extends React.Component<{}> {
     ];
 
     return (
-      <>
+      <View style={styles.sectionContainer}>
         <RNTesterBlock title="ScrollView with grid role">
           <ScrollView accessibilityRole="grid" style={styles.scrollView}>
             {content}
@@ -876,20 +879,19 @@ class AccessibilityRoleAndStateExample extends React.Component<{}> {
             </View>
             <ExpandableElementExample />
             <SelectionExample />
-            <RNTesterBlock title="Nested checkbox with delayed state change">
-              <NestedCheckBox />
-            </RNTesterBlock>
+            <Text>Nested checkbox with delayed state change</Text>
+            <NestedCheckBox />
           </View>
         </RNTesterBlock>
-      </>
+      </View>
     );
   }
 }
 
 class AccessibilityActionsExample extends React.Component<{}> {
   render(): React.Node {
     return (
-      <View>
+      <View style={styles.sectionContainer}>
         <RNTesterBlock title="Non-touchable with activate action">
           <View
             accessible={true}
@@ -1293,7 +1295,7 @@ function SetAccessibilityFocusExample(props: {}): React.Node {
 class EnabledExamples extends React.Component<{}> {
   render(): React.Node {
     return (
-      <View>
+      <View style={styles.sectionContainer}>
         {Platform.OS === 'ios' ? (
           <>
             <RNTesterBlock title="isBoldTextEnabled()">
@@ -1357,7 +1359,7 @@ class EnabledExamples extends React.Component<{}> {
 class ImportantForAccessibilityExamples extends React.Component<{}> {
   render(): React.Node {
     return (
-      <View>
+      <View style={styles.sectionContainer}>
         <RNTesterBlock title="ImageBackground with importantForAccessibility=no-hide-descendants">
           <View style={styles.container}>
             <ImageBackground
@@ -1546,11 +1548,10 @@ function DisplayOptionStatusExample({
 
 function AccessibilityExpandedExample(): React.Node {
   const [expand, setExpanded] = React.useState(false);
-  const [pressed, setPressed] = React.useState(false);
   const expandAction = {name: 'expand'};
   const collapseAction = {name: 'collapse'};
   return (
-    <>
+    <View style={styles.sectionContainer}>
       <RNTesterBlock title="Collapse/Expanded state change (Paper)">
         <Text>
           The following component announces expanded/collapsed state correctly
@@ -1592,7 +1593,7 @@ function AccessibilityExpandedExample(): React.Node {
           </View>
         </TouchableWithoutFeedback>
       </RNTesterBlock>
-    </>
+    </View>
   );
 }
 

packages/rn-tester/js/examples/Accessibility/AccessibilityIOSExample.js

@@ -13,13 +13,11 @@
 const React = require('react');
 const {Text, View, Alert} = require('react-native');
 
-const RNTesterBlock = require('../../components/RNTesterBlock');
-
 type Props = $ReadOnly<{||}>;
 class AccessibilityIOSExample extends React.Component<Props> {
   render(): React.Node {
     return (
-      <RNTesterBlock title="Accessibility iOS APIs">
+      <>
         <View
           onAccessibilityAction={event => {
             if (event.nativeEvent.actionName === 'activate') {
@@ -58,7 +56,7 @@ class AccessibilityIOSExample extends React.Component<Props> {
         <View accessible={true} accessibilityLanguage="it-IT">
           <Text>This view's language should be `it-IT`</Text>
         </View>
-      </RNTesterBlock>
+      </>
     );
   }
 }

packages/rn-tester/js/examples/FlatList/FlatList-basic.js

@@ -136,10 +136,7 @@ class FlatListExample extends React.PureComponent<Props, State> {
     const filteredData = this.state.data.filter(filter);
     const flatListItemRendererProps = this._renderItemComponent();
     return (
-      <RNTesterPage
-        noSpacer={true}
-        noScroll={true}
-        title="Simple list of items">
+      <RNTesterPage noScroll={true} title="Simple list of items">
         <View style={styles.container}>
           <View style={styles.searchRow}>
             <View style={styles.options}>

packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js

@@ -73,7 +73,6 @@ class MultiColumnExample extends React.PureComponent<
     return (
       <RNTesterPage
         title={this.props.navigator ? null : '<FlatList> - MultiColumn'}
-        noSpacer={true}
         noScroll={true}>
         <View style={styles.searchRow}>
           <View style={styles.row}>

packages/rn-tester/js/examples/FlatList/FlatList-nested.js

@@ -97,7 +97,7 @@ function NestedListExample(): React.Node {
   );
 
   return (
-    <RNTesterPage noSpacer={true} noScroll={true}>
+    <RNTesterPage noScroll={true}>
       <Text style={styles.debugText}>
         <Text style={styles.debugTextHeader}>Outer Viewable:{'\n'}</Text>
         {outerItems

packages/rn-tester/js/examples/PanResponder/PanResponderExample.js

@@ -99,10 +99,7 @@ class PanResponderExample extends React.Component<Props, State> {
 
   render(): React.Node {
     return (
-      <RNTesterPage
-        noSpacer={true}
-        noScroll={true}
-        title="Basic gesture handling">
+      <RNTesterPage noScroll={true} title="Basic gesture handling">
         <View style={styles.container}>
           <View
             ref={circle => {

packages/rn-tester/js/examples/Performance/PerformanceApiExample.js

@@ -32,7 +32,7 @@ function MemoryExample(): React.Node {
     setMemoryInfo(performance.memory);
   }, []);
   return (
-    <RNTesterPage noSpacer={true} noScroll={true} title="performance.memory">
+    <RNTesterPage noScroll={true} title="performance.memory">
       <View style={styles.container}>
         <Button onPress={onGetMemoryInfo} title="Click to update memory info" />
         <View>
@@ -63,10 +63,7 @@ function StartupTimingExample(): React.Node {
     setStartUpTiming(performance.reactNativeStartupTiming);
   }, []);
   return (
-    <RNTesterPage
-      noSpacer={true}
-      noScroll={true}
-      title="performance.reactNativeStartupTiming">
+    <RNTesterPage noScroll={true} title="performance.reactNativeStartupTiming">
       <View style={styles.container}>
         <Button
           onPress={onGetStartupTiming}

packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js

@@ -232,7 +232,7 @@ export function SectionList_scrollable(Props: {
   };
 
   return (
-    <RNTesterPage noSpacer={true} noScroll={true}>
+    <RNTesterPage noScroll={true}>
       <View style={styles.searchRow}>
         <PlainInput
           onChangeText={text => setFilterText(text)}