feat[RN]: [ENG-8062] Added React-Native SDK test for RN New Architecture (Fabric) (#3885)

## Description
Updated the end-to-end test cases to align with the new Expo React
Native architecture (Fabric)

__JIRA__
https://builder-io.atlassian.net/browse/ENG-8062

---------

Co-authored-by: Yash Wadhia <[email protected]>

Author: yash-builder

.github/workflows/ci.yml

@@ -61,7 +61,8 @@ jobs:
           [
             'svelte',
             'sveltekit',
-            'react-native',
+            'react-native-74',
+            'react-native-76-fabric',
             'solid',
             'solid-start',
             'qwik-city',
@@ -132,7 +133,7 @@ jobs:
             'svelte',
             'sveltekit',
             'solid',
-            'react-native',
+            'react-native-74',
             'hydrogen',
           ]
 

.github/workflows/issue-close-bot.yml

@@ -21,4 +21,4 @@ jobs:
           stale-issue-label: 'bot-close'
           only-labels: 'bot-close'
           days-before-stale: -1
-          days-before-close: 0
+          days-before-close: 0

.github/workflows/lint-and-commit.yml

@@ -1,4 +1,3 @@
-
 ---
 name: Auto lint & commit 🤖
 
@@ -9,9 +8,9 @@ on:
 env:
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
 
-permissions: 
+permissions:
   contents: write
-  
+
 jobs:
   auto-lint-and-commit:
     name: Auto lint & commit 🤖
@@ -41,7 +40,7 @@ jobs:
       - name: Run eslint
         run: yarn workspace @builder.io/sdks lint
 
-      - name: "Import GPG key"
+      - name: 'Import GPG key'
         id: import-gpg
         uses: crazy-max/ghaction-import-gpg@v6
         with:
@@ -54,16 +53,14 @@ jobs:
         id: auto-commit-action
         with:
           commit_message: Apply linting changes
-          commit_author: "${{ steps.import-gpg.outputs.name }} <${{ steps.import-gpg.outputs.email }}>"
+          commit_author: '${{ steps.import-gpg.outputs.name }} <${{ steps.import-gpg.outputs.email }}>'
           commit_user_name: ${{ steps.import-gpg.outputs.name }}
           commit_user_email: ${{ steps.import-gpg.outputs.email }}
-     
-    
-      - name: "Run if changes have been detected"
+
+      - name: 'Run if changes have been detected'
         if: steps.auto-commit-action.outputs.changes_detected == 'true'
         run: echo "Committed linting changes."
-    
-      - name: "Run if no changes have been detected"
+
+      - name: 'Run if no changes have been detected'
         if: steps.auto-commit-action.outputs.changes_detected == 'false'
         run: echo "No linting changes to commit."
-  

.github/workflows/react-native-sdk-test-remote.yml

@@ -34,6 +34,11 @@ jobs:
           cache-install-state: true
 
       - name: Build and test
-        run: yarn workspace @e2e/react-native test:ios-remote
+        run: yarn workspace @e2e/react-native-74 test:ios-remote
+        env:
+          EXPO_TOKEN: ${{ secrets.EXPO_ACCESS_TOKEN }}
+
+      - name: Build and test RN Fabric
+        run: yarn workspace @e2e/react-native-76-fabric test:ios-remote
         env:
           EXPO_TOKEN: ${{ secrets.EXPO_ACCESS_TOKEN }}

.gitignore

@@ -38,4 +38,4 @@ Pods/
 .nx-cache
 .nx/workspace-data
 
-!packages/sdks/e2e/react-native/.eas/build/*
+!packages/sdks/e2e/react-native-74/.eas/build/*

README.md

@@ -26,7 +26,6 @@
   <img alt="Animation of Builder.io Visual Editor" src="https://github.com/user-attachments/assets/6972696e-bfb5-4c6d-b987-ea6a07816655" >
 </p>
 
-
 ## How the Builder.io platform works
 
 Builder connects to your existing site or app and allows you to visually generate code (using your existing components) from either Figma designs or our drag and drop editor, and then export that code or publish those updates via our [SDKs](https://www.builder.io/c/docs/developers).
@@ -37,13 +36,10 @@ Read about [how Builder works](https://www.builder.io/c/docs/how-builder-works-t
   <img alt="How it works" src="https://github.com/user-attachments/assets/7ef9ca00-22f2-49b7-9b29-1df1eb7daba7" />
 </p>
 
-
-
 ## Try it out!
 
 [Sign up for a free account](https://builder.io/signup) to dive right in.
 
-
 ## What's in this repository?
 
 This repo houses all of the various [SDKs](packages), [usage examples](examples), [starter projects](starters), and [plugins](plugins).

packages/core/README.md

@@ -42,5 +42,6 @@ builder.canTrack = false;
 View all options for `builder.get` [here](./docs/interfaces/GetContentOptions.md)
 
 Learn more about how to use the Builder core SDK:
+
 - [Content API](https://www.builder.io/c/docs/content-api)
 - [Querying Cheatsheet](https://www.builder.io/c/docs/querying)

packages/core/tsconfig.json

@@ -11,21 +11,10 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "declarationDir": "dist",
-    "lib": [
-      "dom",
-      "es5",
-      "es2015.promise"
-    ],
+    "lib": ["dom", "es5", "es2015.promise"],
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
-    "typeRoots": [
-      "./node_modules/@types"
-    ]
+    "typeRoots": ["./node_modules/@types"]
   },
-  "include": [
-    "./package.json",
-    "./index.ts",
-    "./src/**/*.ts",
-    "./types.d.ts"
-  ]
+  "include": ["./package.json", "./index.ts", "./src/**/*.ts", "./types.d.ts"]
 }

