@multiplatform.one/forms 8.6.0 → 9.0.1

package/dist/jsx/shared/i18n.mjs

@@ -2,7 +2,7 @@ import * as ReactI18next from "react-i18next";
 const useTranslation = (...args) => {
   const impl = ReactI18next.useTranslation;
   if (typeof impl !== "function") {
-    throw new Error("[@multiplatform.one/forms] react-i18next is not installed, but a component that translates its built-in copy was rendered. Add react-i18next and i18next to your app's dependencies (they are optional peers so apps that never render these components can omit them).");
+    throw new Error("[@multiplatform.one/forms] react-i18next is not installed, but a component that translates its built-in copy was rendered. Add react-i18next and i18next to your app's dependencies.");
   }
   return impl(...args);
 };

package/dist/jsx/shared/i18n.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["ReactI18next","useTranslation","args","impl","Error"],"sources":["../../../src/shared/i18n.ts"],"sourcesContent":[null],"mappings":"AAAA,YAAYA,YAAA,MAAkB;AAYvB,MAAMC,cAAA,GAAkBA,CAAA,GAAIC,IAAA,KAAoB;EACrD,MAAMC,IAAA,GAAQH,YAAA,CACXC,cAAA;EACH,IAAI,OAAOE,IAAA,KAAS,YAAY;IAC9B,MAAM,IAAIC,KAAA,CACR,yQAIF;EACF;EACA,OAAOD,IAAA,CAAK,GAAGD,IAAI;AACrB","ignoreList":[]}
+{"version":3,"names":["ReactI18next","useTranslation","args","impl","Error"],"sources":["../../../src/shared/i18n.ts"],"sourcesContent":[null],"mappings":"AAAA,YAAYA,YAAA,MAAkB;AAUvB,MAAMC,cAAA,GAAkBA,CAAA,GAAIC,IAAA,KAAoB;EACrD,MAAMC,IAAA,GAAQH,YAAA,CACXC,cAAA;EACH,IAAI,OAAOE,IAAA,KAAS,YAAY;IAC9B,MAAM,IAAIC,KAAA,CACR,sLAGF;EACF;EACA,OAAOD,IAAA,CAAK,GAAGD,IAAI;AACrB","ignoreList":[]}

package/dist/jsx/shared/i18n.native.js

@@ -45,7 +45,7 @@ var useTranslation = function useTranslation2() {
   }
   var impl = ReactI18next.useTranslation;
   if (typeof impl !== "function") {
-    throw new Error("[@multiplatform.one/forms] react-i18next is not installed, but a component that translates its built-in copy was rendered. Add react-i18next and i18next to your app's dependencies (they are optional peers so apps that never render these components can omit them).");
+    throw new Error("[@multiplatform.one/forms] react-i18next is not installed, but a component that translates its built-in copy was rendered. Add react-i18next and i18next to your app's dependencies.");
   }
   return impl(...args);
 };

package/dist/jsx/shared/i18n.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__create","Object","create","__defProp","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__getProtoOf","getPrototypeOf","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable"],"sources":["../../../src/shared/i18n.ts"],"sourcesContent":[null],"mappings":"AAAA,YAAY;;AAYL,IAAAA,QAAM,GAAAC,MAAA,CAAAC,MAAsB;AACjC,IAAAC,SAAM,GAAQF,MAAA,CAAAG,cACX;AACH,IAAAC,gBAAW,GAASJ,MAAA,CAAAK,wBAAY;AAC9B,IAAAC,iBAAU,GAAAN,MAAA,CAAAO,mBAAA;AAAA,IAAAC,YACR,GAAAR,MAAA,CAAAS,cAAA;AAAA,IAIFC,YAAA,GAAAV,MAAA,CAAAW,SAAA,CAAAC,cAAA;AAAA,IACFC,QAAA,GAAAA,CAAAC,MAAA,EAAAC,GAAA;EACA,SAAOC,IAAK,IAAGD,GAAI,EACrBb,SAAA,CAAAY,MAAA,EAAAE,IAAA;IAAAC,GAAA,EAAAF,GAAA,CAAAC,IAAA;IAAAE,UAAA;EAAA","ignoreList":[]}
+{"version":3,"names":["__create","Object","create","__defProp","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__getProtoOf","getPrototypeOf","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable"],"sources":["../../../src/shared/i18n.ts"],"sourcesContent":[null],"mappings":"AAAA,YAAY;;AAUL,IAAAA,QAAM,GAAAC,MAAA,CAAAC,MAAsB;AACjC,IAAAC,SAAM,GAAQF,MAAA,CAAAG,cACX;AACH,IAAAC,gBAAW,GAASJ,MAAA,CAAAK,wBAAY;AAC9B,IAAAC,iBAAU,GAAAN,MAAA,CAAAO,mBAAA;AAAA,IAAAC,YACR,GAAAR,MAAA,CAAAS,cAAA;AAAA,IAGFC,YAAA,GAAAV,MAAA,CAAAW,SAAA,CAAAC,cAAA;AAAA,IACFC,QAAA,GAAAA,CAAAC,MAAA,EAAAC,GAAA;EACA,SAAOC,IAAK,IAAGD,GAAI,EACrBb,SAAA,CAAAY,MAAA,EAAAE,IAAA;IAAAC,GAAA,EAAAF,GAAA,CAAAC,IAAA;IAAAE,UAAA;EAAA","ignoreList":[]}

