chore(e2e): maintenance for automated tests after iOS 26.2 (#3430)

## Description

Closes
https://github.com/software-mansion/react-native-screens-labs/issues/540

Broad changes after iOS 26.2 and some by-the-way fixes or improvements.
Not fixed tests:
iOS tests for example Test2809 should be aligned later with an output of
PR #3303.
iOS tests for examples Test645 and Test649 are affected by issue
[#566](https://github.com/software-mansion/react-native-screens-labs/issues/566)

## Changes

Detox e2e tests. Increased test isolation. Bar back button technical
selector depends now on ios version.
Some android emulators my get a pop-up about using stylus which
interrupts the test flow – it is disabled in the global config now.

## Checklist

- [x] Included code example that can be used to test this change
- [x] Updated TS types
- [x] Updated documentation: <!-- For adding new props to native-stack
-->
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
- [ ] Ensured that CI passes

---------

Co-authored-by: Krzysztof Wojnar <krzysztof.wojnar@swmansion.com>
Co-authored-by: Krzysztof Ligarski <63918941+kligarski@users.noreply.github.com>
Co-authored-by: Konrad Michalik <konrad.michalik@swmansion.com>

Author: 4 people

.github/workflows/android-e2e-test-fabric.yml

@@ -1,5 +1,18 @@
 name: Test Android e2e - new architecture
 on:
+  pull_request:
+    branches:
+      - main
+    paths:
+      - '.github/workflows/android-e2e-test-fabric.yml'
+      - 'package.json'
+      - 'android/**'
+      - 'common/**'
+      - 'FabricExample/**'
+      - 'src/**'
+  push:
+    branches:
+      - main
   workflow_dispatch:
 jobs:
   test:

.github/workflows/ios-e2e-test-fabric.yml

@@ -1,10 +1,24 @@
 name: Test iOS e2e - new architecture
 on:
+  pull_request:
+    branches:
+      - main
+    paths:
+      - '.github/workflows/ios-e2e-test-fabric.yml'
+      - 'RNScreens.podspec'
+      - 'package.json'
+      - 'ios/**'
+      - 'common/**'
+      - 'FabricExample/**'
+      - 'src/**'
+  push:
+    branches:
+      - main
   workflow_dispatch:
 jobs:
   test:
-    runs-on: macos-14
-    timeout-minutes: 60
+    runs-on: macos-26
+    timeout-minutes: 90
     env:
       WORKING_DIRECTORY: FabricExample
     concurrency:
@@ -21,7 +35,7 @@ jobs:
       - name: Use latest stable Xcode
         uses: maxim-lobanov/setup-xcode@v1
         with:
-          xcode-version: '16.1'
+          xcode-version: '26.2'
       - name: Get Xcode version
         run: xcodebuild -version
       - name: Install AppleSimulatorUtils

FabricExample/.detoxrc.js

@@ -1,3 +1,2 @@
 const utils = require('../scripts/e2e/detox-utils.cjs');
 module.exports = utils.commonDetoxConfigFactory('FabricExample');
-

FabricExample/e2e/e2e-utils.ts

@@ -1,9 +1,20 @@
 import { device, expect, element, by } from 'detox';
 
-export const describeIfiOS = device.getPlatform() === 'ios' ? describe : describe.skip;
+export const describeIfiOS =
+  device.getPlatform() === 'ios' ? describe : describe.skip;
 
-export async function selectTestScreen(screenName: string) {
-  await element(by.id('root-screen-switch-search-bar')).tap();
+async function scrollTo(id: string) {
+  await waitFor(element(by.id(id)))
+    .toBeVisible()
+    .whileElement(by.id('root-screen-examples-scrollview'))
+    .scroll(600, 'down', Number.NaN, 0.85);
+}
+
+export async function selectIssueTestScreen(screenName: string) {
+  await scrollTo('root-screen-issue-tests');
+  await element(by.id('root-screen-issue-tests')).tap();
+
+  await waitFor(element(by.id('issue-tests-scrollview'))).toBeVisible();
 
   if (device.getPlatform() === 'android') {
     await element(by.label('Search')).tap();
@@ -12,15 +23,10 @@ export async function selectTestScreen(screenName: string) {
     // I don't know why element(by.type('androidx.appcompat.widget.SearchView.SearchAutoComplete'))
     // does not work even if it appears in view hierarchy returned by Detox in debug logging mode.
     await element(by.text('')).replaceText(screenName);
-
-    // Press back to hide the keyboard.
-    // This is necessary to make sure that search results are not obstructed by the keyboard.
-    // More details: https://github.com/software-mansion/react-native-screens/pull/2919
-    await device.pressBack();
-  } else {
-    await element(by.type('UISearchBarTextField')).replaceText(screenName);
+  } else if (device.getPlatform() === 'ios') {
+    await element(by.traits(['searchField'])).typeText(screenName);
   }
 
-  await expect(element(by.id(`root-screen-tests-${screenName}`))).toBeVisible();
-  await element(by.id(`root-screen-tests-${screenName}`)).tap();
+  await expect(element(by.id(`issue-tests-${screenName}`))).toBeVisible();
+  await element(by.id(`issue-tests-${screenName}`)).tap();
 }

FabricExample/e2e/elements/back-button.ts

@@ -0,0 +1,36 @@
+import { device, element, by } from 'detox';
+import isVersionEqualOrHigherThan from '../helpers/isVersionEqualOrHigherThan';
+
+const { getIOSVersionNumber } = require('../../../scripts/e2e/ios-devices.js');
+
+const IOS_BAR_BUTTON_TYPE = '_UIButtonBarButton';
+const backButtonElement = element(by.id('BackButton'));
+
+export async function tapBarBackButton() {
+  const platform = device.getPlatform();
+  if (platform === 'ios') {
+    return (await getIOSBackButton()).tap();
+  } else if (platform === 'android') {
+    return backButtonElement.tap();
+  } else throw new Error(`Platform "${platform}" not supported`);
+}
+
+async function getIOSBackButton() {
+  const iosVersion = getIOSVersionNumber();
+  if (isVersionEqualOrHigherThan(iosVersion, '26.0')) {
+    const elementsByAttributes =
+      (await backButtonElement.getAttributes()) as unknown as {
+        elements: { className: string }[];
+      };
+    const elements = elementsByAttributes.elements;
+    if (Array.isArray(elements)) {
+      const uiBarButtonIndex = elements.findIndex(
+        elem => elem.className === IOS_BAR_BUTTON_TYPE,
+      );
+      if (uiBarButtonIndex !== -1) {
+        return backButtonElement.atIndex(uiBarButtonIndex);
+      }
+    }
+  }
+  return backButtonElement;
+}

…mple/e2e/examplesTests/bottomTabs.e2e.ts …mple/e2e/example-tests/bottomTabs.e2e.tsFabricExample/e2e/examplesTests/bottomTabs.e2e.ts renamed to FabricExample/e2e/example-tests/bottomTabs.e2e.ts FabricExample/e2e/examplesTests/bottomTabs.e2e.ts renamed to FabricExample/e2e/example-tests/bottomTabs.e2e.ts

@@ -82,7 +82,6 @@ describe('Bottom tabs and native stack', () => {
       element(by.id('bottom-tabs-B-more-details-button')),
     ).toHaveLabel('More details 0');
 
-
     // TODO(kkafar): For some reason tapping the button here hangs test runner.
     // The app itself stays fully responsive & in valid state (the expectation
     // defined below should succeed).

…cExample/e2e/examplesTests/events.e2e.ts …cExample/e2e/example-tests/events.e2e.tsFabricExample/e2e/examplesTests/events.e2e.ts renamed to FabricExample/e2e/example-tests/events.e2e.ts FabricExample/e2e/examplesTests/events.e2e.ts renamed to FabricExample/e2e/example-tests/events.e2e.ts

@@ -11,45 +11,40 @@ const pressBack = async () => {
 };
 
 const awaitClassicalEventBehavior = async () => {
-  if (device.getPlatform() === 'ios') {
-    // The order of events in this test differs from Paper.
-    // Please see https://github.com/software-mansion/react-native-screens/pull/2785 for details.
-    await expect(
-      element(by.text('9. Chats | transitionStart | closing')),
-    ).toExist();
-    await expect(
-      element(by.text('10. Privacy | transitionStart | closing')),
-    ).toExist();
-    await expect(
-      element(by.text('11. Main | transitionStart | opening')),
-    ).toExist();
-    await expect(element(by.text('12. Privacy | beforeRemove'))).toExist();
-    await expect(element(by.text('13. Chats | beforeRemove'))).toExist();
-    await expect(
-      element(by.text('14. Chats | transitionEnd | closing')),
-    ).toExist();
-    await expect(
-      element(by.text('15. Privacy | transitionEnd | closing')),
-    ).toExist();
-    await expect(
-      element(by.text('16. Main | transitionEnd | opening')),
-    ).toExist();
-  } else {
-    await expect(element(by.text('9. Privacy | beforeRemove'))).toExist();
-    await expect(element(by.text('10. Chats | beforeRemove'))).toExist();
-    await expect(
-      element(by.text('11. Main | transitionStart | opening')),
-    ).toExist();
-    await expect(
-      element(by.text('12. Main | transitionEnd | opening')),
-    ).toExist();
+  // The order of events in this test differs from Paper.
+  // Please see https://github.com/software-mansion/react-native-screens/pull/2785 for details.
+  const expectedEvents =
+    device.getPlatform() === 'ios'
+      ? [
+          '9. Chats | transitionStart | closing',
+          '10. Privacy | transitionStart | closing',
+          '11. Main | transitionStart | opening',
+          '12. Privacy | beforeRemove',
+          '13. Chats | beforeRemove',
+          '14. Chats | transitionEnd | closing',
+          '15. Privacy | transitionEnd | closing',
+          '16. Main | transitionEnd | opening',
+        ]
+      : [
+          '9. Privacy | beforeRemove',
+          '10. Chats | beforeRemove',
+          '11. Main | transitionStart | opening',
+          '12. Main | transitionEnd | opening',
+        ];
+
+  // Wait for the last event to appear before asserting event order
+  await waitFor(element(by.text(expectedEvents.at(-1)!)))
+    .toExist()
+    .withTimeout(5000);
+
+  for (const expectedEventNotification of expectedEvents) {
+    await expect(element(by.text(expectedEventNotification))).toExist();
   }
 };
 
 describe('Events', () => {
   beforeEach(async () => {
     await device.reloadReactNative();
-    // await device.launchApp({ newInstance: true });
 
     await waitFor(element(by.id('root-screen-playground-Events')))
       .toBeVisible()

…2e/examplesTests/nativeBottomTabs.e2e.ts …2e/example-tests/nativeBottomTabs.e2e.tsFabricExample/e2e/examplesTests/nativeBottomTabs.e2e.ts renamed to FabricExample/e2e/example-tests/nativeBottomTabs.e2e.ts FabricExample/e2e/examplesTests/nativeBottomTabs.e2e.ts renamed to FabricExample/e2e/example-tests/nativeBottomTabs.e2e.ts

@@ -1,38 +1,32 @@
 import { device, expect, element, by } from 'detox';
-import { selectTestScreen } from '../e2e-utils';
+import { selectIssueTestScreen } from '../e2e-utils';
 
 describe('Native BottomTabs', () => {
   beforeAll(async () => {
     await device.reloadReactNative();
   });
 
   it('should select TestBottomTabs', async () => {
-    await selectTestScreen('TestBottomTabs');
+    await selectIssueTestScreen('TestBottomTabs');
   });
 
   it('should initially display first tab', async () => {
-    await expect(
-      element(by.id('tab-screen-1-id')),
-    ).toBeVisible();
+    await expect(element(by.id('tab-screen-1-id'))).toBeVisible();
   });
 
   it('should use tab id to navigate to third tab screen', async () => {
     const tabElement = element(by.id('tab-item-3-id'));
     await expect(tabElement).toBeVisible();
     await tabElement.tap();
 
-    await expect(
-      element(by.id('tab-screen-3-id')),
-    ).toBeVisible();
+    await expect(element(by.id('tab-screen-3-id'))).toBeVisible();
   });
 
   it('should use tab label to navigate to second tab screen', async () => {
     const tabElement = element(by.label('Second Tab Item'));
     await expect(tabElement).toBeVisible();
     await tabElement.tap();
 
-    await expect(
-      element(by.label('Second Tab Screen')),
-    ).toBeVisible();
+    await expect(element(by.label('Second Tab Screen'))).toBeVisible();
   });
 });