diff --git a/packages/rn-tester/.maestro/sectionlist-viewability.yml b/packages/rn-tester/.maestro/sectionlist-viewability.yml
index f676165500f6..52898cb16bcc 100644
--- a/packages/rn-tester/.maestro/sectionlist-viewability.yml
+++ b/packages/rn-tester/.maestro/sectionlist-viewability.yml
@@ -28,15 +28,16 @@ appId: ${APP_ID} # iOS: com.meta.RNTester.localDevelopment | Android: com.facebo
visible:
id: 'section-list-viewability-horizontal-wait'
timeout: 30000
-# The example requires 100% item visibility before reporting viewability.
-# Target Cheesecake, the item asserted in the output below.
-- scrollUntilVisible:
- element:
+# Tap twice: the first scroll uses estimated layout and measures Cheesecake,
+# the second centers it exactly now that its metrics are known.
+- tapOn:
+ id: 'start_test'
+- extendedWaitUntil:
+ visible:
id: 'Cheesecake'
- direction: RIGHT
- speed: 60
- visibilityPercentage: 100
- timeout: 120000
+ timeout: 30000
+- tapOn:
+ id: 'start_test'
- extendedWaitUntil:
visible:
id: 'output'
@@ -52,14 +53,15 @@ appId: ${APP_ID} # iOS: com.meta.RNTester.localDevelopment | Android: com.facebo
visible:
id: 'section-list-viewability-vertical-wait'
timeout: 30000
- - scrollUntilVisible:
- element:
- text: 'Brownie'
- direction: DOWN
- speed: 60
- visibilityPercentage: 50
- centerElement: true
- timeout: 60000
+ # Same two-tap deterministic scroll as the horizontal step above.
+ - tapOn:
+ id: 'start_test'
+ - extendedWaitUntil:
+ visible:
+ id: 'Cheesecake'
+ timeout: 30000
+ - tapOn:
+ id: 'start_test'
- extendedWaitUntil:
visible:
id: 'output'
diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-BaseOnViewableItemsChanged.js b/packages/rn-tester/js/examples/SectionList/SectionList-BaseOnViewableItemsChanged.js
index 69e459970f3e..e4e61698ac0d 100644
--- a/packages/rn-tester/js/examples/SectionList/SectionList-BaseOnViewableItemsChanged.js
+++ b/packages/rn-tester/js/examples/SectionList/SectionList-BaseOnViewableItemsChanged.js
@@ -25,8 +25,15 @@ export function SectionList_BaseOnViewableItemsChanged(props: {
horizontal?: ?boolean,
useScrollRefScroll?: ?boolean,
waitForInteraction?: ?boolean,
+ scrollToLocationOnTest?: ?{sectionIndex: number, itemIndex: number},
}): React.Node {
- const {offScreen, horizontal, useScrollRefScroll, waitForInteraction} = props;
+ const {
+ offScreen,
+ horizontal,
+ useScrollRefScroll,
+ waitForInteraction,
+ scrollToLocationOnTest,
+ } = props;
const exampleTestID = `section-list-viewability-${
horizontal === true ? 'horizontal' : 'vertical'
}-${waitForInteraction === true ? 'wait' : 'no-wait'}`;
@@ -56,7 +63,18 @@ export function SectionList_BaseOnViewableItemsChanged(props: {
? () => {
ref?.current?.getScrollResponder()?.scrollToEnd();
}
- : null;
+ : scrollToLocationOnTest != null
+ ? () => {
+ // Programmatic scrolls don't trigger `onScrollBeginDrag`, so latch
+ // `waitForInteraction` explicitly before scrolling.
+ ref?.current?.recordInteraction();
+ ref?.current?.scrollToLocation({
+ ...scrollToLocationOnTest,
+ viewPosition: 0.5,
+ animated: false,
+ });
+ }
+ : null;
return (
);
},
diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-waitForInteraction.js b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-waitForInteraction.js
index ca5e6e2923a3..3b7f8fe1ae75 100644
--- a/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-waitForInteraction.js
+++ b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-waitForInteraction.js
@@ -17,6 +17,12 @@ export default {
description: 'E2E Test:\nonViewableItemsChanged-waitForInteraction',
hidden: true,
render: function (): React.MixedElement {
- return ;
+ return (
+
+ );
},
};