Migrate FlatList/SectionList from Catalyst to RNTester

Summary:
**Context**

- RNTester can be built for ios/android on new/legacy arch
- We are migrating all our catalyst rntester E2E tests to rntester standalone
- [Here is a list](https://docs.google.com/document/d/16ga5R-c2kBx_l2ATTcHL7aJiSSt3eEXQV9tD4MvSb4Q) of E2E tests w/ `coverages: ["internal"]`
- The FlatList/Section list tests were never run on RNTester. These were only accessible via the Catalyst E2E test landing page
 {F1835450142}

**Change**

- Migrate FlatList/SectionList from Catalyst to RNTester
- Fix deeplinks for rntester (remove `viewability-` prefix)
- Add a `isE2ETestCase` flag for these test cases since we don't want to show all these similar versions in the UI
|without flag|with flag|
|{F1835455698}| {F1835488548} |

NOTE: There are some flakey rntester e2e tests. Will do my best to forward fix or disable if they cause too much churn.

Differential Revision: D62002065

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 hideE2ETestCases = (ex: RNTesterModuleExample) =>
+ ex.isE2ETestCase !== true;
  const sections = [
  {
- data: module.examples,
+ data: module.examples.filter(hideE2ETestCases),
  title: 'EXAMPLES',
  key: 'e',
  },

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

@@ -10,7 +10,6 @@
 
 'use strict';
 
-import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 import type {ViewToken} from 'react-native/Libraries/Lists/ViewabilityHelper';
 
 import BaseFlatListExample from './BaseFlatListExample';
@@ -20,13 +19,7 @@ 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: {
+export function FlatList_onViewableItemsChanged_base(props: {
  viewabilityConfig: ViewabilityConfig,
  offScreen?: ?boolean,
  horizontal?: ?boolean,
@@ -74,13 +67,3 @@ const styles = StyleSheet.create({
  height: 1000,
  },
 });
-
-export default ({
- title: 'onViewableItemsChanged',
- name: 'onViewableItemsChanged',
- description:
- 'Scroll list to see what items are returned in `onViewableItemsChanged` callback.',
- render: () => (
- <FlatList_onViewableItemsChanged viewabilityConfig={VIEWABILITY_CONFIG} />
- ),
-}: RNTesterModuleExample);

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

@@ -0,0 +1,33 @@
+/**
+ * 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_onViewableItemsChanged_base} from 'FlatList-onViewableItemsChanged-base';
+import * as React from 'react';
+
+const VIEWABILITY_CONFIG_WAIT_FOR_INTERACTION = {
+ minimumViewTime: 1000,
+ viewAreaCoveragePercentThreshold: 100,
+ waitForInteraction: true,
+};
+
+export default ({
+ title: 'FlatList onViewableItemsChanged',
+ name: 'onViewableItemsChanged-waitForInteraction',
+ description: 'Test onViewableItemsChanged behavior',
+ render: () => (
+ <FlatList_onViewableItemsChanged_base
+ viewabilityConfig={VIEWABILITY_CONFIG_WAIT_FOR_INTERACTION}
+ />
+ ),
+}: RNTesterModuleExample);

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

@@ -0,0 +1,35 @@
+/**
+ * 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_onViewableItemsChanged_base} from 'FlatList-onViewableItemsChanged-base';
+import * as React from 'react';
+
+const VIEWABILITY_CONFIG_WAIT_FOR_INTERACTION = {
+ minimumViewTime: 1000,
+ viewAreaCoveragePercentThreshold: 100,
+ waitForInteraction: true,
+};
+
+export default ({
+ title: 'onViewableItemsChanged',
+ name: 'onViewableItemsChanged-horizontal',
+ description: 'E2E Testing:\nonViewableItemsChanged-horizontal',
+ isE2ETestCase: true,
+ render: () => (
+ <FlatList_onViewableItemsChanged_base
+ horizontal
+ viewabilityConfig={VIEWABILITY_CONFIG_WAIT_FOR_INTERACTION}
+ />
+ ),
+}: RNTesterModuleExample);

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

@@ -0,0 +1,36 @@
+/**
+ * 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_onViewableItemsChanged_base} from 'FlatList-onViewableItemsChanged-base';
+import * as React from 'react';
+
+const VIEWABILITY_CONFIG_WAIT_FOR_INTERACTION = {
+ minimumViewTime: 1000,
+ viewAreaCoveragePercentThreshold: 100,
+ waitForInteraction: true,
+};
+
+export default ({
+ title: 'onViewableItemsChanged',
+ name: 'onViewableItemsChanged-horizontal-waitForInteraction',
+ description:
+ 'E2E Testing:\nonViewableItemsChanged-horizontal-waitForInteraction',
+ isE2ETestCase: true,
+ render: () => (
+ <FlatList_onViewableItemsChanged_base
+ horizontal
+ viewabilityConfig={VIEWABILITY_CONFIG_WAIT_FOR_INTERACTION}
+ />
+ ),
+}: RNTesterModuleExample);

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

@@ -0,0 +1,35 @@
+/**
+ * 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_onViewableItemsChanged_base} from 'FlatList-onViewableItemsChanged-base';
+import * as React from 'react';
+
+const VIEWABILITY_CONFIG_WAIT_FOR_INTERACTION = {
+ minimumViewTime: 1000,
+ viewAreaCoveragePercentThreshold: 100,
+ waitForInteraction: true,
+};
+
+export default ({
+ title: 'onViewableItemsChanged',
+ name: 'onViewableItemsChanged-horizontal',
+ description: 'E2E Testing:\nonViewableItemsChanged-horizontal',
+ isE2ETestCase: true,
+ render: () => (
+ <FlatList_onViewableItemsChanged_base
+ horizontal
+ viewabilityConfig={VIEWABILITY_CONFIG_WAIT_FOR_INTERACTION}
+ />
+ ),
+}: RNTesterModuleExample);

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

@@ -0,0 +1,34 @@
+/**
+ * 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_onViewableItemsChanged_base} from 'FlatList-onViewableItemsChanged-base';
+import * as React from 'react';
+
+const VIEWABILITY_CONFIG_NO_WAIT_FOR_INTERACTION = {
+ minimumViewTime: 1000,
+ viewAreaCoveragePercentThreshold: 100,
+ waitForInteraction: false,
+};
+
+export default ({
+ title: 'onViewableItemsChanged',
+ name: 'onViewableItemsChanged_noWaitForInteraction',
+ description: 'E2E Testing:\nonViewableItemsChanged-noWaitForInteraction',
+ isE2ETestCase: true,
+ render: () => (
+ <FlatList_onViewableItemsChanged_base
+ viewabilityConfig={VIEWABILITY_CONFIG_NO_WAIT_FOR_INTERACTION}
+ />
+ ),
+}: RNTesterModuleExample);

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

@@ -0,0 +1,35 @@
+/**
+ * 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_onViewableItemsChanged_base} from 'FlatList-onViewableItemsChanged-base';
+import * as React from 'react';
+
+const VIEWABILITY_CONFIG_WAIT_FOR_INTERACTION = {
+ minimumViewTime: 1000,
+ viewAreaCoveragePercentThreshold: 100,
+ waitForInteraction: true,
+};
+
+export default ({
+ title: 'onViewableItemsChanged',
+ name: 'onViewableItemsChanged-offScreen',
+ description: 'E2E Testing:\nonViewableItemsChanged-offScreen',
+ isE2ETestCase: true,
+ render: () => (
+ <FlatList_onViewableItemsChanged_base
+ offScreen
+ viewabilityConfig={VIEWABILITY_CONFIG_WAIT_FOR_INTERACTION}
+ />
+ ),
+}: RNTesterModuleExample);

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

@@ -0,0 +1,34 @@
+/**
+ * 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_onViewableItemsChanged_base} from 'FlatList-onViewableItemsChanged-base';
+import * as React from 'react';
+
+const VIEWABILITY_CONFIG_WAIT_FOR_INTERACTION = {
+ minimumViewTime: 1000,
+ viewAreaCoveragePercentThreshold: 100,
+ waitForInteraction: true,
+};
+
+export default ({
+ title: 'onViewableItemsChanged',
+ name: 'onViewableItemsChanged-waitForInteraction',
+ description: 'E2E Testing:\nonViewableItemsChanged-waitForInteraction',
+ isE2ETestCase: true,
+ render: () => (
+ <FlatList_onViewableItemsChanged_base
+ viewabilityConfig={VIEWABILITY_CONFIG_WAIT_FOR_INTERACTION}
+ />
+ ),
+}: RNTesterModuleExample);

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

@@ -17,7 +17,13 @@ import MultiColumnExample from './FlatList-multiColumn';
 import NestedExample from './FlatList-nested';
 import OnEndReachedExample from './FlatList-onEndReached';
 import OnStartReachedExample from './FlatList-onStartReached';
-import onViewableItemsChangedExample from './FlatList-onViewableItemsChanged';
+import onViewableItemsChangedExample from './FlatList-onViewableItemsChanged-default';
+import onViewableItemsChanged_waitForInteractionExample from './FlatList-onViewableItemsChanged-waitForInteraction';
+import onViewableItemsChanged_noWaitwaitForInteractionExample from './FlatList-onViewableItemsChanged-noWaitForInteraction';
+import onViewableItemsChanged_offScreen from './FlatList-onViewableItemsChanged-offScreen';
+import onViewableItemsChanged_horizontal from './FlatList-onViewableItemsChanged-horizontal';
+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_offScreen,
+ onViewableItemsChanged_horizontal,
+ onViewableItemsChanged_horizontal_waitForInteraction,
+ onViewableItemsChanged_horizontal_offScreen,
  ],
 }: RNTesterModule);

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

@@ -0,0 +1,65 @@
+/**
+ * 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'>;
+
+export function SectionList_onViewableItemsChanged_base(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,
+ },
+});