package/metro/index.js

@@ -0,0 +1,92 @@
+/**
+ * Metro preset for an Expo app that hosts MPO (FZ-10629, FZ-10634).
+ *
+ *   const { withMultiplatformOne } = require("@multiplatform.one/forms/metro");
+ *   module.exports = withMultiplatformOne(getDefaultConfig(__dirname));
+ *
+ * Plain CommonJS with no build step, because a metro.config.js is loaded by
+ * Node before any transform exists. It touches no `sourceExts`, no
+ * `blockList` and no `transformer`. Those belong to the app.
+ *
+ * It does two things.
+ *
+ * 1. On iOS and Android, `@phosphor-icons/react`'s IconBase resolves to
+ *    `phosphor-icon-base.js` beside this file. MPO draws its icons with
+ *    phosphor, whose IconBase renders DOM `<svg>`; the swap draws the same
+ *    glyph with react-native-svg and gives it the theme's ink. Web keeps
+ *    phosphor's own IconBase.
+ *
+ * 2. With `{ router: "expo-router" }`, a web bundle resolves the `one` that
+ *    `@multiplatform.one/router` imports to the package's Expo Router binding.
+ *    The router's web entry is written for One, which builds with Vite. A
+ *    phone bundle needs none of this: there the app selects the binding with
+ *    `import "@multiplatform.one/router/expo-router"` and Metro never sees
+ *    `one`.
+ *
+ * It CHAINS any `resolveRequest` the app already set, and applying it twice
+ * is a no-op, marked with a well-known symbol on the config.
+ */
+
+"use strict";
+
+const path = require("node:path");
+
+const metroMarker = Symbol.for("@multiplatform.one/forms/metro");
+const phosphorIconBase = path.join(__dirname, "phosphor-icon-base.js");
+const routerPackage = /[\\/]@multiplatform\.one[\\/]router[\\/]/;
+const routerBindings = { "expo-router": "@multiplatform.one/router/expo-router" };
+
+/**
+ * @param {{ originModulePath?: string }} context Metro's resolution context
+ * @param {string} moduleName the specifier being resolved
+ * @param {string | null} platform
+ */
+function isPhosphorIconBase(context, moduleName, platform) {
+  return (
+    platform !== "web" &&
+    moduleName.includes("IconBase") &&
+    Boolean(context.originModulePath?.includes("@phosphor-icons/react"))
+  );
+}
+
+/**
+ * @template {{ resolver?: { resolveRequest?: Function } }} T
+ * @param {T} config the app's Metro config
+ * @param {{ router?: "expo-router" }} [options]
+ * @returns {T}
+ */
+function withMultiplatformOne(config, options = {}) {
+  if (config[metroMarker]) return config;
+  const binding = options.router === undefined ? undefined : routerBindings[options.router];
+  if (options.router !== undefined && !binding) {
+    throw new Error(
+      `[@multiplatform.one/forms/metro] unknown router "${options.router}". Known: ${Object.keys(routerBindings).join(", ")}`,
+    );
+  }
+  const upstream = config.resolver?.resolveRequest;
+  const next = (context, moduleName, platform) =>
+    upstream
+      ? upstream(context, moduleName, platform)
+      : context.resolveRequest(context, moduleName, platform);
+  const resolveRequest = (context, moduleName, platform) => {
+    if (isPhosphorIconBase(context, moduleName, platform)) {
+      return { type: "sourceFile", filePath: phosphorIconBase };
+    }
+    if (
+      binding &&
+      platform === "web" &&
+      moduleName === "one" &&
+      routerPackage.test(context.originModulePath ?? "")
+    ) {
+      return next(context, binding, platform);
+    }
+    return next(context, moduleName, platform);
+  };
+  return {
+    ...config,
+    resolver: { ...config.resolver, resolveRequest },
+    [metroMarker]: true,
+  };
+}
+
+module.exports = { phosphorIconBase, withMultiplatformOne };

