Increase Example List Density (#46080)

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

1. Force the examples to be alphabetized, where the hand-maintained list has some examples that are not
2. Remove reundant/not useful UI

Changelog: [Internal]

Reviewed By: cortinico

Differential Revision: D61430910

fbshipit-source-id: 1f3e116fe81502faa7a72f2720912e26c9f04bb2

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

@@ -11,7 +11,7 @@
 import RNTesterComponentTitle from './RNTesterComponentTitle';
 import {RNTesterThemeContext} from './RNTesterTheme';
 import * as React from 'react';
-import {Platform, Pressable, StyleSheet, Text, View} from 'react-native';
+import {Pressable, StyleSheet, Text, View} from 'react-native';
 
 type ViewStyleProp = $ElementType<React.ElementConfig<typeof View>, 'style'>;
 type Props = {
@@ -19,7 +19,6 @@ type Props = {
   testID?: ?string,
   onPressIn?: ?() => mixed,
   onPressOut?: ?() => mixed,
-  bottomAddOn?: ?React.Node,
   children?: ?React.Node,
   title: string,
   description?: ?string,
@@ -32,7 +31,6 @@ export default function RNTPressableRow({
   onPressOut,
   title,
   description,
-  bottomAddOn,
   onPress,
   style,
   accessibilityLabel,
@@ -60,7 +58,6 @@ export default function RNTPressableRow({
         style={[styles.descriptionText, {color: theme.SecondaryLabelColor}]}>
         {description}
       </Text>
-      {bottomAddOn}
     </Pressable>
   );
 }
@@ -68,17 +65,16 @@ export default function RNTPressableRow({
 const styles = StyleSheet.create({
   row: {
     justifyContent: 'center',
-    paddingHorizontal: 15,
-    paddingVertical: 12,
-    marginVertical: 4,
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    marginVertical: 5,
     marginHorizontal: 16,
     experimental_boxShadow: '0 2px 4px -1px rgba(0, 0, 0, 0.25)',
     borderRadius: 8,
   },
   descriptionText: {
+    marginTop: 6,
     fontSize: 12,
-    lineHeight: 20,
-    marginBottom: 5,
   },
   topRowStyle: {
     flexDirection: 'row',

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

@@ -37,9 +37,8 @@ class RNTesterComponentTitle extends React.Component<Props> {
 
 const styles = StyleSheet.create({
   titleText: {
-    fontSize: 20,
+    fontSize: 18,
     fontWeight: '400',
-    marginBottom: 5,
   },
 });
 

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

@@ -13,20 +13,16 @@ import RNTPressableRow from './RNTPressableRow';
 
 const RNTesterExampleFilter = require('./RNTesterExampleFilter');
 const React = require('react');
-const {Platform, SectionList, StyleSheet, Text, View} = require('react-native');
+const {SectionList, StyleSheet, Text, View} = require('react-native');
 
 /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
  * LTI update could not be added via codemod */
-const ExampleModuleRow = ({
+function ExampleModuleRow({
   onShowUnderlay,
   onHideUnderlay,
   item,
   handlePress,
-}) => {
-  const theme = React.useContext(RNTesterThemeContext);
-  const platform = item.module.platform;
-  const onIos = !platform || platform === 'ios';
-  const onAndroid = !platform || platform === 'android';
+}): React.Node {
   return (
     <RNTPressableRow
       title={item.module.title}
@@ -35,29 +31,6 @@ const ExampleModuleRow = ({
       onPressIn={onShowUnderlay}
       onPressOut={onHideUnderlay}
       accessibilityLabel={item.module.title + ' ' + item.module.description}
-      bottomAddOn={
-        <View style={styles.bottomRowStyle}>
-          <Text style={{color: theme.SecondaryLabelColor, width: 65}}>
-            {item.module.category || 'Other'}
-          </Text>
-          <View style={styles.platformLabelStyle}>
-            <Text
-              style={{
-                color: onIos ? '#787878' : theme.SeparatorColor,
-                fontWeight: onIos ? '500' : '300',
-              }}>
-              iOS
-            </Text>
-            <Text
-              style={{
-                color: onAndroid ? '#787878' : theme.SeparatorColor,
-                fontWeight: onAndroid ? '500' : '300',
-              }}>
-              Android
-            </Text>
-          </View>
-        </View>
-      }
       onPress={() =>
         handlePress({
           exampleType: item.exampleType,
@@ -67,7 +40,7 @@ const ExampleModuleRow = ({
       }
     />
   );
-};
+}
 
 const renderSectionHeader = ({section}: {section: any, ...}) => (
   <RNTesterThemeContext.Consumer>
@@ -149,10 +122,6 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     flex: 1,
   },
-  bottomRowStyle: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
   imageViewStyle: {
     height: 30,
     width: 30,
@@ -166,11 +135,6 @@ const styles = StyleSheet.create({
     height: 25,
     width: 25,
   },
-  platformLabelStyle: {
-    flexDirection: 'row',
-    width: 100,
-    justifyContent: 'space-between',
-  },
 });
 
 module.exports = RNTesterModuleList;

packages/rn-tester/js/utils/testerStateUtils.js

@@ -97,7 +97,9 @@ export const getExamplesListWithRecentlyUsed = ({
       },
       {
         key: 'COMPONENTS',
-        data: components,
+        data: components.sort((a, b) =>
+          a.module.title.localeCompare(b.module.title),
+        ),
         title: 'Components',
       },
     ],
@@ -109,7 +111,7 @@ export const getExamplesListWithRecentlyUsed = ({
       },
       {
         key: 'APIS',
-        data: apis,
+        data: apis.sort((a, b) => a.module.title.localeCompare(b.module.title)),
         title: 'APIs',
       },
     ],