kirillzyusko · kirillzyusko · Dec 20, 2025 · Dec 18, 2025 · Dec 18, 2025 · Dec 18, 2025
diff --git a/.github/workflows/web-e2e-test.yml b/.github/workflows/web-e2e-test.yml
@@ -0,0 +1,100 @@
+name: 🌐 Test Web
+on:
+  pull_request:
+    paths:
+      - ".github/workflows/web-e2e-test.yml"
+      - "package.json"
+      - "yarn.lock"
+      - "FabricExample/**"
+      - "src/**"
+      - "e2e/**"
+  push:
+    branches:
+      - main
+    paths:
+      - ".github/workflows/web-e2e-test.yml"
+      - "package.json"
+      - "yarn.lock"
+      - "FabricExample/**"
+      - "src/**"
+      - "e2e/**"
+
+jobs:
+  build-web:
+    name: 🏗️ Build web
+    defaults:
+      run:
+        working-directory: FabricExample
+    runs-on: macos-15
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Get yarn cache directory path
+        id: fabric-yarn-cache-dir-path
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+      - name: Restore node_modules from cache
+        uses: actions/cache@v4
+        id: yarn-cache
+        with:
+          path: ${{ steps.fabric-yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-fabric-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-fabric-yarn-
+      - name: Install node_modules for FabricExample/
+        run: yarn install --frozen-lockfile
+      - name: Install root dependencies
+        run: yarn install --frozen-lockfile --cwd ..
+
+      - name: Build web
+        run: yarn build:web
+
+      - uses: actions/upload-artifact@v4
+        with:
+          name: web-e2e-app
+          path: FabricExample/dist/**
+
+  test-web:
+    name: ⚙️ Automated test cases
+    runs-on: macos-15
+    timeout-minutes: 60
+    needs: build-web
+    steps:
+      - uses: actions/checkout@v4
+      - name: Download a single artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: web-e2e-app
+          path: FabricExample/dist/
+      - name: Start static server
+        run: |
+          cd FabricExample
+          npx http-server dist -p 8080 --silent --gzip --brotli --hostname 127.0.0.1 >/dev/null 2>&1 &
+          echo $! > .server-pid
+      - name: Install Maestro
+        run: |
+          curl -fsSL "https://get.maestro.mobile.dev" | bash
+          echo "$HOME/.maestro/bin" >> $GITHUB_PATH
+          export MAESTRO_DRIVER_STARTUP_TIMEOUT=600000
+      - name: Specify web env
+        run: |
+          find e2e/flows -name "*.yml" -exec sh -c '
+            for file; do
+              printf "url: http://localhost:8080\n" | cat - "$file" > temp && mv temp "$file"
+            done
+          ' sh {} +
+        shell: bash
+      - name: Run tests
+        run: |
+          export MAESTRO_CLI_NO_ANALYTICS="true"
+          export MAESTRO_CHROME_FLAGS="--no-sandbox --user-data-dir=/tmp/chrome-profile-$GITHUB_RUN_ID"
+          maestro --platform web test -e DEVICE="Chrome" --headless e2e/flows/* --format html ./e2e/reports/debug --debug-output ./e2e/reports/debug --flatten-debug-output
+      - name: Stop server
+        if: always()
+        run: |
+          kill $(cat .server-pid) || true
+      - name: Upload test report
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          path: ./e2e/reports
+          name: e2e-report-web
diff --git a/FabricExample/__tests__/__snapshots__/components-rendering.spec.tsx.snap b/FabricExample/__tests__/__snapshots__/components-rendering.spec.tsx.snap
@@ -114,16 +114,7 @@ exports[`components rendering should render \`KeyboardStickyView\` 1`] = `
 
 exports[`components rendering should render \`KeyboardToolbar\` 1`] = `
 <View
-  content={
-    {
-      "$$typeof": Symbol(react.transitional.element),
-      "_owner": null,
-      "_store": {},
-      "key": null,
-      "props": {},
-      "type": [Function],
-    }
-  }
+  content={<EmptyView />}
 />
 `;
 

diff --git a/FabricExample/index.html b/FabricExample/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Keyboard Controller Example</title>
+    <style>
+      #app-root {
+        display: flex;
+        flex: 1 1 100%;
+        height: 100vh;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app-root"></div>
+  </body>
+</html>
diff --git a/FabricExample/index.web.js b/FabricExample/index.web.js
@@ -0,0 +1,10 @@
+import { AppRegistry } from "react-native";
+
+import name from "./app.json";
+import App from "./src/App";
+
+AppRegistry.registerComponent(name, () => App);
+AppRegistry.runApplication(name, {
+  initialProps: {},
+  rootTag: document.getElementById("app-root"),
+});
diff --git a/FabricExample/package.json b/FabricExample/package.json
@@ -5,21 +5,25 @@
   "scripts": {
     "android": "react-native run-android",
     "ios": "react-native run-ios",
+    "web": "webpack serve --mode=development --config webpack.config.js",
+    "build:web": "webpack --mode=production --config webpack.config.js",
     "start": "react-native start",
     "test": "jest",
     "postinstall": "patch-package"
   },
   "dependencies": {
     "@gorhom/bottom-sheet": "5.2.6",
+    "@lottiefiles/dotlottie-react": "^0.17.10",
     "@react-native-community/blur": "^4.4.1",
     "@react-native-masked-view/masked-view": "^0.3.2",
-    "@react-navigation/bottom-tabs": "^6.6.1",
-    "@react-navigation/elements": "^2.2.5",
-    "@react-navigation/native": "^6.1.18",
-    "@react-navigation/native-stack": "^6.11.0",
-    "@react-navigation/stack": "^6.4.1",
+    "@react-navigation/bottom-tabs": "^7.9.0",
+    "@react-navigation/elements": "2.6.4",
+    "@react-navigation/native": "7.1.17",
+    "@react-navigation/native-stack": "7.3.26",
+    "@react-navigation/stack": "7.3.6",
     "lottie-react-native": "^7.3.4",
     "react": "19.1.0",
+    "react-dom": "19.1.0",
     "react-native": "0.81.4",
     "react-native-advanced-input-mask": "^1.4.6",
     "react-native-gesture-handler": "2.28.0",
@@ -29,6 +33,7 @@
     "react-native-safe-area-context": "5.6.1",
     "react-native-screens": "4.16.0",
     "react-native-toast-message": "^2.3.0",
+    "react-native-web": "^0.21.2",
     "react-native-worklets": "^0.6.0"
   },
   "devDependencies": {
@@ -47,9 +52,16 @@
     "@types/jest": "^29.5.13",
     "@types/react": "^19.1.0",
     "@types/react-test-renderer": "^19.1.0",
+    "babel-loader": "^10.0.0",
+    "babel-plugin-react-native-web": "^0.21.2",
+    "html-webpack-plugin": "^5.6.5",
     "jest": "^29.6.3",
     "patch-package": "^6.4.7",
-    "react-test-renderer": "19.1.0"
+    "react-test-renderer": "19.1.0",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.104.1",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2"
   },
   "jest": {
     "preset": "react-native",

diff --git a/FabricExample/src/components/BlurView/index.native.tsx b/FabricExample/src/components/BlurView/index.native.tsx
@@ -0,0 +1,3 @@
+import { BlurView } from "@react-native-community/blur";
+
+export default BlurView;
diff --git a/FabricExample/src/components/BlurView/index.tsx b/FabricExample/src/components/BlurView/index.tsx
@@ -0,0 +1,24 @@
+import type { ViewStyle } from "react-native";
+
+type BlurViewProps = {
+  blurAmount: number;
+  blurType: string;
+  reducedTransparencyFallbackColor: string;
+  style: ViewStyle;
+  children?: React.ReactNode;
+};
+
+function BlurView({ blurAmount, children, style }: BlurViewProps) {
+  return (
+    <div
+      style={{
+        ...(style as React.CSSProperties),
+        filter: `blur(${blurAmount}px)`,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default BlurView;
diff --git a/FabricExample/src/modules/haptic/index.native.ts b/FabricExample/src/modules/haptic/index.native.ts
@@ -0,0 +1,3 @@
+import { trigger } from "react-native-haptic-feedback";
+
+export default trigger;
diff --git a/FabricExample/src/modules/haptic/index.ts b/FabricExample/src/modules/haptic/index.ts
@@ -0,0 +1,3 @@
+const trigger = (_mode: string, _options: Record<string, boolean>) => {};
+
+export default trigger;
diff --git a/FabricExample/src/screens/Examples/ImageGallery/index.tsx b/FabricExample/src/screens/Examples/ImageGallery/index.tsx
@@ -150,7 +150,11 @@ const SharedTransition = ({
 
         {!!image.img && (
           <GestureDetector gesture={gesture}>
-            <Reanimated.Image fadeDuration={0} src={image.img} style={style} />
+            <Reanimated.Image
+              fadeDuration={0}
+              source={{ uri: image.img }}
+              style={style}
+            />
           </GestureDetector>
         )}
       </GestureHandlerRootView>
@@ -193,7 +197,12 @@ const ImagePreview = ({
       {modal === src && isModalFullyVisible ? (
         <View style={styles.image} />
       ) : (
-        <Image ref={ref} fadeDuration={0} src={src} style={styles.image} />
+        <Image
+          ref={ref}
+          fadeDuration={0}
+          source={{ uri: src }}
+          style={styles.image}
+        />
       )}
     </TouchableOpacity>
   );

diff --git a/FabricExample/src/screens/Examples/Toolbar/index.tsx b/FabricExample/src/screens/Examples/Toolbar/index.tsx
@@ -1,14 +1,14 @@
-import { BlurView } from "@react-native-community/blur";
 import React, { useCallback, useEffect, useState } from "react";
 import { Modal, Platform, StyleSheet, Text, View } from "react-native";
-import { trigger } from "react-native-haptic-feedback";
 import {
   KeyboardAwareScrollView,
   KeyboardToolbar,
 } from "react-native-keyboard-controller";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
+import BlurView from "../../../components/BlurView";
 import TextInput from "../../../components/TextInput";
+import trigger from "../../../modules/haptic";
 
 import AutoFillContacts from "./Contacts";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { BlurView } from "@react-native-community/blur";

		export default BlurView;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { trigger } from "react-native-haptic-feedback";

		export default trigger;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		const trigger = (_mode: string, _options: Record<string, boolean>) => {};

		export default trigger;