Shopify · wcandillon · Nov 12, 2025 · Oct 15, 2025 · Oct 15, 2025 · Oct 15, 2025
diff --git a/apps/example/index.html b/apps/example/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <link rel="icon" href="/src/assets/react.png" type="image/png" />
+    <script src="https://unpkg.com/canvaskit-wasm/bin/full/canvaskit.js"></script>
+
+    <title>Example</title>
+    <!-- The `react-native-web` recommended style reset: https://necolas.github.io/react-native-web/docs/setup/#root-element -->
+    <style id="react-native-web-reset">
+      /* These styles make the body full-height */
+      html,
+      body {
+        height: 100%;
+      }
+      /* These styles disable body scrolling if you are using <ScrollView> */
+      body {
+        overflow: hidden;
+      }
+      /* These styles make the root element full-height */
+      #root {
+        display: flex;
+        height: 100%;
+        flex: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script
+      src="index.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app&unstable_transformProfile=hermes-stable"
+      defer
+    ></script>
+  </body>
+</html>
diff --git a/apps/example/index.web.js b/apps/example/index.web.js
@@ -0,0 +1,23 @@
+import { AppRegistry } from "react-native";
+
+import App from "./src/App";
+import { name as appName } from "./app.json";
+
+AppRegistry.registerComponent(appName, () => App);
+
+const rootTag = document.getElementById("root");
+
+if (process.env.NODE_ENV !== "production") {
+  if (!rootTag) {
+    throw new Error(
+      'Required HTML element with id "root" was not found in the document HTML.'
+    );
+  }
+}
+
+CanvasKitInit({
+  locateFile: (file) => `https://unpkg.com/canvaskit-wasm/bin/full/${file}`,
+}).then((CanvasKit) => {
+  window.CanvasKit = global.CanvasKit = CanvasKit;
+  AppRegistry.runApplication(appName, { rootTag });
+});
diff --git a/apps/example/metro.config.js b/apps/example/metro.config.js
@@ -1,5 +1,15 @@
+const path = require("path");
+const { resolve: defaultResolve } = require("metro-resolver");
 const { makeMetroConfig } = require("@rnx-kit/metro-config");
