refactor(test): fix scroll-to-top e2e test on Android

FabricExample/e2e/e2e-utils.ts

@@ -7,7 +7,7 @@ export const describeIfiOS =
 export const describeIfAndroid =
   device.getPlatform() === 'android' ? describe : describe.skip;
 
-async function scrollUntilVisible(id: string, scrollViewId: string) {
+export async function scrollUntilVisible(id: string, scrollViewId: string) {
   await waitFor(element(by.id(id)))
     .toBeVisible()
     .whileElement(by.id(scrollViewId))
@@ -72,18 +72,18 @@ export async function getElementAttributes(
   testLabel: string,
 ): Promise<ElementAttributes> {
   const attrs = await element(by.label(testLabel)).getAttributes();
-  
+
   if ('elements' in attrs) {
     throw new Error(
-      `Multiple elements (${attrs.elements.length}) found for label: "${testLabel}". `
+      `Multiple elements (${attrs.elements.length}) found for label: "${testLabel}". `,
     );
   }
-  
+
   return attrs as ElementAttributes;
 }
 
 /**
- * Performs a coordinate-based tap on iOS to interact with an element that may be 
+ * Performs a coordinate-based tap on iOS to interact with an element that may be
  * obstructed by other UI layers, bypassing Detox's default visibility checks.
  */
 export async function forceTapByLabeliOS(testLabel: string) {

FabricExample/e2e/single-feature-tests/tabs/test-tabs-special-effects-scroll-to-top.e2e.ts

@@ -1,11 +1,11 @@
 import { device, expect, element, by } from 'detox';
 import {
+  scrollUntilVisible,
   selectSingleFeatureTestsScreen,
   forceTapByLabeliOS,
 } from '../../e2e-utils';
-
 /**
- * Selects a tab bar item. On iOS, this uses a forced coordinate tap to 
+ * Selects a tab bar item. On iOS, this uses a forced coordinate tap to
  * ensure the tab is selected even if it is obstructed by the iOS 26 Liquid Glass lens.
  */
 async function forceSelectTabByLabel(label: string) {
@@ -38,7 +38,7 @@ describe('Tabs specialEffects — scrollToTop', () => {
   });
 
   it('Tab1 (scrollToTop: true) — re-tapping active tab scrolls list back to top', async () => {
-    await element(by.id('tab1-scrollview')).scroll(300, 'down', NaN, 0.85);
+    await scrollUntilVisible('tab1-item-22', 'tab1-scrollview');
     await expect(element(by.id('tab1-item-1'))).not.toBeVisible();
 
     await forceSelectTabByLabel('tab1-tab-item-label');
@@ -52,7 +52,7 @@ describe('Tabs specialEffects — scrollToTop', () => {
     await element(by.id('tab2-tab-item')).tap();
     await expect(element(by.id('tab2-item-1'))).toBeVisible();
 
-    await element(by.id('tab2-scrollview')).scroll(300, 'down', NaN, 0.85);
+    await scrollUntilVisible('tab2-item-22', 'tab2-scrollview');
     await expect(element(by.id('tab2-item-1'))).not.toBeVisible();
 
     await forceSelectTabByLabel('tab2-tab-item-label');
@@ -64,7 +64,7 @@ describe('Tabs specialEffects — scrollToTop', () => {
     await element(by.id('tab3-tab-item')).tap();
     await expect(element(by.id('tab3-item-1'))).toBeVisible();
 
-    await element(by.id('tab3-scrollview')).scroll(300, 'down', NaN, 0.85);
+    await scrollUntilVisible('tab3-item-22', 'tab3-scrollview');
     await expect(element(by.id('tab3-item-1'))).not.toBeVisible();
 
     await forceSelectTabByLabel('tab3-tab-item-label');
@@ -78,7 +78,7 @@ describe('Tabs specialEffects — scrollToTop', () => {
     await forceSelectTabByLabel('tab1-tab-item-label');
     await expect(element(by.id('tab1-item-1'))).toBeVisible();
 
-    await element(by.id('tab1-scrollview')).scroll(300, 'down', NaN, 0.85);
+    await scrollUntilVisible('tab1-item-22', 'tab1-scrollview');
     await expect(element(by.id('tab1-item-1'))).not.toBeVisible();
 
     await forceSelectTabByLabel('tab3-tab-item-label');

apps/src/tests/single-feature-tests/tabs/test-tabs-special-effects-scroll-to-top/index.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import { ScrollView, StyleSheet, Text } from 'react-native';
+import { Platform, ScrollView, StyleSheet, Text } from 'react-native';
 import type { ScenarioDescription } from '@apps/tests/shared/helpers';
 import { createScenario } from '@apps/tests/shared/helpers';
 import {
   TabsContainer,
   type TabRouteConfig,
   DEFAULT_TAB_ROUTE_OPTIONS,
 } from '@apps/shared/gamma/containers/tabs';
+import { SafeAreaView } from 'react-native-screens/experimental';
 
 const scenarioDescription: ScenarioDescription = {
   name: 'Tabs special effect scroll to top',
@@ -22,14 +23,21 @@ interface ScrollScreenProps {
 
 export function ScrollScreen({ tabName }: ScrollScreenProps) {
   return (
-    <ScrollView testID={`${tabName}-scrollview`}>
-      <Text style={styles.hint}>Scroll Screen — scroll down or re-tap the tab.</Text>
-      {Array.from({ length: 50 }, (_, i) => (
-        <Text key={i} testID={`${tabName}-item-${i + 1}`} style={styles.item}>
-          Item {i + 1}
-        </Text>
-      ))}
-    </ScrollView>
+    <SafeAreaView
+      edges={{
+        bottom: Platform.OS === 'android',
+        top: Platform.OS === 'android',
+      }}
+    >
+      <ScrollView testID={`${tabName}-scrollview`}>
+        <Text style={styles.hint}>Scroll Screen — scroll down or re-tap the tab.</Text>
+        {Array.from({ length: 50 }, (_, i) => (
+          <Text key={i} testID={`${tabName}-item-${i + 1}`} style={styles.item}>
+            Item {i + 1}
+          </Text>
+        ))}
+      </ScrollView>
+    </SafeAreaView>
   );
 }