test(iOS): enable bridgeless mode on test app.

.buildkite/jobs/pipeline.ios_demo_app_rn_76_new_arch.yml

@@ -1,4 +1,4 @@
-  - label: ":new::ios::react: RN .76 + iOS: Demo app"
+  - label: ":new::ios::react: RN .76 + New Arch + iOS: Demo app"
     command:
       - "nvm install"
       - "./scripts/demo-projects.ios.sh"

.buildkite/jobs/pipeline.ios_rn_73.yml

@@ -4,6 +4,7 @@
       - "./scripts/ci.ios.sh"
     env:
       REACT_NATIVE_VERSION: 0.73.2
+      RCT_NEW_ARCH_ENABLED: 0
     artifact_paths:
       - "/Users/builder/uibuilder/work/coverage/**/*.lcov"
       - "/Users/builder/uibuilder/work/**/allure-report-*.html"

detox/ios/Detox/Actions/UIScrollView+DetoxActions.m

@@ -23,7 +23,7 @@ - (void)_scrollViewWillEndDraggingWithDeceleration:(BOOL)arg1;
 
 @interface UIScrollView (DetoxScrolling)
 
-- (BOOL)_dtx_scrollViewWillEndDraggingWithDeceleration:(BOOL)arg1;
+- (void)_dtx_scrollViewWillEndDraggingWithDeceleration:(BOOL)arg1;
 @property (nonatomic, assign, setter=dtx_setDisableDecelerationForScroll:) BOOL dtx_disableDecelerationForScroll;
 
 @end
@@ -47,7 +47,7 @@ - (BOOL)dtx_disableDecelerationForScroll
 	return [objc_getAssociatedObject(self, "dtx_disableDecelerationForScroll") boolValue];
 }
 