package/metro/phosphor-icon-base.js

@@ -0,0 +1,129 @@
+/**
+ * Native-compatible shim for @phosphor-icons/react IconBase.
+ * Replaces web SVG elements (svg, path, rect, circle, line, polyline, polygon)
+ * with react-native-svg equivalents (Svg, Path, Rect, Circle, Line, Polyline, Polygon).
+ */
+const React = require("react");
+const RNSvg = require("react-native-svg");
+const { useTheme } = require("@tamagui/web");
+
+const SVG_ELEMENT_MAP = {
+  svg: RNSvg.Svg,
+  path: RNSvg.Path,
+  rect: RNSvg.Rect,
+  circle: RNSvg.Circle,
+  line: RNSvg.Line,
+  polyline: RNSvg.Polyline,
+  polygon: RNSvg.Polygon,
+  ellipse: RNSvg.Ellipse,
+  g: RNSvg.G,
+  defs: RNSvg.Defs,
+  clipPath: RNSvg.ClipPath,
+  mask: RNSvg.Mask,
+  use: RNSvg.Use,
+  text: RNSvg.Text,
+  tspan: RNSvg.TSpan,
+  linearGradient: RNSvg.LinearGradient,
+  radialGradient: RNSvg.RadialGradient,
+  stop: RNSvg.Stop,
+};
+
+function transformChildren(children) {
+  return React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) return child;
+    const type = child.type;
+    if (typeof type === "string" && SVG_ELEMENT_MAP[type]) {
+      const newProps = { ...child.props };
+      if (newProps.children) {
+        newProps.children = transformChildren(newProps.children);
+      }
+      return React.createElement(SVG_ELEMENT_MAP[type], newProps);
+    }
+    if (child.props && child.props.children) {
+      return React.cloneElement(child, {
+        ...child.props,
+        children: transformChildren(child.props.children),
+      });
+    }
+    return child;
+  });
+}
+
+function resolveToken(theme, value) {
+  if (typeof value !== "string" || value.charAt(0) !== "$") return value;
+  const entry = theme && theme[value.slice(1)];
+  if (!entry) return undefined;
+  return typeof entry.get === "function" ? entry.get() : entry.val || undefined;
+}
+
+/*
+ * FZ-7680. A glyph handed no colour, `currentColor`, or a token the theme
+ * lacks would reach react-native-svg as `currentColor`, which is nil there
+ * and paints black on the dark scheme. It takes the theme's ink instead.
+ */
+function themeInk(theme) {
+  for (const key of ["color", "color12", "color11"]) {
+    const value = resolveToken(theme, `$${key}`);
+    if (typeof value === "string" && value && value !== "currentColor") return value;
+  }
+  return "currentColor";
+}
+
+function resolvePaint(theme, value) {
+  const resolved = resolveToken(theme, value);
+  return typeof resolved === "string" && resolved && resolved !== "currentColor"
+    ? resolved
+    : themeInk(theme);
+}
+
+const IconBase = React.forwardRef((props, ref) => {
+  const {
+    alt: _alt,
+    color,
+    size,
+    weight,
+    mirrored: _mirrored,
+    children: _children,
+    weights,
+    ...rest
+  } = props;
+
+  /*
+   * MPO-67. Every caller passes a Tamagui token ("$color11",
+   * "$accentBackground"); react-native-svg does not know tokens, so the token
+   * string fell through to `currentColor`, which on native resolves to nil and
+   * paints the glyph OPAQUE BLACK. On the dark scheme that is a glyph you
+   * cannot see — the invisible selected tick in Combobox is exactly this.
+   * Web never showed it because there the token is a CSS variable the cascade
+   * resolves. Resolve the token here, where the value becomes a paint.
+   */
+  const theme = useTheme();
+  const resolvedColor = resolvePaint(theme, color);
+  const resolvedSize = size || 24;
+  const resolvedWeight = weight || "regular";
+
+  const weightContent = weights ? weights.get(resolvedWeight) : null;
+  const svgChildren = transformChildren(weightContent);
+
+  return React.createElement(
+    RNSvg.Svg,
+    {
+      ref,
+      width: resolvedSize,
+      height: resolvedSize,
+      fill: resolvedColor,
+      viewBox: "0 0 256 256",
+      // Decorative glyph parity with web: react-native-svg views are touch
+      // responders by default and swallow taps meant for a wrapping Pressable
+      // (web <svg> inside <button> passes clicks through).
+      pointerEvents: "none",
+      ...rest,
+    },
+    svgChildren,
+  );
+});
+
+IconBase.displayName = "IconBase";
+
+module.exports = IconBase;
+module.exports.default = IconBase;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/forms",
-  "version": "8.6.0",
+  "version": "9.0.1",
   "description": "Cross-platform form components with URL state management",
   "keywords": [
     "cross-platform",
@@ -27,6 +27,7 @@
   "source": "src/index.ts",
   "files": [
     "dist",
+    "metro",
     "src",
     "types",
     "!types/.tsbuildinfo"
@@ -63,17 +64,18 @@
       "import": "./dist/esm/nativeTwins.mjs",
       "require": "./dist/cjs/nativeTwins.cjs",
       "default": "./dist/cjs/nativeTwins.cjs"
-    }
+    },
+    "./metro": "./metro/index.js"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.20",
-    "@multiplatform.one/platform": "^8.6.0",
-    "@multiplatform.one/router": "^8.6.0",
-    "@multiplatform.one/table-primitives": "^8.6.0",
-    "@multiplatform.one/theme": "^8.6.0",
+    "@multiplatform.one/platform": "^9.0.1",
+    "@multiplatform.one/router": "^9.0.1",
+    "@multiplatform.one/table-primitives": "^9.0.1",
+    "@multiplatform.one/theme": "^9.0.1",
     "@phosphor-icons/react": "^2.1.10",
     "@tamagui/get-font-sized": "2.7.6",
     "@tamagui/get-token": "2.7.6",