-module.exports = makeMetroConfig({
+
+const root = path.resolve(__dirname, "../..");
+const rnwPath = path.resolve(root, "node_modules/react-native-web");
+const assetRegistryPath = path.resolve(
+  root,
+  "node_modules/react-native-web/dist/modules/AssetRegistry/index",
+);
+
+const metroConfig = makeMetroConfig({
   transformer: {
     getTransformOptions: async () => ({
       transform: {
@@ -9,3 +19,39 @@ module.exports = makeMetroConfig({
     }),
   },
 });
+
+function getWebMetroConfig(config) {
+  config.resolver = config.resolver ?? {};
+  config.resolver.platforms = ["ios", "android", "web"];
+
+  const origResolveRequest =
+    config.resolver.resolveRequest ??
+    ((context, moduleName, platform) =>
+      defaultResolve(context, moduleName, platform));
+
+  config.resolver.resolveRequest = (contextRaw, moduleName, platform) => {
+    const context = {
+      ...contextRaw,
+      preferNativePlatform: false,
+    };
+
+    if (moduleName === "react-native") {
+      return {
+        filePath: path.resolve(rnwPath, "dist/index.js"),
+        type: "sourceFile",
+      };
+    }
+
+    // Let default config handle other modules
+    return origResolveRequest(context, moduleName, platform);
+  };
+
+  config.transformer = config.transformer ?? {};
+  config.transformer.assetRegistryPath = assetRegistryPath;
+
+  return config;
+}
+
+module.exports = !!process.env.IS_WEB_BUILD
+  ? getWebMetroConfig(metroConfig)
+  : metroConfig;
diff --git a/apps/example/package.json b/apps/example/package.json
@@ -16,7 +16,8 @@
     "pod:install": "cd ios && pod install",
     "test": "jest",
     "tsc": "tsc --noEmit",
-    "start": "react-native start"
+    "start": "react-native start",
+    "web": "IS_WEB_BUILD=true react-native start"
   },
   "dependencies": {
     "@callstack/react-native-visionos": "^0.75.0",
@@ -30,13 +31,15 @@
     "cdt2d": "^1.0.0",
     "its-fine": "^2.0.0",
     "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-native": "0.78.0",
     "react-native-gesture-handler": "^2.24.0",
     "react-native-macos": "^0.78.3",
     "react-native-reanimated": "3.19.1",
     "react-native-safe-area-context": "^5.2.0",
     "react-native-screens": "^4.9.1",
     "react-native-svg": "^15.11.2",
+    "react-native-web": "^0.21.2",
     "react-native-windows": "^0.75.0"
   },
   "devDependencies": {
@@ -54,6 +57,8 @@
     "@rnx-kit/metro-config": "^2.0.0",
     "@types/jest": "^29.5.13",
     "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/react-native-web": "^0.19.2",
     "@types/react-test-renderer": "^19.0.0",
     "eslint": "9.36.0",
     "eslint-config-react-native-wcandillon": "4.0.1",

diff --git a/apps/example/src/App.tsx b/apps/example/src/App.tsx
@@ -39,6 +39,7 @@ import { HomeScreen } from "./Home";
 import type { StackParamList } from "./types";
 import { useAssets } from "./Tests/useAssets";
 import { Chess } from "./Examples/Chess";
+import "./resolveAssetSourcePolyfill";
 
 const linking: LinkingOptions<StackParamList> = {
   config: {

diff --git a/apps/example/src/resolveAssetSourcePolyfill.js b/apps/example/src/resolveAssetSourcePolyfill.js
@@ -0,0 +1,57 @@
+import { Image, PixelRatio, Platform } from "react-native";
+import { getAssetByID } from "react-native-web/dist/modules/AssetRegistry";
+
+// react-native-web does not support resolveAssetSource out of the box
+// https://github.com/necolas/react-native-web/issues/1666
+if (Platform.OS === "web") {
+  function resolveAssetUri(source) {
+    let uri = null;
+    if (typeof source === "number") {
+      // get the URI from the packager
+      const asset = getAssetByID(source);
+      if (asset == null) {
+        throw new Error(
+          `Image: asset with ID "${source}" could not be found. Please check the image source or packager.`,
+        );
+      }
+      // eslint-disable-next-line prefer-destructuring
+      let scale = asset.scales[0];
+      if (asset.scales.length > 1) {
+        const preferredScale = PixelRatio.get();
+        // Get the scale which is closest to the preferred scale
+        scale = asset.scales.reduce((prev, curr) =>
+          Math.abs(curr - preferredScale) < Math.abs(prev - preferredScale)
+            ? curr
+            : prev,
+        );
+      }
+      const scaleSuffix = scale !== 1 ? `@${scale}x` : "";
+      uri = asset
+        ? `${asset.httpServerLocation}/${asset.name}${scaleSuffix}.${asset.type}`
+        : "";
+    } else if (typeof source === "string") {
+      uri = source;
+    } else if (source && typeof source.uri === "string") {
+      // eslint-disable-next-line prefer-destructuring
+      uri = source.uri;
+    }
+
+    if (uri) {
+      const svgDataUriPattern = /^(data:image\/svg\+xml;utf8,)(.*)/;
+      const match = uri.match(svgDataUriPattern);
+      // inline SVG markup may contain characters (e.g., #, ") that need to be escaped
+      if (match) {
+        const [, prefix, svg] = match;
+        const encodedSvg = encodeURIComponent(svg);
+        return `${prefix}${encodedSvg}`;
+      }
+    }
+
+    return uri;
+  }
+
+  Image.resolveAssetSource = (source) => {
+    const uri = resolveAssetUri(source) || "";
+    return { uri };
+  };
+}
diff --git a/packages/skia/src/__tests__/setup.ts b/packages/skia/src/__tests__/setup.ts
@@ -9,8 +9,9 @@ import type { SkSurface, SkImage } from "../skia/types";
 
 export const E2E = process.env.E2E === "true";
 export const CI = process.env.CI === "true";
+export const WEB = process.env.WEB === "true";
 export const itFailsE2e = E2E ? it.failing : it;
-export const itRunsE2eOnly = E2E ? it : it.skip;
+export const itRunsE2eOnly = E2E && !WEB ? it : it.skip;
 export const itRunsNodeOnly = E2E ? it.skip : it;
 export const itRunsCIAndNodeOnly = CI || !E2E ? it : it.skip;