Migrate FlatList/SectionList E2E testss from Catalyst to RNTester (#46274)

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

changelog: [General][Add] - Add E2E test cases for Flat/SectionList to RNTester

Reviewed By: philIip

Differential Revision: D62002065

fbshipit-source-id: 038907cd7afd33505b7599e390cb9f366b7b32f6

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

@@ -77,9 +77,11 @@ export default function RNTesterModuleContainer(props: Props): React.Node {
   const filter = ({example: e, filterRegex}: $FlowFixMe) =>
     filterRegex.test(e.title);
 
+  const removeHiddenExamples = (ex: RNTesterModuleExample) =>
+    ex.hidden !== true;
   const sections = [
     {
-      data: module.examples,
+      data: module.examples.filter(removeHiddenExamples),
       title: 'EXAMPLES',
       key: 'e',
     },

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

@@ -31,7 +31,7 @@ const DATA = [
   'Coke',
   'Beer',
   'Cheesecake',
-  'Ice Cream',
+  'Brownie',
 ];
 
 const Item = ({item, separators}: RenderItemProps<string>) => {

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

@@ -0,0 +1,78 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+import type {ViewToken} from 'react-native/Libraries/Lists/ViewabilityHelper';
+
+import BaseFlatListExample from './BaseFlatListExample';
+import * as React from 'react';
+import {FlatList, StyleSheet, View} from 'react-native';
+
+type FlatListProps = React.ElementProps<typeof FlatList>;
+type ViewabilityConfig = $PropertyType<FlatListProps, 'viewabilityConfig'>;
+
+const BASE_VIEWABILITY_CONFIG = {
+  minimumViewTime: 1000,
+  viewAreaCoveragePercentThreshold: 100,
+};
+
+export function FlatList_BaseOnViewableItemsChanged(props: {
+  offScreen?: ?boolean,
+  horizontal?: ?boolean,
+  useScrollRefScroll?: ?boolean,
+  waitForInteraction?: ?boolean,
+}): React.Node {
+  const {offScreen, horizontal, useScrollRefScroll, waitForInteraction} = props;
+  const [output, setOutput] = React.useState('');
+  const onViewableItemsChanged = React.useCallback(
+    (info: {changed: Array<ViewToken>, viewableItems: Array<ViewToken>, ...}) =>
+      setOutput(
+        info.viewableItems
+          .filter(viewToken => viewToken.index != null && viewToken.isViewable)
+          .map(viewToken => viewToken.item)
+          .join(', '),
+      ),
+    [setOutput],
+  );
+  const viewabilityConfig: ViewabilityConfig = {
+    ...BASE_VIEWABILITY_CONFIG,
+    waitForInteraction: waitForInteraction ?? false,
+  };
+  const exampleProps = {
+    onViewableItemsChanged,
+    viewabilityConfig,
+    horizontal,
+  };
+
+  const ref = React.useRef<any>(null);
+  const onTest =
+    useScrollRefScroll === true
+      ? () => {
+          ref?.current?.getScrollResponder()?.scrollToEnd();
+        }
+      : null;
+
+  return (
+    <BaseFlatListExample
+      ref={ref}
+      exampleProps={exampleProps}
+      onTest={onTest}
+      testOutput={output}>
+      {offScreen === true ? <View style={styles.offScreen} /> : null}
+    </BaseFlatListExample>
+  );
+}
+
+const styles = StyleSheet.create({
+  offScreen: {
+    height: 1000,
+  },
+});

packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-horizontal-noWaitForInteraction.js

@@ -0,0 +1,30 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+
+import {FlatList_BaseOnViewableItemsChanged} from './FlatList-BaseOnViewableItemsChanged';
+import * as React from 'react';
+
+export default ({
+  title: 'onViewableItemsChanged horizontal',
+  name: 'onViewableItemsChanged-horizontal-noWaitForInteraction',
+  description:
+    'E2E Test:\nonViewableItemsChanged-horizontal-noWaitForInteraction',
+  hidden: true,
+  render: () => (
+    <FlatList_BaseOnViewableItemsChanged
+      horizontal={true}
+      waitForInteraction={false}
+    />
+  ),
+}: RNTesterModuleExample);

packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-horizontal-offScreen.js

@@ -0,0 +1,29 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+
+import {FlatList_BaseOnViewableItemsChanged} from './FlatList-BaseOnViewableItemsChanged';
+import * as React from 'react';
+
+export default ({
+  title: 'onViewableItemsChanged horizontal',
+  name: 'onViewableItemsChanged-horizontal-offScreen',
+  description: 'E2E Test:\nonViewableItemsChanged-horizontal-offScreen',
+  hidden: true,
+  render: () => (
+    <FlatList_BaseOnViewableItemsChanged
+      horizontal={true}
+      waitForInteraction={true}
+    />
+  ),
+}: RNTesterModuleExample);

packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-horizontal-waitForInteraction.js

@@ -0,0 +1,30 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+
+import {FlatList_BaseOnViewableItemsChanged} from './FlatList-BaseOnViewableItemsChanged';
+import * as React from 'react';
+
+export default ({
+  title: 'onViewableItemsChanged horizontal',
+  name: 'onViewableItemsChanged-horizontal-waitForInteraction',
+  description:
+    'E2E Test:\nonViewableItemsChanged-horizontal-waitForInteraction',
+  hidden: true,
+  render: () => (
+    <FlatList_BaseOnViewableItemsChanged
+      horizontal={true}
+      waitForInteraction={true}
+    />
+  ),
+}: RNTesterModuleExample);

packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-noWaitForInteraction.js

@@ -0,0 +1,26 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+
+import {FlatList_BaseOnViewableItemsChanged} from './FlatList-BaseOnViewableItemsChanged';
+import * as React from 'react';
+
+export default ({
+  title: 'onViewableItemsChanged',
+  name: 'onViewableItemsChanged_noWaitForInteraction',
+  description: 'E2E Test:\nonViewableItemsChanged-noWaitForInteraction',
+  hidden: true,
+  render: () => (
+    <FlatList_BaseOnViewableItemsChanged waitForInteraction={false} />
+  ),
+}: RNTesterModuleExample);

packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-offScreen.js

@@ -0,0 +1,29 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+
+import {FlatList_BaseOnViewableItemsChanged} from './FlatList-BaseOnViewableItemsChanged';
+import * as React from 'react';
+
+export default ({
+  title: 'onViewableItemsChanged offScreen',
+  name: 'onViewableItemsChanged-offScreen',
+  description: 'E2E Test:\nonViewableItemsChanged-offScreen',
+  hidden: true,
+  render: () => (
+    <FlatList_BaseOnViewableItemsChanged
+      offScreen={true}
+      waitForInteraction={true}
+    />
+  ),
+}: RNTesterModuleExample);

packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-waitForInteraction.js

@@ -0,0 +1,26 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+
+import {FlatList_BaseOnViewableItemsChanged} from './FlatList-BaseOnViewableItemsChanged';
+import * as React from 'react';
+
+export default ({
+  title: 'onViewableItemsChanged',
+  name: 'onViewableItemsChanged-waitForInteraction',
+  description: 'E2E Test:\nonViewableItemsChanged-waitForInteraction',
+  hidden: true,
+  render: () => (
+    <FlatList_BaseOnViewableItemsChanged waitForInteraction={true} />
+  ),
+}: RNTesterModuleExample);

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

@@ -11,76 +11,15 @@
 'use strict';
 
 import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
-import type {ViewToken} from 'react-native/Libraries/Lists/ViewabilityHelper';
 
-import BaseFlatListExample from './BaseFlatListExample';
+import {FlatList_BaseOnViewableItemsChanged} from './FlatList-BaseOnViewableItemsChanged';
 import * as React from 'react';
-import {FlatList, StyleSheet, View} from 'react-native';
-
-type FlatListProps = React.ElementProps<typeof FlatList>;
-type ViewabilityConfig = $PropertyType<FlatListProps, 'viewabilityConfig'>;
-
-const VIEWABILITY_CONFIG = {
-  minimumViewTime: 1000,
-  viewAreaCoveragePercentThreshold: 100,
-  waitForInteraction: true,
-};
-
-export function FlatList_onViewableItemsChanged(props: {
-  viewabilityConfig: ViewabilityConfig,
-  offScreen?: ?boolean,
-  horizontal?: ?boolean,
-  useScrollRefScroll?: ?boolean,
-}): React.Node {
-  const {viewabilityConfig, offScreen, horizontal, useScrollRefScroll} = props;
-  const [output, setOutput] = React.useState('');
-  const onViewableItemsChanged = React.useCallback(
-    (info: {changed: Array<ViewToken>, viewableItems: Array<ViewToken>, ...}) =>
-      setOutput(
-        info.viewableItems
-          .filter(viewToken => viewToken.index != null && viewToken.isViewable)
-          .map(viewToken => viewToken.item)
-          .join(', '),
-      ),
-    [setOutput],
-  );
-  const exampleProps = {
-    onViewableItemsChanged,
-    viewabilityConfig,
-    horizontal,
-  };
-
-  const ref = React.useRef<any>(null);
-  const onTest =
-    useScrollRefScroll === true
-      ? () => {
-          ref?.current?.getScrollResponder()?.scrollToEnd();
-        }
-      : null;
-
-  return (
-    <BaseFlatListExample
-      ref={ref}
-      exampleProps={exampleProps}
-      onTest={onTest}
-      testOutput={output}>
-      {offScreen === true ? <View style={styles.offScreen} /> : null}
-    </BaseFlatListExample>
-  );
-}
-
-const styles = StyleSheet.create({
-  offScreen: {
-    height: 1000,
-  },
-});
 
 export default ({
-  title: 'onViewableItemsChanged',
+  title: 'FlatList onViewableItemsChanged',
   name: 'onViewableItemsChanged',
-  description:
-    'Scroll list to see what items are returned in `onViewableItemsChanged` callback.',
+  description: 'Test onViewableItemsChanged behavior',
   render: () => (
-    <FlatList_onViewableItemsChanged viewabilityConfig={VIEWABILITY_CONFIG} />
+    <FlatList_BaseOnViewableItemsChanged waitForInteraction={true} />
   ),
 }: RNTesterModuleExample);

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

@@ -18,6 +18,12 @@ import NestedExample from './FlatList-nested';
 import OnEndReachedExample from './FlatList-onEndReached';
 import OnStartReachedExample from './FlatList-onStartReached';
 import onViewableItemsChangedExample from './FlatList-onViewableItemsChanged';
+import onViewableItemsChanged_waitForInteractionExample from './FlatList-onViewableItemsChanged-waitForInteraction';
+import onViewableItemsChanged_noWaitwaitForInteractionExample from './FlatList-onViewableItemsChanged-noWaitForInteraction';
+import onViewableItemsChanged_offScreen from './FlatList-onViewableItemsChanged-offScreen';
+import onViewableItemsChanged_horizontal_noWaitForInteraction from './FlatList-onViewableItemsChanged-horizontal-noWaitForInteraction';
+import onViewableItemsChanged_horizontal_waitForInteraction from './FlatList-onViewableItemsChanged-horizontal-waitForInteraction';
+import onViewableItemsChanged_horizontal_offScreen from './FlatList-onViewableItemsChanged-horizontal-offScreen';
 import StickyHeadersExample from './FlatList-stickyHeaders';
 import WithSeparatorsExample from './FlatList-withSeparators';
 
@@ -39,5 +45,11 @@ export default ({
     MultiColumnExample,
     StickyHeadersExample,
     NestedExample,
+    onViewableItemsChanged_waitForInteractionExample,
+    onViewableItemsChanged_noWaitwaitForInteractionExample,
+    onViewableItemsChanged_horizontal_waitForInteraction,
+    onViewableItemsChanged_horizontal_noWaitForInteraction,
+    onViewableItemsChanged_offScreen,
+    onViewableItemsChanged_horizontal_offScreen,
   ],
 }: RNTesterModule);

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

@@ -0,0 +1,74 @@
+/**
+ * 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 type {ViewToken} from 'react-native/Libraries/Lists/ViewabilityHelper';
+
+import SectionListBaseExample from './SectionListBaseExample';
+import * as React from 'react';
+import {SectionList, StyleSheet, View} from 'react-native';
+
+type SectionListProps = React.ElementProps<typeof SectionList>;
+type ViewabilityConfig = $PropertyType<SectionListProps, 'viewabilityConfig'>;
+
+const BASE_VIEWABILITY_CONFIG = {
+  minimumViewTime: 1000,
+  viewAreaCoveragePercentThreshold: 100,
+};
+
+export function SectionList_BaseOnViewableItemsChanged(props: {
+  offScreen?: ?boolean,
+  horizontal?: ?boolean,
+  useScrollRefScroll?: ?boolean,
+  waitForInteraction?: ?boolean,
+}): React.Node {
+  const {offScreen, horizontal, useScrollRefScroll, waitForInteraction} = props;
+  const [output, setOutput] = React.useState('');
+  const viewabilityConfig: ViewabilityConfig = {
+    ...BASE_VIEWABILITY_CONFIG,
+    waitForInteraction: waitForInteraction ?? false,
+  };
+  const exampleProps = {
+    onViewableItemsChanged: (info: {
+      changed: Array<ViewToken>,
+      viewableItems: Array<ViewToken>,
+      ...
+    }) =>
+      setOutput(
+        info.viewableItems
+          .filter(viewToken => viewToken.index != null && viewToken.isViewable)
+          .map(viewToken => viewToken.item)
+          .join(', '),
+      ),
+    viewabilityConfig,
+    horizontal,
+  };
+  const ref = React.useRef<any>(null);
+  const onTest =
+    useScrollRefScroll === true
+      ? () => {
+          ref?.current?.getScrollResponder()?.scrollToEnd();
+        }
+      : null;
+
+  return (
+    <SectionListBaseExample
+      ref={ref}
+      exampleProps={exampleProps}
+      onTest={onTest}
+      testOutput={output}>
+      {offScreen === true ? <View style={styles.offScreen} /> : null}
+    </SectionListBaseExample>
+  );
+}
+const styles = StyleSheet.create({
+  offScreen: {
+    height: 1000,
+  },
+});

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

@@ -77,7 +77,7 @@ const styles = StyleSheet.create({
 export default {
   title: 'SectionList Content Inset',
   platform: 'ios',
-  name: 'SectionList-contentInset',
+  name: 'contentInset',
   render: function (): React.MixedElement {
     return <SectionList_contentInset />;
   },

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

@@ -37,7 +37,7 @@ export function SectionList_inverted(): React.Node {
 
 export default {
   title: 'SectionList Inverted',
-  name: 'SectionList-inverted',
+  name: 'inverted',
   render: function (): React.MixedElement {
     return <SectionList_inverted />;
   },

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

@@ -39,7 +39,7 @@ export function SectionList_onEndReached(): React.Node {
 
 export default {
   title: 'SectionList onEndReached',
-  name: 'SectionList-onEndReached',
+  name: 'onEndReached',
   description: 'Test onEndReached behavior',
   render: function (): React.MixedElement {
     return <SectionList_onEndReached />;

packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal-noWaitForInteraction.js

@@ -0,0 +1,29 @@
+/**
+ * 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 {SectionList_BaseOnViewableItemsChanged} from './SectionList-BaseOnViewableItemsChanged';
+
+import * as React from 'react';
+
+export default {
+  title: 'onViewableItemsChanged horizontal',
+  name: 'onViewableItemsChanged-horizontal-noWaitForInteraction',
+  description:
+    'E2E Test:\nonViewableItemsChanged-horizontal-noWaitForInteraction',
+  hidden: true,
+  render: function (): React.MixedElement {
+    return (
+      <SectionList_BaseOnViewableItemsChanged
+        horizontal={true}
+        waitForInteraction={false}
+      />
+    );
+  },
+};

packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal-offScreen-noWaitForInteraction.js

@@ -0,0 +1,30 @@
+/**
+ * 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 {SectionList_BaseOnViewableItemsChanged} from './SectionList-BaseOnViewableItemsChanged';
+
+import * as React from 'react';
+
+export default {
+  title: 'onViewableItemsChanged horizontal',
+  name: 'onViewableItemsChanged-horizontal-offScreen-noWaitForInteraction',
+  description:
+    'E2E Test:\nonViewableItemsChanged-horizontal-offScreen-noWaitForInteraction',
+  hidden: true,
+  render: function (): React.MixedElement {
+    return (
+      <SectionList_BaseOnViewableItemsChanged
+        horizontal={true}
+        offScreen={true}
+        waitForInteraction={false}
+      />
+    );
+  },
+};

packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal-waitForInteraction.js

@@ -0,0 +1,29 @@
+/**
+ * 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 {SectionList_BaseOnViewableItemsChanged} from './SectionList-BaseOnViewableItemsChanged';
+
+import * as React from 'react';
+
+export default {
+  title: 'onViewableItemsChanged horizontal',
+  name: 'onViewableItemsChanged-horizontal-waitForInteraction',
+  description:
+    'E2E Test:\nonViewableItemsChanged-horizontal-waitForInteraction',
+  hidden: true,
+  render: function (): React.MixedElement {
+    return (
+      <SectionList_BaseOnViewableItemsChanged
+        horizontal={true}
+        waitForInteraction={true}
+      />
+    );
+  },
+};

packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-noWaitForInteraction.js

@@ -0,0 +1,24 @@
+/**
+ * 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 {SectionList_BaseOnViewableItemsChanged} from './SectionList-BaseOnViewableItemsChanged';
+
+import * as React from 'react';
+
+export default {
+  title: 'onViewableItemsChanged',
+  name: 'onViewableItemsChanged-noWaitForInteraction',
+  description: 'E2E Test:\nonViewableItemsChanged-noWaitForInteraction',
+  render: function (): React.MixedElement {
+    return (
+      <SectionList_BaseOnViewableItemsChanged waitForInteraction={false} />
+    );
+  },
+};

packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-offScreen-noWaitForInteraction.js

@@ -0,0 +1,29 @@
+/**
+ * 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 {SectionList_BaseOnViewableItemsChanged} from './SectionList-BaseOnViewableItemsChanged';
+
+import * as React from 'react';
+
+export default {
+  title: 'onViewableItemsChanged offScreen',
+  name: 'onViewableItemsChanged-offScreen-noWaitForInteraction',
+  description:
+    'E2E Test:\nonViewableItemsChanged-offScreen-noWaitForInteraction',
+  hidden: true,
+  render: function (): React.MixedElement {
+    return (
+      <SectionList_BaseOnViewableItemsChanged
+        offScreen={true}
+        waitForInteraction={false}
+      />
+    );
+  },
+};

packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-waitForInteraction.js

@@ -0,0 +1,23 @@
+/**
+ * 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 {SectionList_BaseOnViewableItemsChanged} from './SectionList-BaseOnViewableItemsChanged';
+
+import * as React from 'react';
+
+export default {
+  title: 'onViewableItemsChanged',
+  name: 'onViewableItemsChanged-waitForInteraction',
+  description: 'E2E Test:\nonViewableItemsChanged-waitForInteraction',
+  hidden: true,
+  render: function (): React.MixedElement {
+    return <SectionList_BaseOnViewableItemsChanged waitForInteraction={true} />;
+  },
+};

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

@@ -8,76 +8,17 @@
  * @flow
  */
 
-import type {ViewToken} from 'react-native/Libraries/Lists/ViewabilityHelper';
+import {SectionList_BaseOnViewableItemsChanged} from './SectionList-BaseOnViewableItemsChanged';
 
-import SectionListBaseExample from './SectionListBaseExample';
 import * as React from 'react';
-import {SectionList, StyleSheet, View} from 'react-native';
-
-const VIEWABILITY_CONFIG = {
-  minimumViewTime: 1000,
-  viewAreaCoveragePercentThreshold: 100,
-  waitForInteraction: true,
-};
-
-type SectionListProps = React.ElementProps<typeof SectionList>;
-type ViewabilityConfig = $PropertyType<SectionListProps, 'viewabilityConfig'>;
-
-export function SectionList_onViewableItemsChanged(props: {
-  viewabilityConfig: ViewabilityConfig,
-  offScreen?: ?boolean,
-  horizontal?: ?boolean,
-  useScrollRefScroll?: ?boolean,
-}): React.Node {
-  const {viewabilityConfig, offScreen, horizontal, useScrollRefScroll} = props;
-  const [output, setOutput] = React.useState('');
-  const exampleProps = {
-    onViewableItemsChanged: (info: {
-      changed: Array<ViewToken>,
-      viewableItems: Array<ViewToken>,
-      ...
-    }) =>
-      setOutput(
-        info.viewableItems
-          .filter(viewToken => viewToken.index != null && viewToken.isViewable)
-          .map(viewToken => viewToken.item)
-          .join(', '),
-      ),
-    viewabilityConfig,
-    horizontal,
-  };
-  const ref = React.useRef<any>(null);
-  const onTest =
-    useScrollRefScroll === true
-      ? () => {
-          ref?.current?.getScrollResponder()?.scrollToEnd();
-        }
-      : null;
-
-  return (
-    <SectionListBaseExample
-      ref={ref}
-      exampleProps={exampleProps}
-      onTest={onTest}
-      testOutput={output}>
-      {offScreen === true ? <View style={styles.offScreen} /> : null}
-    </SectionListBaseExample>
-  );
-}
-const styles = StyleSheet.create({
-  offScreen: {
-    height: 1000,
-  },
-});
 
 export default {
-  title: 'SectionList On Viewable Items Changed',
-  name: 'SectionList_onViewableItemsChanged',
+  title: 'SectionList onViewableItemsChanged',
+  name: 'onViewableItemsChanged',
+  description: 'Test onViewableItemsChanged behavior',
   render: function (): React.MixedElement {
     return (
-      <SectionList_onViewableItemsChanged
-        viewabilityConfig={VIEWABILITY_CONFIG}
-      />
+      <SectionList_BaseOnViewableItemsChanged waitForInteraction={false} />
     );
   },
 };

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

@@ -358,7 +358,7 @@ const styles = StyleSheet.create({
 
 export default {
   title: 'SectionList scrollable',
-  name: 'SectionList-scrollable',
+  name: 'scrollable',
   render: function (): React.MixedElement {
     return <SectionList_scrollable />;
   },

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

@@ -43,7 +43,7 @@ export function SectionList_stickySectionHeadersEnabled(): React.Node {
 
 export default {
   title: 'SectionList Sticky Headers Enabled',
-  name: 'SectionList-stickyHeadersEnabled',
+  name: 'stickyHeadersEnabled',
   description: 'Toggle sticky headers on/off',
   render: function (): React.MixedElement {
     return <SectionList_stickySectionHeadersEnabled />;

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

@@ -53,7 +53,7 @@ const styles = StyleSheet.create({
 
 export default {
   title: 'SectionList With Separators',
-  name: 'SectionList-withSeparators',
+  name: 'withSeparators',
   render: function (): React.MixedElement {
     return <SectionList_withSeparators />;
   },

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

@@ -33,7 +33,7 @@ const DATA = [
   },
   {
     title: 'Desserts',
-    data: ['Cheesecake', 'Ice Cream'],
+    data: ['Cheesecake', 'Brownie'],
   },
 ];
 

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

@@ -11,10 +11,16 @@
 'use strict';
 
 import ContentInset from './SectionList-contentInset';
+import Scrollable from './SectionList-scrollable';
 import inverted from './SectionList-inverted';
 import onEndReached from './SectionList-onEndReached';
 import onViewableItemsChanged from './SectionList-onViewableItemsChanged';
-import Scrollable from './SectionList-scrollable';
+import onViewableItemsChanged_horizontal_noWaitForInteraction from './SectionList-onViewableItemsChanged-horizontal-noWaitForInteraction';
+import onViewableItemsChanged_horizontal_offScreen_noWaitForInteraction from './SectionList-onViewableItemsChanged-horizontal-offScreen-noWaitForInteraction';
+import onViewableItemsChanged_horizontal_waitForInteraction from './SectionList-onViewableItemsChanged-horizontal-waitForInteraction';
+import onViewableItemsChanged_noWaitForInteraction from './SectionList-onViewableItemsChanged-noWaitForInteraction';
+import onViewableItemsChanged_offScreen_noWaitForInteraction from './SectionList-onViewableItemsChanged-offScreen-noWaitForInteraction';
+import onViewableItemsChanged_waitForInteraction from './SectionList-onViewableItemsChanged-waitForInteraction';
 import stickyHeadersEnabled from './SectionList-stickyHeadersEnabled';
 import withSeparators from './SectionList-withSeparators';
 
@@ -31,4 +37,10 @@ exports.examples = [
   stickyHeadersEnabled,
   inverted,
   Scrollable,
+  onViewableItemsChanged_noWaitForInteraction,
+  onViewableItemsChanged_waitForInteraction,
+  onViewableItemsChanged_horizontal_noWaitForInteraction,
+  onViewableItemsChanged_horizontal_waitForInteraction,
+  onViewableItemsChanged_horizontal_offScreen_noWaitForInteraction,
+  onViewableItemsChanged_offScreen_noWaitForInteraction,
 ];

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

@@ -16,6 +16,7 @@ export type RNTesterModuleExample = $ReadOnly<{|
   platform?: 'ios' | 'android',
   description?: string,
   expect?: string,
+  hidden?: boolean,
   render: ({testID?: ?string}) => React.Node,
 |}>;