@@ -84,17 +86,15 @@
     "@tanstack/form-core": "^1.33.5",
     "@tanstack/react-form": "^1.33.5",
     "@tanstack/react-store": "^0.11.0",
-    "expo-camera": "~55.0.18",
-    "expo-linear-gradient": "~55.0.13",
     "html5-qrcode": "^2.3.8",
     "perfect-freehand": "^1.2.3",
     "tamagui": "2.7.6"
   },
   "devDependencies": {
     "@expo/ui": "~55.0.17",
-    "@multiplatform.one/config": "8.6.0",
-    "@multiplatform.one/storybook": "8.6.0",
-    "@multiplatform.one/test-utils": "8.6.0",
+    "@multiplatform.one/config": "9.0.1",
+    "@multiplatform.one/storybook": "9.0.1",
+    "@multiplatform.one/test-utils": "9.0.1",
     "@tamagui/build": "2.7.6",
     "@tamagui/config": "2.7.6",
     "@tamagui/vite-plugin": "2.7.6",
@@ -103,8 +103,10 @@
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.1.2",
     "@vitest/coverage-v8": "^4.1.12",
+    "expo-camera": "~55.0.18",
     "expo-document-picker": "~55.0.16",
     "expo-image-picker": "~55.0.23",
+    "expo-linear-gradient": "~55.0.13",
     "expo-maps": "~55.0.21",
     "happy-dom": "^21.0.3",
     "i18next": "^25.10.10",
@@ -121,13 +123,15 @@
     "@react-native-community/datetimepicker": ">=8.0.1",
     "@react-native-community/slider": ">=4.5.0",
     "@react-native-segmented-control/segmented-control": ">=2.5.0",
+    "expo-camera": "*",
     "expo-document-picker": "*",
     "expo-glass-effect": "*",
     "expo-haptics": "55.0.17",
     "expo-image-picker": "*",
+    "expo-linear-gradient": "*",
     "expo-maps": "*",
     "expo-modules-core": "*",
-    "i18next": "^25.0.0",
+    "i18next": ">=25.0.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-i18next": ">=14",
@@ -148,28 +152,28 @@
     "@react-native-segmented-control/segmented-control": {
       "optional": true
     },
-    "expo-document-picker": {
+    "expo-camera": {
       "optional": true
     },
-    "expo-glass-effect": {
+    "expo-document-picker": {
       "optional": true
     },
-    "expo-image-picker": {
+    "expo-glass-effect": {
       "optional": true
     },
-    "expo-maps": {
+    "expo-haptics": {
       "optional": true
     },
-    "expo-haptics": {
+    "expo-image-picker": {
       "optional": true
     },
-    "expo-modules-core": {
+    "expo-linear-gradient": {
       "optional": true
     },
-    "i18next": {
+    "expo-maps": {
       "optional": true
     },
-    "react-i18next": {
+    "expo-modules-core": {
       "optional": true
     },
     "react-native": {

package/src/fields/Barcode/BarcodeScanner.native.spec.tsx

@@ -0,0 +1,59 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import type { KnobProps } from "@multiplatform.one/theme";
+import { fireEvent } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { BarcodeScanner, preflightCamera } from "./BarcodeScanner.native";
+
+vi.mock("./expoCameraLoader", () => ({
+  loadExpoCamera: vi.fn(() => null),
+}));
+
+const knobProps = {
+  borderRadius: {},
+  inputSurface: {},
+  body: {},
+  sizeToken: "$4",
+} as unknown as KnobProps;
+
+// FZ-10637. An app without expo-camera: the Barcode field fails soft.
+describe("BarcodeScanner (native) without expo-camera", () => {
+  it("fails the camera pre-flight with a reason, so the scanner is never presented (LC-19)", async () => {
+    await expect(preflightCamera()).resolves.toEqual({
+      ok: false,
+      reason: "Camera unavailable: this app does not include the camera module.",
+    });
+  });
+
+  it("renders the reason and a close action when a caller mounts it anyway", () => {
+    const onClose = vi.fn();
+    const result = renderWithProviders(
+      <BarcodeScanner
+        active
+        onScan={() => {}}
+        onError={() => {}}
+        onClose={onClose}
+        knobProps={knobProps}
+      />,
+    );
+    expect(result.getByTestId("barcode-scanner-unavailable").textContent).toContain(
+      "Camera unavailable: this app does not include the camera module.",
+    );
+    fireEvent.click(result.getByLabelText("Close scanner"));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders nothing while inactive", () => {
+    const result = renderWithProviders(
+      <BarcodeScanner
+        active={false}
+        onScan={() => {}}
+        onError={() => {}}
+        onClose={() => {}}
+        knobProps={knobProps}
+      />,
+    );
+    expect(
+      result.container.querySelector("[data-testid='barcode-scanner-unavailable']"),
+    ).toBeNull();
+  });
+});

package/src/fields/Barcode/BarcodeScanner.native.tsx

@@ -1,4 +1,3 @@
-import { Camera, CameraView, useCameraPermissions } from "expo-camera";
 import { useEffect, useRef, useState } from "react";
 import { StyleSheet } from "react-native";
 import { Text, View, XStack, YStack } from "tamagui";
@@ -6,6 +5,7 @@ import { Button, IconButton } from "../../Button";
 import { standardActions } from "../../standardActions";
 import { formCommonColors, formInputColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
+import { type ExpoCameraModule, loadExpoCamera } from "./expoCameraLoader";
 import type { BarcodeScannerProps, CameraPreflightResult } from "./scannerTypes";
 import { resolveNativeBarcodeTypes, scannerViewportHeight } from "./scannerTypes";
 
@@ -18,8 +18,10 @@ import { resolveNativeBarcodeTypes, scannerViewportHeight } from "./scannerTypes
  * stable scanner surface, never as a present-fail-dismiss flash.
  */
 export async function preflightCamera(): Promise<CameraPreflightResult> {
+  const camera = loadExpoCamera();
+  if (!camera) return { ok: false, reason: cameraModuleMissing() };
   try {
-    const status = await Camera.getCameraPermissionsAsync();
+    const status = await camera.Camera.getCameraPermissionsAsync();
     if (!status.granted && !status.canAskAgain) {
       return {
         ok: false,
@@ -47,14 +49,16 @@ export async function preflightCamera(): Promise<CameraPreflightResult> {
  * Note: the iOS simulator has no camera, so live scanning can only be verified
  * on a physical device; in the simulator the camera surface renders empty.
  */
-export function BarcodeScanner({
+function CameraScanner({
+  camera,
   active,
   onScan,
   onError,
   onClose,
   knobProps,
   formats,
-}: BarcodeScannerProps) {
+}: BarcodeScannerProps & { camera: ExpoCameraModule }) {
+  const { CameraView, useCameraPermissions } = camera;
   const barcodeTypes = resolveNativeBarcodeTypes(formats);
   const viewportPx = scannerViewportHeight(knobProps.sizeToken);
   const [permission, requestPermission] = useCameraPermissions();
@@ -135,3 +139,44 @@ export function BarcodeScanner({
     </YStack>
   );
 }
+
+function cameraModuleMissing(): string {
+  return t("Camera unavailable: this app does not include the camera module.");
+}
+
+/**
+ * The scanner an app without `expo-camera` gets: the reason and a way out,
+ * never a crash. `preflightCamera()` already refuses to present the scanner
+ * in that app, so this is the guard for a caller that mounts it anyway.
+ */
+function CameraUnavailable({
+  onClose,
+  knobProps,
+}: Pick<BarcodeScannerProps, "onClose" | "knobProps">) {
+  return (
+    <YStack
+      testID="barcode-scanner-unavailable"
+      {...knobProps.borderRadius}
+      {...knobProps.inputSurface}
+      borderColor={formInputColors.border.base}
+      padding="$4"
+      gap="$3"
+      alignItems="center"
+    >
+      <Text {...knobProps.body} color={formCommonColors.error} textAlign="center">
+        {cameraModuleMissing()}
+      </Text>
+      <IconButton
+        icon={standardActions.close.icon}
+        onPress={onClose}
+        aria-label={t("Close scanner")}
+      />
+    </YStack>
+  );
+}
+
+export function BarcodeScanner(props: BarcodeScannerProps) {
+  const camera = loadExpoCamera();
+  if (!camera) return props.active ? <CameraUnavailable {...props} /> : null;
+  return <CameraScanner camera={camera} {...props} />;
+}

package/src/fields/Barcode/expoCameraLoader.spec.ts

@@ -0,0 +1,45 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it, vi } from "vitest";
+import { resolveExpoCamera } from "./expoCameraLoader";
+
+const camera = {
+  Camera: { getCameraPermissionsAsync: async () => ({ granted: true, canAskAgain: true }) },
+  CameraView: () => null,
+  useCameraPermissions: () => [null, async () => ({ granted: true })],
+};
+
+// FZ-10637. expo-camera is an optional peer the host installs at its own SDK
+// version, so the Barcode field has to survive an app that leaves it out.
+describe("resolveExpoCamera", () => {
+  it("returns the module when the package and the native module are both present", () => {
+    expect(resolveExpoCamera({ hasNativeModule: () => true, camera: () => camera })).toBe(camera);
+  });
+
+  it("returns null when the app does not install expo-camera", () => {
+    expect(resolveExpoCamera({ hasNativeModule: () => true, camera: () => null })).toBeNull();
+    const missing = () => {
+      throw new Error("Cannot find module 'expo-camera'");
+    };
+    expect(resolveExpoCamera({ hasNativeModule: () => true, camera: missing })).toBeNull();
+  });
+
+  it("returns null without loading the package when the binary lacks the native module", () => {
+    const load = vi.fn(() => camera);
+    expect(resolveExpoCamera({ hasNativeModule: () => false, camera: load })).toBeNull();
+    expect(load).not.toHaveBeenCalled();
+  });
+
+  it("asks for the ExpoCamera native module", () => {
+    const hasNativeModule = vi.fn(() => true);
+    resolveExpoCamera({ hasNativeModule, camera: () => camera });
+    expect(hasNativeModule).toHaveBeenCalledWith("ExpoCamera");
+  });
+
+  it("loads expo-camera from inside a try block, never a static import, so Metro bundles without it", () => {
+    const loader = readFileSync(join(__dirname, "expoCameraLoader.ts"), "utf8");
+    expect(loader).toMatch(/try \{\s*return require\("expo-camera"\);/);
+    const scanner = readFileSync(join(__dirname, "BarcodeScanner.native.tsx"), "utf8");
+    expect(scanner).not.toMatch(/from "expo-camera"/);
+  });
+});

package/src/fields/Barcode/expoCameraLoader.ts

@@ -0,0 +1,46 @@
+import { hasExpoNativeModule } from "../../shared/expoNativeModule";
+
+export type ExpoCameraModule = typeof import("expo-camera");
+
+export interface ExpoCameraSources {
+  hasNativeModule(name: string): boolean;
+  camera(): unknown;
+}
+
+const appSources: ExpoCameraSources = {
+  hasNativeModule: hasExpoNativeModule,
+  camera: () => {
+    try {
+      return require("expo-camera");
+    } catch {
+      return null;
+    }
+  },
+};
+
+/**
+ * `expo-camera` is an optional peer: the host app installs it at the version
+ * its Expo SDK ships, and an app that never scans a barcode leaves it out.
+ * Returns null when the package is not installed or the binary lacks the
+ * native module, and the Barcode field then reports the camera as unavailable
+ * instead of presenting the scanner (FZ-10637).
+ */
+export function resolveExpoCamera(
+  sources: ExpoCameraSources = appSources,
+): ExpoCameraModule | null {
+  try {
+    if (!sources.hasNativeModule("ExpoCamera")) return null;
+    const camera = sources.camera() as Partial<ExpoCameraModule> | null | undefined;
+    if (!camera?.CameraView || !camera.Camera || !camera.useCameraPermissions) return null;
+    return camera as ExpoCameraModule;
+  } catch {
+    return null;
+  }
+}
+
+let cached: ExpoCameraModule | null | undefined;
+
+export function loadExpoCamera(): ExpoCameraModule | null {
+  if (cached === undefined) cached = resolveExpoCamera();
+  return cached;
+}

package/src/fields/ColorPicker/ColorPicker.spec.tsx

@@ -28,22 +28,24 @@ vi.mock("@tamagui/lucide-icons-2", () => ({
   Pipette: () => null,
 }));
 
-vi.mock("expo-linear-gradient", () => ({
-  LinearGradient: (props: {
-    colors?: string[];
-    locations?: number[];
-    start?: { x: number; y: number };
-    end?: { x: number; y: number };
-    style?: unknown;
-    testID?: string;
-  }) =>
-    createElement("div", {
-      "data-testid": props.testID ?? "expo-linear-gradient",
-      "data-colors": JSON.stringify(props.colors ?? []),
-      "data-locations": JSON.stringify(props.locations ?? null),
-      "data-start": JSON.stringify(props.start ?? null),
-      "data-end": JSON.stringify(props.end ?? null),
-    }),
+vi.mock("./expoLinearGradientLoader", () => ({
+  loadExpoLinearGradient: () => ({
+    LinearGradient: (props: {
+      colors?: string[];
+      locations?: number[];
+      start?: { x: number; y: number };
+      end?: { x: number; y: number };
+      style?: unknown;
+      testID?: string;
+    }) =>
+      createElement("div", {
+        "data-testid": props.testID ?? "expo-linear-gradient",
+        "data-colors": JSON.stringify(props.colors ?? []),
+        "data-locations": JSON.stringify(props.locations ?? null),
+        "data-start": JSON.stringify(props.start ?? null),
+        "data-end": JSON.stringify(props.end ?? null),
+      }),
+  }),
 }));
 
 async function loadColorPicker() {