packages/react/CHANGELOG.md

@@ -235,18 +235,18 @@
   These events can be listened to for analytics or other custom behaviors:
 
   ```javascript
-  document.addEventListener("builder.variantLoaded", (event) => {
+  document.addEventListener('builder.variantLoaded', event => {
     // This will either be a variant object like { name: 'My Variant', query: [...], startDate: ..., endDate: ... }
     // or the string 'default'
-    console.log("Variant loaded:", event.detail.variant);
+    console.log('Variant loaded:', event.detail.variant);
     // This will be the content object like { name: 'My page', id: '...', ... }
-    console.log("Content:", event.detail.content);
+    console.log('Content:', event.detail.content);
     // Perform analytics or other actions
   });
 
-  document.addEventListener("builder.variantDisplayed", (event) => {
-    console.log("Variant displayed:", event.detail.variant);
-    console.log("Content:", event.detail.content);
+  document.addEventListener('builder.variantDisplayed', event => {
+    console.log('Variant displayed:', event.detail.variant);
+    console.log('Content:', event.detail.content);
     // Track impressions or perform other visibility-dependent actions
   });
   ```
@@ -291,7 +291,7 @@
 
   ```js
   userAttributes: {
-    stringWithStrs: ["a", "c"];
+    stringWithStrs: ['a', 'c'];
   }
   ```
 
@@ -307,7 +307,7 @@
 
   ```js
   userAttributes: {
-    stringWithNums: ["1", "2"];
+    stringWithNums: ['1', '2'];
   }
   ```
 
