Rename things in RNTester

Summary:
Changelog:
[Internal] - Rename some types and components in RNTester to support work for tertiary levels of navigation.

module = component | api
moduleExample = an example of a certain feature a module

Reviewed By: kacieb

Differential Revision: D29381875

fbshipit-source-id: c348bcbb73aaf95e85928bb14080a097e685cc78

packages/rn-tester/js/RNTesterApp.ios.js

@@ -12,10 +12,10 @@ import {AppRegistry} from 'react-native';
 import React from 'react';
 
 import SnapshotViewIOS from './examples/Snapshot/SnapshotViewIOS.ios';
-import RNTesterExampleContainer from './components/RNTesterExampleContainer';
+import RNTesterModuleContainer from './components/RNTesterModuleContainer';
 import RNTesterList from './utils/RNTesterList';
 import RNTesterApp from './RNTesterAppShared';
-import type {RNTesterExample} from './types/RNTesterTypes';
+import type {RNTesterModuleInfo} from './types/RNTesterTypes';
 
 AppRegistry.registerComponent('SetPropertiesExampleApp', () =>
   require('./examples/SetPropertiesExample/SetPropertiesExampleApp'),
@@ -26,15 +26,18 @@ AppRegistry.registerComponent('RootViewSizeFlexibilityExampleApp', () =>
 AppRegistry.registerComponent('RNTesterApp', () => RNTesterApp);
 
 // Register suitable examples for snapshot tests
-RNTesterList.ComponentExamples.concat(RNTesterList.APIExamples).forEach(
-  (Example: RNTesterExample) => {
+RNTesterList.Components.concat(RNTesterList.APIs).forEach(
+  (Example: RNTesterModuleInfo) => {
     const ExampleModule = Example.module;
     if (ExampleModule.displayName) {
       class Snapshotter extends React.Component<{...}> {
         render() {
           return (
             <SnapshotViewIOS>
-              <RNTesterExampleContainer module={ExampleModule} />
+              <RNTesterModuleContainer
+                module={ExampleModule}
+                onExampleCardPress={() => {}}
+              />
             </SnapshotViewIOS>
           );
         }

packages/rn-tester/js/RNTesterAppShared.js

@@ -17,8 +17,8 @@ import {
 } from 'react-native';
 import * as React from 'react';
 
-import RNTesterExampleContainer from './components/RNTesterExampleContainer';
-import RNTesterExampleList from './components/RNTesterExampleList';
+import RNTesterModuleContainer from './components/RNTesterModuleContainer';
+import RNTesterModuleList from './components/RNTesterModuleList';
 import RNTesterNavBar from './components/RNTesterNavbar';
 import RNTesterList from './utils/RNTesterList';
 import {
@@ -56,17 +56,17 @@ type ExampleListsContainerProps = $ReadOnly<{|
   title: string,
   examplesList: ExamplesList,
   toggleBookmark: (args: {exampleType: string, key: string}) => mixed,
-  handleExampleCardPress: (args: {exampleType: string, key: string}) => mixed,
+  handleModuleCardPress: (args: {exampleType: string, key: string}) => mixed,
   isVisible: boolean,
 |}>;
 
-const ExampleListsContainer = ({
+const ModuleListsContainer = ({
   theme,
   screen,
   title,
   examplesList,
   toggleBookmark,
-  handleExampleCardPress,
+  handleModuleCardPress,
   isVisible,
 }: ExampleListsContainerProps) => {
   const isBookmarkEmpty = examplesList.bookmarks.length === 0;
@@ -75,27 +75,27 @@ const ExampleListsContainer = ({
     <DisplayIfVisible isVisible={isVisible}>
       <Header title={title} theme={theme} />
       <DisplayIfVisible isVisible={screen === Screens.COMPONENTS}>
-        <RNTesterExampleList
+        <RNTesterModuleList
           sections={examplesList.components}
           toggleBookmark={toggleBookmark}
-          handleExampleCardPress={handleExampleCardPress}
+          handleModuleCardPress={handleModuleCardPress}
         />
       </DisplayIfVisible>
       <DisplayIfVisible isVisible={screen === Screens.APIS}>
-        <RNTesterExampleList
+        <RNTesterModuleList
           sections={examplesList.apis}
           toggleBookmark={toggleBookmark}
-          handleExampleCardPress={handleExampleCardPress}
+          handleModuleCardPress={handleModuleCardPress}
         />
       </DisplayIfVisible>
       <DisplayIfVisible isVisible={screen === Screens.BOOKMARKS}>
         {isBookmarkEmpty ? (
           <RNTesterEmptyBookmarksState />
         ) : (
-          <RNTesterExampleList
+          <RNTesterModuleList
             sections={examplesList.bookmarks}
             toggleBookmark={toggleBookmark}
-            handleExampleCardPress={handleExampleCardPress}
+            handleModuleCardPress={handleModuleCardPress}
           />
         )}
       </DisplayIfVisible>
@@ -111,7 +111,7 @@ const RNTesterApp = (): React.Node => {
   );
   const colorScheme = useColorScheme();
 
-  const {openExample, screen, bookmarks, recentlyUsed} = state;
+  const {activeModuleKey, screen, bookmarks, recentlyUsed} = state;
 
   React.useEffect(() => {
     getInitialStateFromAsyncStorage(APP_STATE_KEY).then(
@@ -131,15 +131,15 @@ const RNTesterApp = (): React.Node => {
   );
 
   const handleBackPress = React.useCallback(() => {
-    if (openExample) {
+    if (activeModuleKey != null) {
       dispatch({type: RNTesterActionsType.BACK_BUTTON_PRESS});
     }
-  }, [dispatch, openExample]);
+  }, [dispatch, activeModuleKey]);
 
   // Setup hardware back button press listener
   React.useEffect(() => {
     const handleHardwareBackPress = () => {
-      if (openExample) {
+      if (activeModuleKey) {
         handleBackPress();
         return true;
       }
@@ -154,12 +154,12 @@ const RNTesterApp = (): React.Node => {
         handleHardwareBackPress,
       );
     };
-  }, [openExample, handleBackPress]);
+  }, [activeModuleKey, handleBackPress]);
 
-  const handleExampleCardPress = React.useCallback(
+  const handleModuleCardPress = React.useCallback(
     ({exampleType, key}) => {
       dispatch({
-        type: RNTesterActionsType.EXAMPLE_CARD_PRESS,
+        type: RNTesterActionsType.MODULE_CARD_PRESS,
         data: {exampleType, key},
       });
     },
@@ -192,7 +192,8 @@ const RNTesterApp = (): React.Node => {
     return null;
   }
 
-  const ExampleModule = openExample && RNTesterList.Modules[openExample];
+  const activeModule =
+    activeModuleKey != null ? RNTesterList.Modules[activeModuleKey] : null;
   const title = Screens.COMPONENTS
     ? 'Components'
     : Screens.APIS
@@ -201,31 +202,31 @@ const RNTesterApp = (): React.Node => {
 
   return (
     <RNTesterThemeContext.Provider value={theme}>
-      {ExampleModule && (
+      {activeModule != null ? (
         <View style={styles.container}>
           <Header
             onBack={handleBackPress}
             title={title}
             theme={theme}
-            documentationURL={ExampleModule.documentationURL}
+            documentationURL={activeModule.documentationURL}
           />
-          <RNTesterExampleContainer module={ExampleModule} />
+          <RNTesterModuleContainer module={activeModule} />
         </View>
+      ) : (
+        <ModuleListsContainer
+          isVisible={!activeModule}
+          screen={screen || Screens.COMPONENTS}
+          title={title}
+          theme={theme}
+          examplesList={examplesList}
+          handleModuleCardPress={handleModuleCardPress}
+          toggleBookmark={toggleBookmark}
+        />
       )}
-
-      <ExampleListsContainer
-        isVisible={!ExampleModule}
-        screen={screen || Screens.COMPONENTS}
-        title={title}
-        theme={theme}
-        examplesList={examplesList}
-        handleExampleCardPress={handleExampleCardPress}
-        toggleBookmark={toggleBookmark}
-      />
       <View style={styles.bottomNavbar}>
         <RNTesterNavBar
           screen={screen || Screens.COMPONENTS}
-          isExamplePageOpen={!!ExampleModule}
+          isExamplePageOpen={!!activeModule}
           handleNavBarPress={handleNavBarPress}
         />
       </View>

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

@@ -1,102 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- */
-
-const React = require('react');
-const {Platform} = require('react-native');
-const RNTesterBlock = require('./RNTesterBlock');
-const RNTesterExampleFilter = require('./RNTesterExampleFilter');
-
-const invariant = require('invariant');
-import ExamplePage from './ExamplePage';
-
-class RNTesterExampleContainer extends React.Component {
-  renderExample(example, i) {
-    // Filter platform-specific examples
-    const {description, platform} = example;
-    let {title} = example;
-    if (platform) {
-      if (Platform.OS !== platform) {
-        return null;
-      }
-      title += ' (' + platform + ' only)';
-    }
-    return (
-      <RNTesterBlock key={i} title={title} description={description}>
-        {example.render()}
-      </RNTesterBlock>
-    );
-  }
-
-  render(): React.Element<any> {
-    const {module} = this.props;
-    if (module.simpleExampleContainer) {
-      invariant(
-        module.examples.length === 1,
-        'If noExampleContainer is specified, only one example is allowed',
-      );
-      return (
-        <ExamplePage
-          title={module.title}
-          description={module.description}
-          android={!module.platform || module.platform === 'android'}
-          ios={!module.platform || module.platform === 'ios'}
-          documentationURL={module.documentationURL}
-          category={module.category}>
-          {module.examples[0].render()}
-        </ExamplePage>
-      );
-    }
-    if (module.examples.length === 1) {
-      return (
-        <ExamplePage
-          title={module.testTitle || module.title}
-          description={module.description}
-          android={!module.platform || module.platform === 'android'}
-          ios={!module.platform || module.platform === 'ios'}
-          documentationURL={module.documentationURL}
-          category={module.category}>
-          {module.examples[0].render()}
-        </ExamplePage>
-      );
-    }
-
-    const filter = ({example, filterRegex}) => filterRegex.test(example.title);
-
-    const sections = [
-      {
-        data: module.examples,
-        title: 'EXAMPLES',
-        key: 'e',
-      },
-    ];
-
-    return (
-      <ExamplePage
-        title={module.title}
-        description={module.description}
-        android={!module.platform || module.platform === 'android'}
-        ios={!module.platform || module.platform === 'ios'}
-        documentationURL={module.documentationURL}
-        category={module.category}>
-        <RNTesterExampleFilter
-          testID="example_search"
-          page="examples_page"
-          hideFilterPills={true}
-          sections={sections}
-          filter={filter}
-          render={({filteredSections}) =>
-            filteredSections[0].data.map(this.renderExample)
-          }
-        />
-      </ExamplePage>
-    );
-  }
-}
-
-module.exports = RNTesterExampleContainer;

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

@@ -18,7 +18,6 @@ const {
   Image,
 } = require('react-native');
 import {RNTesterThemeContext} from './RNTesterTheme';
-import type {RNTesterExample} from '../types/RNTesterTypes';
 
 import type {SectionData} from '../types/RNTesterTypes';
 

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

@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+const React = require('react');
+const {Platform} = require('react-native');
+const RNTesterBlock = require('./RNTesterBlock');
+const RNTesterExampleFilter = require('./RNTesterExampleFilter');
+
+const invariant = require('invariant');
+import ExamplePage from './ExamplePage';
+import type {
+  RNTesterModule,
+  RNTesterModuleExample,
+} from '../types/RNTesterTypes';
+
+type Props = {
+  module: RNTesterModule,
+  example?: ?RNTesterModuleExample,
+  onExampleCardPress: (exampleName: string) => mixed,
+};
+
+function getExampleTitle(title, platform) {
+  return platform != null ? `${title} (${platform} only)` : title;
+}
+
+export default function RNTesterModuleContainer(props: Props): React.Node {
+  const {module, example} = props;
+  const renderExample = (e, i) => {
+    // Filter platform-specific es
+    const {description, platform} = e;
+    let {title} = e;
+    if (platform != null && Platform.OS !== platform) {
+      return null;
+    }
+    return (
+      <RNTesterBlock
+        key={i}
+        title={getExampleTitle(title, platform)}
+        description={description}>
+        {e.render()}
+      </RNTesterBlock>
+    );
+  };
+
+  if (module.simpleExampleContainer) {
+    invariant(
+      module.examples.length === 1,
+      'If noExampleContainer is specified, only one example is allowed',
+    );
+    return (
+      <ExamplePage
+        title={module.title}
+        description={module.description}
+        android={!module.platform || module.platform === 'android'}
+        ios={!module.platform || module.platform === 'ios'}
+        documentationURL={module.documentationURL}
+        category={module.category}>
+        {module.examples[0].render()}
+      </ExamplePage>
+    );
+  }
+
+  if (module.examples.length === 1) {
+    return (
+      <ExamplePage
+        title={module.testTitle || module.title}
+        description={module.description}
+        android={!module.platform || module.platform === 'android'}
+        ios={!module.platform || module.platform === 'ios'}
+        documentationURL={module.documentationURL}
+        category={module.category}>
+        {module.examples[0].render()}
+      </ExamplePage>
+    );
+  }
+
+  const filter = ({example: e, filterRegex}) => filterRegex.test(e.title);
+
+  const sections = [
+    {
+      data: module.examples,
+      title: 'EXAMPLES',
+      key: 'e',
+    },
+  ];
+
+  return (
+    <ExamplePage
+      title={module.title}
+      description={module.description}
+      android={!module.platform || module.platform === 'android'}
+      ios={!module.platform || module.platform === 'ios'}
+      documentationURL={module.documentationURL}
+      category={module.category}>
+      {module.showIndividualExamples === true && example != null ? (
+        <RNTesterBlock
+          key={example.name}
+          title={getExampleTitle(example.title, example.platform)}
+          description={example.description}>
+          {example.render()}
+        </RNTesterBlock>
+      ) : (
+        <RNTesterExampleFilter
+          testID="example_search"
+          page="examples_page"
+          hideFilterPills={true}
+          sections={sections}
+          filter={filter}
+          render={({filteredSections}) =>
+            filteredSections[0].data.map(renderExample)
+          }
+        />
+      )}
+    </ExamplePage>
+  );
+}

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

@@ -24,7 +24,7 @@ const {
 
 import {RNTesterThemeContext} from './RNTesterTheme';
 
-const ExampleCard = ({
+const ExampleModuleRow = ({
   onShowUnderlay,
   onHideUnderlay,
   item,
@@ -117,8 +117,8 @@ const renderSectionHeader = ({section}) => (
   </RNTesterThemeContext.Consumer>
 );
 
-const RNTesterExampleList: React$AbstractComponent<any, void> = React.memo(
-  ({sections, toggleBookmark, handleExampleCardPress}) => {
+const RNTesterModuleList: React$AbstractComponent<any, void> = React.memo(
+  ({sections, toggleBookmark, handleModuleCardPress}) => {
     const theme = React.useContext(RNTesterThemeContext);
 
     const filter = ({example, filterRegex, category}) =>
@@ -128,13 +128,13 @@ const RNTesterExampleList: React$AbstractComponent<any, void> = React.memo(
 
     const renderListItem = ({item, section, separators}) => {
       return (
-        <ExampleCard
+        <ExampleModuleRow
           item={item}
           section={section}
           onShowUnderlay={separators.highlight}
           onHideUnderlay={separators.unhighlight}
           toggleBookmark={toggleBookmark}
-          handlePress={handleExampleCardPress}
+          handlePress={handleModuleCardPress}
         />
       );
     };
@@ -250,4 +250,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = RNTesterExampleList;
+module.exports = RNTesterModuleList;

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

@@ -12,16 +12,16 @@
 
 const React = require('react');
 
-const RNTesterExampleContainer = require('./RNTesterExampleContainer');
-import type {RNTesterExample} from '../types/RNTesterTypes';
+import RNTesterModuleContainer from './RNTesterModuleContainer';
+import type {RNTesterModule} from '../types/RNTesterTypes';
 
 const createExamplePage = function(
   title: ?string,
-  exampleModule: RNTesterExample,
+  exampleModule: RNTesterModule,
 ): React.ComponentType<any> {
   class ExamplePage extends React.Component<{...}> {
     render() {
-      return <RNTesterExampleContainer module={exampleModule} title={title} />;
+      return <RNTesterModuleContainer module={exampleModule} />;
     }
   }
 

packages/rn-tester/js/examples/Alert/AlertIOSExample.js

@@ -21,7 +21,7 @@ const {
 
 const {examples: SharedAlertExamples} = require('./AlertExample');
 
-import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 
 type Props = $ReadOnly<{||}>;
 type State = {|promptValue: ?string|};
@@ -205,4 +205,4 @@ exports.examples = ([
       );
     },
   },
-]: RNTesterExampleModuleItem[]);
+]: Array<RNTesterModuleExample>);

packages/rn-tester/js/examples/Animated/AnimatedExample.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {RNTesterExampleModule} from '../../types/RNTesterTypes';
+import type {RNTesterModule} from '../../types/RNTesterTypes';
 import RotatingImagesExample from './RotatingImagesExample';
 import ContinuousInteractionsExample from './ContinuousInteractionsExample';
 import LoopingExample from './LoopingExample';
@@ -34,4 +34,4 @@ export default ({
     LoopingExample,
     ContinuousInteractionsExample,
   ],
-}: RNTesterExampleModule);
+}: RNTesterModule);

packages/rn-tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 import * as React from 'react';
 import RNTesterButton from '../../components/RNTesterButton';
 import {Text, Easing, StyleSheet, View, Animated} from 'react-native';
@@ -133,4 +133,4 @@ export default ({
       </View>
     );
   },
-}: RNTesterExampleModuleItem);
+}: RNTesterModuleExample);

packages/rn-tester/js/examples/Animated/ContinuousInteractionsExample.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 import * as React from 'react';
 import {Text} from 'react-native';
 
@@ -18,4 +18,4 @@ export default ({
     'values, interrupting and transitioning ' +
     'animations, etc.': string),
   render: (): React.Node => <Text>Checkout the Gratuitous Animation App!</Text>,
-}: RNTesterExampleModuleItem);
+}: RNTesterModuleExample);

packages/rn-tester/js/examples/Animated/FadeInViewExample.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 import * as React from 'react';
 import RNTesterButton from '../../components/RNTesterButton';
 import {Text, StyleSheet, View, Animated} from 'react-native';
@@ -79,4 +79,4 @@ export default ({
     'bring opacity from 0 to 1 when the component ' +
     'mounts.': string),
   render: (): React.Node => <FadeInExample />,
-}: RNTesterExampleModuleItem);
+}: RNTesterModuleExample);

packages/rn-tester/js/examples/Animated/LoopingExample.js

@@ -9,7 +9,7 @@
  */
 
 import RNTesterButton from '../../components/RNTesterButton';
-import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 import {Animated, StyleSheet, Text, View} from 'react-native';
 import * as React from 'react';
 import {useEffect, useState} from 'react';
@@ -19,7 +19,7 @@ export default ({
   name: 'loopingView',
   description: 'Native looping animation that shrinks and fades out a view.',
   render: () => <LoopingExample />,
-}: RNTesterExampleModuleItem);
+}: RNTesterModuleExample);
 
 function LoopingExample(props: {}): React.Node {
   const [running, setRunning] = useState(false);

packages/rn-tester/js/examples/Animated/MovingBoxExample.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 import * as React from 'react';
 import RNTesterButton from '../../components/RNTesterButton';
 import {Text, StyleSheet, View, Animated} from 'react-native';
@@ -113,4 +113,4 @@ export default ({
   description:
     'Click arrow buttons to move the box. Then hide the box and reveal it again. The box will stay its last position. Reset will reset the animation to its starting position',
   render: (): React.Node => <MovingBoxExample />,
-}: RNTesterExampleModuleItem);
+}: RNTesterModuleExample);

packages/rn-tester/js/examples/Animated/RotatingImagesExample.js

@@ -11,7 +11,7 @@
 import * as React from 'react';
 import RNTesterButton from '../../components/RNTesterButton';
 import {Animated, View, StyleSheet} from 'react-native';
-import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 
 const styles = StyleSheet.create({
   rotatingImage: {
@@ -88,4 +88,4 @@ export default ({
   title: 'Rotating Images',
   description: 'Simple Animated.Image rotation.',
   render: RotatingImagesExample,
-}: RNTesterExampleModuleItem);
+}: RNTesterModuleExample);

packages/rn-tester/js/examples/Animated/TransformBounceExample.js

@@ -11,7 +11,7 @@
 import * as React from 'react';
 import RNTesterButton from '../../components/RNTesterButton';
 import {Text, StyleSheet, View, Animated} from 'react-native';
-import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 
 const styles = StyleSheet.create({
   content: {
@@ -96,4 +96,4 @@ export default ({
       </View>
     );
   },
-}: RNTesterExampleModuleItem);
+}: RNTesterModuleExample);

packages/rn-tester/js/examples/Modal/ModalExample.js

@@ -10,7 +10,7 @@
 
 import ModalPresentation from './ModalPresentation';
 import ModalOnShow from './ModalOnShow';
-import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 
 export const displayName = (undefined: ?string);
 export const framework = 'React';
@@ -21,4 +21,4 @@ export const description = 'Component for presenting modal views.';
 export const examples = ([
   ModalPresentation,
   ModalOnShow,
-]: Array<RNTesterExampleModuleItem>);
+]: Array<RNTesterModuleExample>);

packages/rn-tester/js/examples/Modal/ModalOnShow.js

@@ -10,7 +10,7 @@
 
 import * as React from 'react';
 import {Modal, Pressable, StyleSheet, Text, View} from 'react-native';
-import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 
 function ModalOnShowOnDismiss(): React.Node {
   const [modalShowComponent, setModalShowComponent] = React.useState(true);
@@ -134,4 +134,4 @@ export default ({
   description:
     'onShow and onDismiss (iOS only) callbacks are called when modals is shown/dissmissed',
   render: (): React.Node => <ModalOnShowOnDismiss />,
-}: RNTesterExampleModuleItem);
+}: RNTesterModuleExample);

packages/rn-tester/js/examples/Modal/ModalPresentation.js

@@ -10,7 +10,7 @@
 
 import * as React from 'react';
 import {Modal, Platform, StyleSheet, Switch, Text, View} from 'react-native';
-import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 import RNTOption from '../../components/RNTOption';
 const RNTesterButton = require('../../components/RNTesterButton');
 
@@ -258,4 +258,4 @@ export default ({
   name: 'basic',
   description: 'Modals can be presented with or without animation',
   render: (): React.Node => <ModalPresentation />,
-}: RNTesterExampleModuleItem);
+}: RNTesterModuleExample);

packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js

@@ -24,7 +24,7 @@ import {
 import nullthrows from 'nullthrows';
 
 import {useState, useCallback} from 'react';
-import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import ScrollViewPressableStickyHeaderExample from './ScrollViewPressableStickyHeaderExample';
 
@@ -266,7 +266,7 @@ exports.examples = ([
       return <SnapToOptions />;
     },
   },
-]: Array<RNTesterExampleModuleItem>);
+]: Array<RNTesterModuleExample>);
 
 if (Platform.OS === 'ios') {
   exports.examples.push({

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

@@ -342,6 +342,7 @@ exports.title = 'SectionList';
 exports.category = 'ListView';
 exports.documentationURL = 'https://reactnative.dev/docs/sectionlist';
 exports.description = 'Performant, scrollable list of data.';
+exports.showIndividualExamples = true;
 exports.examples = [
   {
     title: 'Simple scrollable list',

packages/rn-tester/js/examples/TextInput/TextInputExample.android.js

@@ -23,7 +23,7 @@ const {
 
 const TextInputSharedExamples = require('./TextInputSharedExamples.js');
 
-import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 
 class ToggleDefaultPaddingExample extends React.Component<
   $FlowFixMeProps,
@@ -424,4 +424,4 @@ exports.examples = ([
       return <ToggleDefaultPaddingExample />;
     },
   },
-]: Array<RNTesterExampleModuleItem>);
+]: Array<RNTesterModuleExample>);

packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js

@@ -27,7 +27,7 @@ import type {KeyboardType} from 'react-native/Libraries/Components/TextInput/Tex
 
 const TextInputSharedExamples = require('./TextInputSharedExamples.js');
 
-import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 
 class WithLabel extends React.Component<$FlowFixMeProps> {
   render() {
@@ -816,4 +816,4 @@ exports.examples = ([
       );
     },
   },
-]: Array<RNTesterExampleModuleItem>);
+]: Array<RNTesterModuleExample>);

packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js

@@ -21,7 +21,7 @@ const {
   StyleSheet,
 } = require('react-native');
 
-import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 
 const styles = StyleSheet.create({
   default: {
@@ -666,4 +666,4 @@ module.exports = ([
       );
     },
   },
-]: Array<RNTesterExampleModuleItem>);
+]: Array<RNTesterModuleExample>);

packages/rn-tester/js/types/RNTesterTypes.js

@@ -10,7 +10,7 @@
 
 import * as React from 'react';
 
-export type RNTesterExampleModuleItem = $ReadOnly<{|
+export type RNTesterModuleExample = $ReadOnly<{|
   name?: string,
   title: string,
   platform?: string,
@@ -18,7 +18,7 @@ export type RNTesterExampleModuleItem = $ReadOnly<{|
   render: () => React.Node,
 |}>;
 
-export type RNTesterExampleModule = $ReadOnly<{|
+export type RNTesterModule = $ReadOnly<{|
   title: string,
   testTitle?: ?string,
   description: string,
@@ -26,15 +26,16 @@ export type RNTesterExampleModule = $ReadOnly<{|
   documentationURL?: ?string,
   category?: ?string,
   framework?: string,
-  examples: Array<RNTesterExampleModuleItem>,
+  examples: Array<RNTesterModuleExample>,
   simpleExampleContainer?: ?boolean,
   category?: string,
   documentationURL?: string,
+  showIndividualExamples?: boolean,
 |}>;
 
-export type RNTesterExample = $ReadOnly<{|
+export type RNTesterModuleInfo = $ReadOnly<{|
   key: string,
-  module: RNTesterExampleModule,
+  module: RNTesterModule,
   category?: string,
   supportsTVOS?: boolean,
   documentationURL?: string,
@@ -45,7 +46,7 @@ export type RNTesterExample = $ReadOnly<{|
 export type SectionData = {
   key: string,
   title: string,
-  data: Array<RNTesterExample>,
+  data: Array<RNTesterModuleInfo>,
 };
 
 export type ExamplesList = $ReadOnly<{|
@@ -59,7 +60,7 @@ export type ScreenTypes = 'components' | 'apis' | 'bookmarks' | null;
 export type ComponentList = null | {components: string[], apis: string[]};
 
 export type RNTesterState = {
-  openExample: null | string,
+  activeModuleKey: null | string,
   screen: ScreenTypes,
   bookmarks: ComponentList,
   recentlyUsed: ComponentList,

packages/rn-tester/js/utils/RNTesterList.android.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-import type {RNTesterExample} from '../types/RNTesterTypes';
+import type {RNTesterModuleInfo} from '../types/RNTesterTypes';
 
-const ComponentExamples: Array<RNTesterExample> = [
+const Components: Array<RNTesterModuleInfo> = [
   {
     key: 'ActivityIndicatorExample',
     category: 'UI',
@@ -161,7 +161,7 @@ const ComponentExamples: Array<RNTesterExample> = [
   },
 ];
 
-const APIExamples: Array<RNTesterExample> = [
+const APIs: Array<RNTesterModuleInfo> = [
   {
     key: 'AccessibilityExample',
     category: 'Basic',
@@ -310,7 +310,7 @@ const APIExamples: Array<RNTesterExample> = [
 ];
 
 if (global.__turboModuleProxy) {
-  APIExamples.push({
+  APIs.push({
     key: 'TurboModuleExample',
     category: 'Basic',
     module: require('../examples/TurboModule/TurboModuleExample'),
@@ -319,13 +319,13 @@ if (global.__turboModuleProxy) {
 
 const Modules: any = {};
 
-APIExamples.concat(ComponentExamples).forEach(Example => {
+APIs.concat(Components).forEach(Example => {
   Modules[Example.key] = Example.module;
 });
 
 const RNTesterList = {
-  APIExamples,
-  ComponentExamples,
+  APIs,
+  Components,
   Modules,
 };
 

packages/rn-tester/js/utils/RNTesterList.ios.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-import type {RNTesterExample} from '../types/RNTesterTypes';
+import type {RNTesterModuleInfo} from '../types/RNTesterTypes';
 
-const ComponentExamples: Array<RNTesterExample> = [
+const Components: Array<RNTesterModuleInfo> = [
   {
     key: 'ActivityIndicatorExample',
     category: 'UI',
@@ -196,7 +196,7 @@ const ComponentExamples: Array<RNTesterExample> = [
   },
 ];
 
-const APIExamples: Array<RNTesterExample> = [
+const APIs: Array<RNTesterModuleInfo> = [
   {
     key: 'AccessibilityExample',
     module: require('../examples/Accessibility/AccessibilityExample'),
@@ -358,13 +358,13 @@ const APIExamples: Array<RNTesterExample> = [
 
 const Modules: {...} = {};
 
-APIExamples.concat(ComponentExamples).forEach(Example => {
+APIs.concat(Components).forEach(Example => {
   Modules[Example.key] = Example.module;
 });
 
 const RNTesterList = {
-  APIExamples,
-  ComponentExamples,
+  APIs,
+  Components,
   Modules,
 };
 

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

@@ -13,9 +13,9 @@ import type {RNTesterState, ComponentList} from '../types/RNTesterTypes';
 export const RNTesterActionsType = {
   INIT_FROM_STORAGE: 'INIT_FROM_STORAGE',
   NAVBAR_PRESS: 'NAVBAR_PRESS',
-  EXAMPLE_CARD_PRESS: 'EXAMPLE_CARD_PRESS',
   BOOKMARK_PRESS: 'BOOKMARK_PRESS',
   BACK_BUTTON_PRESS: 'BACK_BUTTON_PRESS',
+  MODULE_CARD_PRESS: 'MODULE_CARD_PRESS',
 };
 
 const getUpdatedBookmarks = ({
@@ -76,13 +76,13 @@ export const RNTesterReducer = (
     case RNTesterActionsType.NAVBAR_PRESS:
       return {
         ...state,
-        openExample: null,
+        activeModuleKey: null,
         screen: action.data.screen,
       };
-    case RNTesterActionsType.EXAMPLE_CARD_PRESS:
+    case RNTesterActionsType.MODULE_CARD_PRESS:
       return {
         ...state,
-        openExample: action.data.key,
+        activeModuleKey: action.data.key,
         recentlyUsed: getUpdatedRecentlyUsed({
           exampleType: action.data.exampleType,
           key: action.data.key,
@@ -99,9 +99,10 @@ export const RNTesterReducer = (
         }),
       };
     case RNTesterActionsType.BACK_BUTTON_PRESS:
+      // Go back to module or list
       return {
         ...state,
-        openExample: null,
+        activeModuleKey: null,
       };
     default:
       throw new Error(`Invalid action type ${action.type}`);

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

@@ -25,7 +25,7 @@ export const Screens = {
 };
 
 export const initialState: RNTesterState = {
-  openExample: null,
+  activeModuleKey: null,
   screen: null,
   bookmarks: null,
   recentlyUsed: null,
@@ -56,7 +56,7 @@ export const getExamplesListWithBookmarksAndRecentlyUsed = ({
     return null;
   }
 
-  const components = RNTesterList.ComponentExamples.map(componentExample => ({
+  const components = RNTesterList.Components.map(componentExample => ({
     ...componentExample,
     isBookmarked: bookmarks.components.includes(componentExample.key),
     exampleType: Screens.COMPONENTS,
@@ -72,7 +72,7 @@ export const getExamplesListWithBookmarksAndRecentlyUsed = ({
     component => component.isBookmarked,
   );
 
-  const apis = RNTesterList.APIExamples.map(apiExample => ({
+  const apis = RNTesterList.APIs.map(apiExample => ({
     ...apiExample,
     isBookmarked: bookmarks.apis.includes(apiExample.key),
     exampleType: Screens.APIS,
@@ -133,7 +133,7 @@ export const getInitialStateFromAsyncStorage = async (
 
   if (!initialStateString) {
     return {
-      openExample: null,
+      activeModuleKey: null,
       screen: Screens.COMPONENTS,
       bookmarks: {components: [], apis: []},
       recentlyUsed: {components: [], apis: []},