-- (BOOL)_dtx_scrollViewWillEndDraggingWithDeceleration:(BOOL)arg1
+- (void)_dtx_scrollViewWillEndDraggingWithDeceleration:(BOOL)arg1
 {
 	BOOL deceleration = arg1;
 	if(self.dtx_disableDecelerationForScroll == YES &&
@@ -60,8 +60,8 @@ - (BOOL)_dtx_scrollViewWillEndDraggingWithDeceleration:(BOOL)arg1
 	{
 		deceleration = NO;
 	}
-	
-	return [self _dtx_scrollViewWillEndDraggingWithDeceleration:deceleration];
+
+    [self _dtx_scrollViewWillEndDraggingWithDeceleration:deceleration];
 }
 
 @end

detox/ios/Detox/Invocation/Element.swift

@@ -85,7 +85,7 @@ class Element : NSObject {
         if ReactNativeSupport.isReactNativeApp {
             let className = NSStringFromClass(type(of: view))
             switch className {
-                case "RCTScrollView", "RCTScrollViewComponentView":
+                case "RCTScrollView", "RCTScrollViewComponentView", "RCTEnhancedScrollView":
                     return (view.value(forKey: "scrollView") as! UIScrollView)
                 default:
                     break

detox/ios/Detox/Invocation/Predicate.swift

@@ -159,6 +159,13 @@ class Predicate : CustomStringConvertible, CustomDebugStringConvertible {
   func predicateForQuery() -> NSPredicate {
     var rv = innerPredicateForQuery()
 
+    // Filter out `RCTAccessibilityElement` instances -
+    // React Native injects these internal accessibility bridges into the view hierarchy to handle accessibility
+    // mappings between JS and native layers
+    rv = NSCompoundPredicate(
+        andPredicateWithSubpredicates:
+            [rv, NSPredicate(format: "NOT (class.description = %@)", "RCTAccessibilityElement")])
+
     if modifiers.contains(Modifier.not) {
       rv = NSCompoundPredicate(notPredicateWithSubpredicate: rv)
     }

detox/src/utils/rn-consts/rn-consts.js

@@ -3,7 +3,7 @@
 const rnVersion = (function parseRNVersion() {
   let raw;
   try {
     const packageJson = require('react-native/package.json');
     raw = packageJson.version;
   } catch {
     // Default version for RN
@@ -18,6 +18,9 @@
   };
 })();
 
+const isRNNewArch = process.env.RCT_NEW_ARCH_ENABLED === '1';
+
 module.exports = {
-  rnVersion
+  rnVersion,
+  isRNNewArch
 };

detox/test/e2e/02.matchers.test.js

@@ -1,4 +1,5 @@
 const { expectToThrow } = require('./utils/custom-expects');
+const { isRNNewArch } = require('../../src/utils/rn-consts/rn-consts');
 
 describe('Matchers', () => {
   beforeEach(async () => {
@@ -57,7 +58,8 @@ describe('Matchers', () => {
   });
 
   it('should match elements by type (native class)', async () => {
-    const byType = device.getPlatform() === 'ios' ? by.type('RCTImageView') : by.type('android.widget.ImageView');
+    const iOSClass = isRNNewArch === '1' ? 'RCTImageComponentView' : 'RCTImageView';
+    const byType = device.getPlatform() === 'ios' ? by.type(iOSClass) : by.type('android.widget.ImageView');
 
     await expect(element(byType)).toBeVisible();
     await element(byType).tap();

detox/test/e2e/assets/view-hierarchy-web-view.76.ios.new-arch.txt

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ViewHierarchy>
+ <UIWindow alpha="1.0" class="UIWindow" focused="false" height="<number>" id="detox_temp_" visibility="visible" width="<number>">
+  <UITransitionView alpha="1.0" class="UITransitionView" focused="false" height="<number>" id="detox_temp_0" visibility="visible" width="<number>" x="<number>" y="<number>">
+   <UIDropShadowView alpha="1.0" class="UIDropShadowView" focused="false" height="<number>" id="detox_temp_0_0" visibility="visible" width="<number>" x="<number>" y="<number>">
+    <RCTSurfaceHostingProxyRootView alpha="1.0" class="RCTSurfaceHostingProxyRootView" focused="false" height="<number>" id="detox_temp_0_0_0" visibility="visible" width="<number>" x="<number>" y="<number>">
+     <RCTSurfaceView alpha="1.0" class="RCTSurfaceView" focused="false" height="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+      <RCTRootComponentView alpha="1.0" class="RCTRootComponentView" focused="false" height="<number>" label="Show 2nd webview Show 3rd webview Vertical scroll bar, 4 pages Horizontal scroll bar, 1 page" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+       <RCTViewComponentView alpha="1.0" class="RCTViewComponentView" focused="false" height="<number>" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>" />
+       <RCTViewComponentView alpha="1.0" class="RCTViewComponentView" focused="false" height="<number>" id="toggle2ndWebviewButton" label="Show 2nd webview" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+        <RCTParagraphComponentView alpha="1.0" class="RCTParagraphComponentView" focused="false" height="<number>" label="Show 2nd webview" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+         <RCTParagraphTextView alpha="1.0" class="RCTParagraphTextView" focused="false" height="<number>" visibility="visible" width="<number>" x="<number>" y="<number>" />
+        </RCTParagraphComponentView>
+       </RCTViewComponentView>
+       <RCTViewComponentView alpha="1.0" class="RCTViewComponentView" focused="false" height="<number>" id="toggle3rdWebviewButton" label="Show 3rd webview" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+        <RCTParagraphComponentView alpha="1.0" class="RCTParagraphComponentView" focused="false" height="<number>" label="Show 3rd webview" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+         <RCTParagraphTextView alpha="1.0" class="RCTParagraphTextView" focused="false" height="<number>" visibility="visible" width="<number>" x="<number>" y="<number>" />
+        </RCTParagraphComponentView>
+       </RCTViewComponentView>
+       <RCTViewComponentView alpha="1.0" class="RCTViewComponentView" focused="false" height="<number>" label="Vertical scroll bar, 4 pages Horizontal scroll bar, 1 page" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+        <RNCWebView alpha="1.0" class="RNCWebView" focused="false" height="<number>" id="webViewFormWithScrolling" label="Vertical scroll bar, 4 pages Horizontal scroll bar, 1 page" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+         <RNCWebViewImpl alpha="1.0" class="RNCWebViewImpl" focused="false" height="<number>" label="Vertical scroll bar, 4 pages Horizontal scroll bar, 1 page" visibility="visible" width="<number>" x="<number>" y="<number>">
+          <RNCWKWebView alpha="1.0" class="RNCWKWebView" focused="false" height="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+          	<![CDATA[<html xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <h1 id="pageHeadline" aria-label="first-webview">First Webview</h1>
+        <h2>Form</h2>
+        <form>
+            <label for="fname">Your name:</label><br />
+            <input type="text" id="fname" name="fname" maxlength="<number>" /><br />
+            <input type="submit" id="submit" value="Submit" onclick="document.getElementById('resultFname').innerHTML = document.getElementById('fname').value; return false;" />
+        </form>
+
+        <h2>Form Results</h2>
+        <p>Your first name is: <span id="resultFname">No input yet</span></p>
+
+        <h2>Content Editable</h2>
+        <div id="contentEditable" class="contentEditable" contenteditable="true">Name: </div>
+
+        <h2>Text and link</h2>
+        <p>Some text and a <a id="w3link" href="https://www.w3schools.com">link</a>.</p>
+        <p id="bottomParagraph" class="specialParagraph">This is a bottom paragraph with class.</p>
+
+
+</body></html>]]>
+          </RNCWKWebView>
+         </RNCWebViewImpl>
+        </RNCWebView>
+       </RCTViewComponentView>
+       <RCTViewComponentView alpha="1.0" class="RCTViewComponentView" focused="false" height="<number>" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+        <RCTDebuggingOverlayComponentView alpha="1.0" class="RCTDebuggingOverlayComponentView" focused="false" height="<number>" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+         <RCTDebuggingOverlay alpha="1.0" class="RCTDebuggingOverlay" focused="false" height="<number>" visibility="visible" width="<number>" x="<number>" y="<number>" />
+        </RCTDebuggingOverlayComponentView>
+       </RCTViewComponentView>
+      </RCTRootComponentView>
+     </RCTSurfaceView>
+    </RCTSurfaceHostingProxyRootView>
+   </UIDropShadowView>
+  </UITransitionView>
+ </UIWindow>
+</ViewHierarchy>

detox/test/e2e/assets/view-hierarchy-with-test-id-injection.76.ios.new-arch.txt

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ViewHierarchy>
+ <UIWindow alpha="1.0" class="UIWindow" focused="false" height="<number>" id="detox_temp_" visibility="visible" width="<number>">
+  <UITransitionView alpha="1.0" class="UITransitionView" focused="false" height="<number>" id="detox_temp_0" visibility="visible" width="<number>" x="<number>" y="<number>">
+   <UIDropShadowView alpha="1.0" class="UIDropShadowView" focused="false" height="<number>" id="detox_temp_0_0" visibility="visible" width="<number>" x="<number>" y="<number>">
+    <RCTSurfaceHostingProxyRootView alpha="1.0" class="RCTSurfaceHostingProxyRootView" focused="false" height="<number>" id="detox_temp_0_0_0" visibility="visible" width="<number>" x="<number>" y="<number>">
+     <RCTSurfaceView alpha="1.0" class="RCTSurfaceView" focused="false" height="<number>" id="detox_temp_0_0_0_0" visibility="visible" width="<number>" x="<number>" y="<number>">
+      <RCTRootComponentView alpha="1.0" class="RCTRootComponentView" focused="false" height="<number>" id="detox_temp_0_0_0_0_0" label="Welcome Say Hello Say World" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+       <RCTParagraphComponentView alpha="1.0" class="RCTParagraphComponentView" focused="false" height="<number>" id="detox_temp_0_0_0_0_0_0" label="Welcome" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+        <RCTParagraphTextView alpha="1.0" class="RCTParagraphTextView" focused="false" height="<number>" id="detox_temp_0_0_0_0_0_0_0" visibility="visible" width="<number>" x="<number>" y="<number>" />
+       </RCTParagraphComponentView>
+       <RCTViewComponentView alpha="1.0" class="RCTViewComponentView" focused="false" height="<number>" id="detox_temp_0_0_0_0_0_1" label="Say Hello" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+        <RCTParagraphComponentView alpha="1.0" class="RCTParagraphComponentView" focused="false" height="<number>" id="detox_temp_0_0_0_0_0_1_0" label="Say Hello" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+         <RCTParagraphTextView alpha="1.0" class="RCTParagraphTextView" focused="false" height="<number>" id="detox_temp_0_0_0_0_0_1_0_0" visibility="visible" width="<number>" x="<number>" y="<number>" />
+        </RCTParagraphComponentView>
+       </RCTViewComponentView>
+       <RCTViewComponentView alpha="1.0" class="RCTViewComponentView" focused="false" height="<number>" id="detox_temp_0_0_0_0_0_2" label="Say World" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+        <RCTParagraphComponentView alpha="1.0" class="RCTParagraphComponentView" focused="false" height="<number>" id="detox_temp_0_0_0_0_0_2_0" label="Say World" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+         <RCTParagraphTextView alpha="1.0" class="RCTParagraphTextView" focused="false" height="<number>" id="detox_temp_0_0_0_0_0_2_0_0" visibility="visible" width="<number>" x="<number>" y="<number>" />
+        </RCTParagraphComponentView>
+       </RCTViewComponentView>
+       <RCTViewComponentView alpha="1.0" class="RCTViewComponentView" focused="false" height="<number>" id="detox_temp_0_0_0_0_0_3" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+        <RCTDebuggingOverlayComponentView alpha="1.0" class="RCTDebuggingOverlayComponentView" focused="false" height="<number>" id="detox_temp_0_0_0_0_0_3_0" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+         <RCTDebuggingOverlay alpha="1.0" class="RCTDebuggingOverlay" focused="false" height="<number>" id="detox_temp_0_0_0_0_0_3_0_0" visibility="visible" width="<number>" x="<number>" y="<number>" />
+        </RCTDebuggingOverlayComponentView>
+       </RCTViewComponentView>
+      </RCTRootComponentView>
+     </RCTSurfaceView>
+    </RCTSurfaceHostingProxyRootView>
+   </UIDropShadowView>
+  </UITransitionView>
+ </UIWindow>
+</ViewHierarchy>

detox/test/e2e/assets/view-hierarchy-without-test-id-injection.76.ios.new-arch.txt

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ViewHierarchy>
+ <UIWindow alpha="1.0" class="UIWindow" focused="false" height="<number>" visibility="visible" width="<number>">
+  <UITransitionView alpha="1.0" class="UITransitionView" focused="false" height="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+   <UIDropShadowView alpha="1.0" class="UIDropShadowView" focused="false" height="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+    <RCTSurfaceHostingProxyRootView alpha="1.0" class="RCTSurfaceHostingProxyRootView" focused="false" height="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+     <RCTSurfaceView alpha="1.0" class="RCTSurfaceView" focused="false" height="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+      <RCTRootComponentView alpha="1.0" class="RCTRootComponentView" focused="false" height="<number>" label="Welcome Say Hello Say World" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+       <RCTParagraphComponentView alpha="1.0" class="RCTParagraphComponentView" focused="false" height="<number>" label="Welcome" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+        <RCTParagraphTextView alpha="1.0" class="RCTParagraphTextView" focused="false" height="<number>" visibility="visible" width="<number>" x="<number>" y="<number>" />
+       </RCTParagraphComponentView>
+       <RCTViewComponentView alpha="1.0" class="RCTViewComponentView" focused="false" height="<number>" label="Say Hello" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+        <RCTParagraphComponentView alpha="1.0" class="RCTParagraphComponentView" focused="false" height="<number>" label="Say Hello" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+         <RCTParagraphTextView alpha="1.0" class="RCTParagraphTextView" focused="false" height="<number>" visibility="visible" width="<number>" x="<number>" y="<number>" />
+        </RCTParagraphComponentView>
+       </RCTViewComponentView>
+       <RCTViewComponentView alpha="1.0" class="RCTViewComponentView" focused="false" height="<number>" label="Say World" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+        <RCTParagraphComponentView alpha="1.0" class="RCTParagraphComponentView" focused="false" height="<number>" label="Say World" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+         <RCTParagraphTextView alpha="1.0" class="RCTParagraphTextView" focused="false" height="<number>" visibility="visible" width="<number>" x="<number>" y="<number>" />
+        </RCTParagraphComponentView>
+       </RCTViewComponentView>
+       <RCTViewComponentView alpha="1.0" class="RCTViewComponentView" focused="false" height="<number>" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+        <RCTDebuggingOverlayComponentView alpha="1.0" class="RCTDebuggingOverlayComponentView" focused="false" height="<number>" tag="<number>" visibility="visible" width="<number>" x="<number>" y="<number>">
+         <RCTDebuggingOverlay alpha="1.0" class="RCTDebuggingOverlay" focused="false" height="<number>" visibility="visible" width="<number>" x="<number>" y="<number>" />
+        </RCTDebuggingOverlayComponentView>
+       </RCTViewComponentView>
+      </RCTRootComponentView>
+     </RCTSurfaceView>
+    </RCTSurfaceHostingProxyRootView>
+   </UIDropShadowView>
+  </UITransitionView>
+ </UIWindow>
+</ViewHierarchy>

detox/test/e2e/detox.config.js

@@ -52,7 +52,7 @@ const config = {
     'ios.debug': {
       type: 'ios.app',
       name: 'example',
-      binaryPath: 'ios/build/Build/Products/Debug-iphonesimulator/example-ci.app',
+      binaryPath: 'ios/build/Build/Products/Debug-iphonesimulator/example.app',
       build: 'set -o pipefail && xcodebuild -workspace ios/example.xcworkspace -scheme example-ci -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build -quiet',
       start: 'react-native start',
       bundleId: 'com.wix.detox-example',
@@ -61,7 +61,7 @@ const config = {
     'ios.release': {
       type: 'ios.app',
       name: 'example',
-      binaryPath: 'ios/build/Build/Products/Release-iphonesimulator/example-ci.app',
+      binaryPath: 'ios/build/Build/Products/Release-iphonesimulator/example.app',
       build: 'set -o pipefail && export CODE_SIGNING_REQUIRED=NO && export RCT_NO_LAUNCH_PACKAGER=true && xcodebuild -workspace ios/example.xcworkspace -scheme example-ci -configuration Release -sdk iphonesimulator -derivedDataPath ios/build -quiet',
     },
 

detox/test/e2e/utils/custom-describes.js

@@ -1,14 +1,14 @@
 const axios = require('axios');
 const PromptHandler = require("./PromptHandler");
+const { isRNNewArch } = require('../../../src/utils/rn-consts/rn-consts');
 
 describe.skipIfCI = (title, fn) => {
   const isCI = process.env.CI === 'true';
   return isCI ? describe.skip(title, fn) : describe(title, fn);
 };
 
 describe.skipIfNewArchOnIOS = (title, fn) => {
-  const isNewArch = process.env.RCT_NEW_ARCH_ENABLED === '1';
-  if (isNewArch && device.getPlatform() === 'ios') {
+  if (isRNNewArch && device.getPlatform() === 'ios') {
     console.warn('Skipping tests for new architecture, as there are issues related to the new architecture.');
     return describe.skip(title, fn);
   }

detox/test/e2e/utils/snapshot.js

@@ -1,6 +1,7 @@
 const fs = require('fs-extra');
 const { ssim } = require('ssim.js');
 const { PNG } = require('pngjs');
+const { isRNNewArch } = require('../../../src/utils/rn-consts/rn-consts');
 
 const rnMinorVer = require('../../../src/utils/rn-consts/rn-consts').rnVersion.minor;
 const jestExpect = require('expect').default;
@@ -63,7 +64,8 @@ async function expectViewHierarchySnapshotToMatch(viewHierarchy, snapshotName) {
 }
 
 async function expectSnapshotToMatch(value, snapshotName, ignoreWhiteSpace = true) {
-  const snapshotPath = `./e2e/assets/${snapshotName}.${rnMinorVer}.${device.getPlatform()}.txt`;
+  const isNewArchString = isRNNewArch ? '.new-arch' : '';
+  const snapshotPath = `./e2e/assets/${snapshotName}.${rnMinorVer}.${device.getPlatform()}${isNewArchString}.txt`;
 
   function removeWhiteSpaces(str) {
     return str.replace(/\s/g, '');