@@ -517,10 +517,10 @@
 In case you feel the need to use our older API Version `v1`, reach out to us at [email protected] first. But you can override the default by setting `apiVersion` explicitly to `v1` as follows:
 
 ```js
-import { builder } from "@builder.io/react";
+import { builder } from '@builder.io/react';
 
-builder.init("YOUR_BUILDER_PUBLIC_KEY");
-builder.apiVersion = "v1";
+builder.init('YOUR_BUILDER_PUBLIC_KEY');
+builder.apiVersion = 'v1';
 ```
 
 More details on the Builder API Versions visit [this link](https://www.builder.io/c/docs/content-api-versions).
@@ -532,10 +532,10 @@ More details on the Builder API Versions visit [this link](https://www.builder.i
 You can set the apiVersion using `builder.init` or `builder.apiVersion`:
 
 ```js
-import { builder } from "@builder.io/react";
+import { builder } from '@builder.io/react';
 
-builder.init("YOUR_BUILDER_PUBLIC_KEY");
-builder.apiVersion = "v3";
+builder.init('YOUR_BUILDER_PUBLIC_KEY');
+builder.apiVersion = 'v3';
 ```
 
 ## 2.0.16

packages/sdks-tests/playwright.config.ts

@@ -22,7 +22,8 @@ const getDirName = () => {
 };
 
 const things = serverNames.map((packageName, i) => {
-  const isReactNative = packageName === 'react-native';
+  const isReactNative =
+    packageName === 'react-native-74' || packageName === 'react-native-76-fabric';
   const port = 1111 + i;
   const portFlag = isReactNative ? `-l ${port}` : `--port=${port}`;
 
@@ -89,7 +90,9 @@ export default defineConfig({
       command: `PORT=${port} yarn workspace @${testType}/${packageName} ${IS_DEV_MODE ? 'dev' : 'serve'} ${portFlag}`,
       port,
       reuseExistingServer: false,
-      ...(packageName === 'react-native' ? { timeout: 120 * 1000 } : {}),
+      ...(packageName === 'react-native-74' || packageName === 'react-native-76-fabric'
+        ? { timeout: 120 * 1000 }
+        : {}),
     }))
     .concat([
       {

packages/sdks-tests/src/e2e-tests/ab-test.spec.ts

@@ -45,7 +45,7 @@ const initializeAbTest = async (
   if (!baseURL) throw new Error('Missing baseURL');
 
   // RN can't have SSR, we don't support/export it.
-  test.skip(packageName === 'react-native');
+  test.skip(packageName === 'react-native-74' || packageName === 'react-native-76-fabric');
 
   /**
    * This test is flaky on `nextjs-sdk-next-app` and `qwik-city`. Most likely because it is the very first test that runs.

packages/sdks-tests/src/e2e-tests/blocks-class-name.spec.ts

@@ -8,7 +8,7 @@ test.describe('Blocks className', () => {
     packageName,
   }) => {
     test.skip(excludeGen1(sdk));
-    test.skip(packageName === 'react-native');
+    test.skip(packageName === 'react-native-74' || packageName === 'react-native-76-fabric');
 
     await page.goto('/blocks-class-name');
     const countOfBuilderBlocksWithClassName = await page

packages/sdks-tests/src/e2e-tests/css-properties.spec.ts

@@ -3,7 +3,7 @@ import { isSSRFramework, test } from '../helpers/index.js';
 
 test.describe('CSS Properties from Builder Content (js enabled)', () => {
   test('set image width CSS properties correctly', async ({ page, packageName }) => {
-    test.skip(packageName === 'react-native');
+    test.skip(packageName === 'react-native-74' || packageName === 'react-native-76-fabric');
     await page.goto('/css-properties');
 
     const image = page.locator('.builder-image');
@@ -12,7 +12,7 @@ test.describe('CSS Properties from Builder Content (js enabled)', () => {
   });
 
   test('set var(--red-color) bg color in Box properly', async ({ page, packageName }) => {
-    test.skip(packageName === 'react-native');
+    test.skip(packageName === 'react-native-74' || packageName === 'react-native-76-fabric');
     await page.goto('/css-properties');
 
     const div = page.locator('.builder-4f5a09e2a52747f8b7cb48b880636a3c');
@@ -24,7 +24,7 @@ test.describe('CSS Properties from Builder Content (js enabled)', () => {
 
 test.describe('CSS Properties from Builder Content (js disabled)', () => {
   test('set image width CSS properties correctly', async ({ browser, packageName }) => {
-    test.skip(packageName === 'react-native');
+    test.skip(packageName === 'react-native-74' || packageName === 'react-native-76-fabric');
     test.fail(!isSSRFramework(packageName));
 
     const context = await browser.newContext({
@@ -39,7 +39,7 @@ test.describe('CSS Properties from Builder Content (js disabled)', () => {
   });
 
   test('set var(--red-color) bg color in Box properly', async ({ browser, packageName }) => {
-    test.skip(packageName === 'react-native');
+    test.skip(packageName === 'react-native-74' || packageName === 'react-native-76-fabric');
     test.fail(!isSSRFramework(packageName));
 
     const context = await browser.newContext({

packages/sdks-tests/src/e2e-tests/default-styles.spec.ts

@@ -17,7 +17,8 @@ test.describe('Default styles', () => {
     test.skip(excludeGen1(sdk));
     // TODO: need to check why angular-ssr is failing, working as expected though
     test.fail(
-      packageName === 'react-native' ||
+      packageName === 'react-native-74' ||
+        packageName === 'react-native-76-fabric' ||
         packageName === 'angular-16-ssr' ||
         packageName === 'angular-19-ssr'
     );
@@ -40,7 +41,7 @@ test.describe('Default styles', () => {
   });
 
   test('button should have default styles', async ({ page, packageName }) => {
-    test.fail(packageName === 'react-native');
+    test.fail(packageName === 'react-native-74' || packageName === 'react-native-76-fabric');
 
     await page.goto('/default-styles');
     const button = page.locator('text=Click me!');

packages/sdks-tests/src/e2e-tests/duplicate-attributes.spec.ts

@@ -7,7 +7,7 @@ test.describe('Duplicate Attributes', () => {
       excludeTestFor({ angular: true }, sdk),
       'attributes not spread out so cant set footer'
     );
-    test.skip(packageName === 'react-native');
+    test.skip(packageName === 'react-native-74' || packageName === 'react-native-76-fabric');
     await page.goto('/duplicate-attributes');
 
     const footer = await page.locator('footer');

packages/sdks-tests/src/e2e-tests/editing.spec.ts

@@ -209,7 +209,8 @@ test.describe('Visual Editing', () => {
     });
     test('correctly updates width props', async ({ page, basePort, packageName, sdk }) => {
       test.skip(
-        packageName === 'react-native' ||
+        packageName === 'react-native-74' ||
+          packageName === 'react-native-76-fabric' ||
           packageName === 'nextjs-sdk-next-app' ||
           packageName === 'gen1-next14-pages' ||
           packageName === 'gen1-next15-app' ||

packages/sdks-tests/src/e2e-tests/http-requests.spec.ts

@@ -39,7 +39,10 @@ test.describe('HTTP Requests', () => {
 
   test('call proxy API only once - in editor', async ({ page, basePort, packageName, sdk }) => {
     test.skip(excludeGen1(sdk));
-    test.skip(packageName === 'react-native', 'editor tests not supported in react-native');
+    test.skip(
+      packageName === 'react-native-74' || packageName === 'react-native-76-fabric',
+      'editor tests not supported in react-native'
+    );
     test.skip(
       packageName === 'nextjs-sdk-next-app',
       'editor tests not supported in nextjs-sdk-next-app'

packages/sdks-tests/src/e2e-tests/localization.spec.ts

@@ -10,7 +10,9 @@ test.describe('Localization', () => {
     await page.goto('/localization-locale-passed');
     const text = page.locator(`text=${HI_IN_TEXT}`);
     const image =
-      packageName === 'react-native' ? page.locator('img').first() : page.locator('.builder-image');
+      packageName === 'react-native-74' || packageName === 'react-native-76-fabric'
+        ? page.locator('img').first()
+        : page.locator('.builder-image');
     await expect(text).toBeVisible();
     await expect(image).toHaveAttribute('src', HI_IN_IMAGE);
   });

packages/sdks-tests/src/e2e-tests/state-binding.spec.ts

@@ -11,7 +11,8 @@ test.describe('State binding', () => {
 
       // flaky, can't `test.fail()`
       test.skip(
-        packageName === 'react-native' ||
+        packageName === 'react-native-74' ||
+          packageName === 'react-native-76-fabric' ||
           packageName === 'solid' ||
           packageName === 'solid-start' ||
           packageName === 'svelte' ||

packages/sdks-tests/src/helpers/index.ts

@@ -103,7 +103,8 @@ export const isSSRFramework = (packageName: ServerName | 'DEFAULT') => {
     packageName === 'solid' ||
     packageName === 'react' ||
     packageName === 'svelte' ||
-    packageName === 'react-native' ||
+    packageName === 'react-native-74' ||
+    packageName === 'react-native-76-fabric' ||
     packageName === 'angular-16' ||
     packageName === 'gen1-react';
   return !isNonSSR;

packages/sdks-tests/src/helpers/sdk.ts

@@ -12,7 +12,8 @@ export type Sdk =
   | 'angular';
 
 const serverNameEnumValues = [
-  'react-native',
+  'react-native-74',
+  'react-native-76-fabric',
   'solid',
   'solid-start',
   'qwik-city',
@@ -53,7 +54,8 @@ export type Generation = 'gen1' | 'gen2';
  * Map of server names to SDKs.
  */
 export const SDK_MAP: Record<ServerName, { sdk: Sdk; gen: Generation }> = {
-  'react-native': { sdk: 'reactNative', gen: 'gen2' },
+  'react-native-74': { sdk: 'reactNative', gen: 'gen2' },
+  'react-native-76-fabric': { sdk: 'reactNative', gen: 'gen2' },
   solid: { sdk: 'solid', gen: 'gen2' },
   'solid-start': { sdk: 'solid', gen: 'gen2' },
   'qwik-city': { sdk: 'qwik', gen: 'gen2' },