@oxy.so/services 11.17.0 → 12.2.0

package/src/ui/components/__tests__/SafeAreaRoot.test.tsx

@@ -0,0 +1,162 @@
+/**
+ * `OxyProvider`'s safe-area root on web reports the WINDOW's metrics and never
+ * mounts react-native-safe-area-context's measuring web provider.
+ *
+ * From 5.9 that provider measures its own element and reports
+ * `windowInsets.bottom - (innerHeight - rect.bottom)` unclamped, so a provider
+ * around a page that scrolls turns everything below the fold into bottom inset.
+ * OxyHQ/website measured it: an 844px viewport over a 2690px page gave the mobile
+ * account dialog a 2690px layout and an empty body (844px on 5.8.1). Here every
+ * element measures as that page, so any provider that consulted it would fail.
+ */
+import type { ReactNode } from 'react';
+import { act, render } from '@testing-library/react';
+import { Platform } from 'react-native';
+import type { EdgeInsets, Rect } from 'react-native-safe-area-context';
+
+const mockMeasuringProvider = jest.fn();
+
+// The library's own contexts and hooks, with its measuring provider recorded.
+// (Its real entry loads a codegen native component this jest setup cannot.)
+jest.mock('react-native-safe-area-context', () => {
+  const React = jest.requireActual<typeof import('react')>('react');
+  const SafeAreaInsetsContext = React.createContext<unknown>(null);
+  const SafeAreaFrameContext = React.createContext<unknown>(null);
+  return {
+    __esModule: true,
+    SafeAreaInsetsContext,
+    SafeAreaFrameContext,
+    SafeAreaProvider: ({ children }: { children?: ReactNode }) => {
+      mockMeasuringProvider();
+      return children;
+    },
+    useSafeAreaInsets: () => React.useContext(SafeAreaInsetsContext),
+    useSafeAreaFrame: () => React.useContext(SafeAreaFrameContext),
+  };
+});
+
+import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { SafeAreaRoot } from '../SafeAreaRoot';
+
+const PAGE_HEIGHT = 2690;
+const HOME_INDICATOR = 34;
+
+const originalOS = Platform.OS;
+const originalGetComputedStyle = window.getComputedStyle;
+const originalRect = HTMLElement.prototype.getBoundingClientRect;
+
+beforeEach(() => {
+  mockMeasuringProvider.mockClear();
+  // jsdom has no env(): the fixed probe padded with env(safe-area-inset-*)
+  // reads an iPhone's home-indicator inset at the bottom.
+  window.getComputedStyle = ((element: Element) => {
+    const style = originalGetComputedStyle(element);
+    const probe = (element as HTMLElement).style?.position === 'fixed';
+    return new Proxy(style, {
+      get(target, key) {
+        if (key === 'paddingBottom') return probe ? `${HOME_INDICATOR}px` : '0px';
+        if (key === 'paddingTop' || key === 'paddingLeft' || key === 'paddingRight') return '0px';
+        const value = Reflect.get(target, key);
+        return typeof value === 'function' ? value.bind(target) : value;
+      },
+    });
+  }) as typeof window.getComputedStyle;
+  HTMLElement.prototype.getBoundingClientRect = () =>
+    ({
+      x: 0,
+      y: 0,
+      top: 0,
+      left: 0,
+      width: 375,
+      height: PAGE_HEIGHT,
+      right: 375,
+      bottom: PAGE_HEIGHT,
+      toJSON: () => ({}),
+    }) as DOMRect;
+});
+
+afterEach(() => {
+  Platform.OS = originalOS;
+  window.getComputedStyle = originalGetComputedStyle;
+  HTMLElement.prototype.getBoundingClientRect = originalRect;
+});
+
+function renderMetrics() {
+  const seen: { insets?: EdgeInsets; frame?: Rect } = {};
+  function Probe() {
+    seen.insets = useSafeAreaInsets();
+    seen.frame = useSafeAreaFrame();
+    return null;
+  }
+  const view = render(
+    <SafeAreaRoot>
+      <Probe />
+    </SafeAreaRoot>,
+  );
+  return { seen, view };
+}
+
+describe('SafeAreaRoot', () => {
+  it('on web reports env() insets and the viewport frame, not the page', async () => {
+    Platform.OS = 'web';
+    const { seen, view } = renderMetrics();
+    await act(async () => {});
+    expect(mockMeasuringProvider).not.toHaveBeenCalled();
+    expect(seen.insets).toEqual({ top: 0, right: 0, bottom: HOME_INDICATOR, left: 0 });
+    // The react-native mock's window (useWindowDimensions), never PAGE_HEIGHT.
+    expect(seen.frame).toEqual({ x: 0, y: 0, width: 375, height: 667 });
+    view.unmount();
+    expect(document.querySelectorAll('div[aria-hidden="true"]')).toHaveLength(0);
+  });
+
+  it('on web provides zero insets until the browser answers', () => {
+    Platform.OS = 'web';
+    window.getComputedStyle = originalGetComputedStyle;
+    const { seen } = renderMetrics();
+    expect(seen.insets).toEqual({ top: 0, right: 0, bottom: 0, left: 0 });
+  });
+
+  it.each(['ios', 'android'] as const)('on %s mounts the native SafeAreaProvider', (os) => {
+    Platform.OS = os;
+    renderMetrics();
+    expect(mockMeasuringProvider).toHaveBeenCalled();
+  });
+});
+
+describe('the SDK mounts safe-area providers only through SafeAreaRoot', () => {
+  const fs = jest.requireActual<typeof import('node:fs')>('node:fs');
+  const path = jest.requireActual<typeof import('node:path')>('node:path');
+  const srcRoot = path.resolve(__dirname, '../../..');
+
+  function sourceFiles(dir: string): string[] {
+    return fs.readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+      const full = path.join(dir, entry.name);
+      if (entry.isDirectory()) return entry.name === '__tests__' ? [] : sourceFiles(full);
+      return /\.tsx?$/.test(entry.name) && !entry.name.endsWith('.d.ts') ? [full] : [];
+    });
+  }
+
+  it('no other source file names SafeAreaProvider', () => {
+    const files = sourceFiles(srcRoot);
+    expect(files.length).toBeGreaterThan(100);
+    const offenders = files
+      .filter((file) => /\bSafeAreaProvider\b/.test(fs.readFileSync(file, 'utf8')))
+      .map((file) => path.relative(srcRoot, file))
+      .filter((rel) => rel !== path.join('ui', 'components', 'SafeAreaRoot.tsx'))
+      // OxyProvider's usage doc shows an APP mounting its own provider.
+      .filter((rel) => {
+        const code = fs
+          .readFileSync(path.join(srcRoot, rel), 'utf8')
+          .replace(/\/\*[\s\S]*?\*\//g, '')
+          .replace(/(^|[^:])\/\/.*$/gm, '$1');
+        return /\bSafeAreaProvider\b/.test(code);
+      });
+    expect(offenders).toEqual([]);
+  });
+
+  it('OxyProvider wraps its tree in SafeAreaRoot', () => {
+    const provider = fs.readFileSync(path.join(srcRoot, 'ui/components/OxyProvider.tsx'), 'utf8');
+    expect(provider).toMatch(/import \{ SafeAreaRoot \} from '\.\/SafeAreaRoot'/);
+    expect(provider).toMatch(/<SafeAreaRoot>/);
+  });
+});

package/src/ui/components/fileManagement/FileViewer.tsx

@@ -1,7 +1,7 @@
 import { SpinnerIcon } from '@oxy.so/bloom/loading';
 import type React from 'react';
 import { useMemo, useState, useEffect } from 'react';
-import { View, ScrollView, Image, StyleSheet } from 'react-native';
+import { View, ScrollView, StyleSheet } from 'react-native';
 import { Button } from '@oxy.so/bloom/button';
 import { Text } from '@oxy.so/bloom/typography';
 import { Image as ExpoImage } from 'expo-image';
@@ -9,6 +9,7 @@ import MaterialCommunityIcons from '../../icons/MaterialCommunityIcons';
 import { useTheme } from '@oxy.so/bloom/theme';
 import type { FileMetadata } from '@oxy.so/core';
 import { formatFileSize } from '../../utils/fileManagement';
+import { getImageSize } from '../../utils/imageSize';
 import { GroupedSection, GroupedSectionItem } from '@oxy.so/bloom/grouped-section';
 
 interface FileViewerProps {
@@ -81,20 +82,24 @@ export const FileViewer: React.FC<FileViewerProps> = ({
 
   // Load image dimensions when image content is available
   useEffect(() => {
-    if (isImage && fileContent) {
-      Image.getSize(
-        fileContent,
-        (width, height) => {
-          setImageDimensions({ width, height });
-        },
-        () => {
-          // Fallback if dimensions can't be loaded
-          setImageDimensions({ width: 400, height: 400 });
-        },
-      );
-    } else {
+    if (!isImage || !fileContent) {
       setImageDimensions(null);
+      return;
     }
+    // A newer file may replace this one before its size arrives.
+    let current = true;
+    getImageSize(fileContent).then(
+      (size) => {
+        if (current) setImageDimensions(size);
+      },
+      () => {
+        // Fallback if dimensions can't be loaded
+        if (current) setImageDimensions({ width: 400, height: 400 });
+      },
+    );
+    return () => {
+      current = false;
+    };
   }, [isImage, fileContent]);
 
   // Calculate display size based on natural dimensions and max constraints

package/src/ui/components/photogrid/JustifiedPhotoGrid.tsx

@@ -1,8 +1,9 @@
 import React, { useMemo, useState, useCallback } from 'react';
-import { View, Image, useWindowDimensions, type LayoutChangeEvent } from 'react-native';
+import { View, useWindowDimensions, type LayoutChangeEvent } from 'react-native';
 import { Text } from '@oxy.so/bloom/typography';
 import { useQuery, keepPreviousData } from '@tanstack/react-query';
 import type { FileMetadata } from '@oxy.so/core';
+import { getImageSize } from '../../utils/imageSize';
 
 type PhotoSize = { width: number; height: number };
 
@@ -11,7 +12,7 @@ const EMPTY_DIMENSIONS: Record<string, PhotoSize> = {};
 
 /**
  * Measure the intrinsic size of every photo whose thumbnail URL has resolved,
- * via `Image.getSize`. Pure/async (no React state) so it can be a React Query
+ * via `getImageSize` (expo-image on a device). Pure/async (no React state) so it can be a React Query
  * `queryFn`. Photos without a resolved URL are skipped and re-measured on the
  * next signature change; a load error falls back to 1×1 (→ the 4/3 default).
  */
@@ -21,27 +22,15 @@ async function measurePhotoDimensions(
 ): Promise<Record<string, PhotoSize>> {
   const measured: Record<string, PhotoSize> = {};
   await Promise.all(
-    photos.map(
-      (photo) =>
-        new Promise<void>((resolve) => {
-          const url = getThumbUrl(photo);
-          if (!url) {
-            resolve();
-            return;
-          }
-          Image.getSize(
-            url,
-            (width, height) => {
-              measured[photo.id] = { width, height };
-              resolve();
-            },
-            () => {
-              measured[photo.id] = { width: 1, height: 1 };
-              resolve();
-            },
-          );
-        }),
-    ),
+    photos.map(async (photo) => {
+      const url = getThumbUrl(photo);
+      if (!url) return;
+      try {
+        measured[photo.id] = await getImageSize(url);
+      } catch {
+        measured[photo.id] = { width: 1, height: 1 };
+      }
+    }),
   );
   return measured;
 }
@@ -87,7 +76,7 @@ export interface JustifiedPhotoGridProps {
  * Responsive justified photo grid that stretches to the provided containerWidth.
  * Uses flex rows with proportional children widths instead of absolute pixel widths so it always fills.
  *
- * Owns its own intrinsic-dimension measurement: it calls `Image.getSize` on each
+ * Owns its own intrinsic-dimension measurement: it calls `getImageSize` on each
  * photo's resolved thumbnail URL and reflows once real aspect ratios are known
  * (falling back to 4/3 until then). Measurement re-runs whenever a photo is added
  * OR its (asynchronously-resolved) private-safe URL first appears.

package/src/ui/index.ts

@@ -15,10 +15,11 @@
 /// <reference path="../types/react-native-classname.d.ts" />
 /// <reference path="../types/react-native-web-style.d.ts" />
 
-import { registerScreens } from './navigation/routes';
-import { screenComponents } from './navigation/screenComponents';
-
-registerScreens(screenComponents);
+// No screen is imported here. `OxyProvider` loads the account screens as their
+// own chunk at startup (`loadScreens`), and a surface opened before that chunk
+// arrives waits for it. A static `screenComponents` import here put all of them
+// in the first-paint bundle of every app that imports anything from `ui`
+// (Allo: +340 KB gzipped).
 
 // Components
 export { default as OxyProvider } from './components/OxyProvider';

package/src/ui/navigation/accountDialogManager.ts

@@ -46,11 +46,11 @@ export interface AccountDialogControls {
 
 /**
  * Optional consumer overrides for account-dialog actions. `ProfileButton` (and
- * similar hosts) register these while mounted so inbox/accounts can route
- * "Manage" / "Add account" to app-local navigation instead of the SDK default.
+ * similar hosts) register these while mounted so an app can route "Add account"
+ * and "Profile" to app-local navigation, and add its own menu entries. "Manage
+ * your Oxy account" is not overridable: it always opens the SDK's ManageAccount.
  */
 export interface AccountDialogConsumerHooks {
-  onNavigateManage?: () => void;
   onAddAccount?: () => void;
   onNavigateProfile?: () => void;
   menuItems?: readonly AccountDialogMenuItem[];
@@ -77,7 +77,7 @@ export function registerAccountDialogControls(next: AccountDialogControls): () =
   };
 }
 
-/** Register app-local manage/add/profile handlers for the account dialog. */
+/** Register app-local add/profile handlers and menu entries for the account dialog. */
 export function registerAccountDialogConsumerHooks(
   next: AccountDialogConsumerHooks | null,
 ): () => void {
@@ -95,7 +95,7 @@ export function getAccountDialogConsumerHooks(): AccountDialogConsumerHooks | nu
   return consumerHooks;
 }
 
-/** Subscribe to consumer-hook registration changes (menu items, manage/add overrides). */
+/** Subscribe to consumer-hook registration changes (menu items, add/profile overrides). */
 export function subscribeToAccountDialogConsumerHooks(listener: () => void): () => void {
   consumerHookListeners.add(listener);
   return () => {

package/src/ui/navigation/surfaces.ts

@@ -167,8 +167,8 @@ function presentInternal<K extends RouteName>(
       bloomOpts,
     );
 
-  // Never mount a partially-loaded frame. Full UI entries take the sync path;
-  // the lean entry's startup preload normally finishes before the first press.
+  // Never mount a partially-loaded frame. The root entry takes the sync path;
+  // `ui` and `ui/client` preload at provider startup, normally before the first press.
   const result = screensReady()
     ? open()
     : loadScreens().then(() => {

package/src/ui/one-video.tsx

@@ -1,6 +1,7 @@
 /** Optional video entry: never re-export from services or its UI root barrels. */
 import { useEffect } from 'react';
-import { AppState, Image, StyleSheet, View } from 'react-native';
+import { AppState, StyleSheet, View } from 'react-native';
+import { Image as ExpoImage } from 'expo-image';
 import { useVideoPlayer } from 'expo-video';
 import { VideoView } from '@oxy.so/bloom/video-view';
 import { useReducedMotion } from 'react-native-reanimated';
@@ -29,7 +30,7 @@ export function OxyOneVideo() {
       accessibilityElementsHidden
       importantForAccessibility="no-hide-descendants"
     >
-      <Image source={floralPoster} resizeMode="cover" style={StyleSheet.absoluteFill} />
+      <ExpoImage source={floralPoster} contentFit="cover" style={StyleSheet.absoluteFill} />
       {!reducedMotion && (
         <VideoView
           player={player}

package/src/ui/screens/AvatarCropScreen.tsx

@@ -33,7 +33,7 @@ import { RiSubtractLine } from '@oxy.so/bloom/icons/RiSubtractLine';
 
 import type React from 'react';
 import { useCallback, useMemo, useRef, useState } from 'react';
-import { View, StyleSheet, Image, Platform, AccessibilityInfo } from 'react-native';
+import { View, StyleSheet, Platform, AccessibilityInfo } from 'react-native';
 import { Text } from '@oxy.so/bloom/typography';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
@@ -46,6 +46,7 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { useQuery, keepPreviousData } from '@tanstack/react-query';
+import { Image as ExpoImage } from 'expo-image';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { logger } from '@oxy.so/core';
 import { useOxy } from '../context/oxyRuntimeContext';
@@ -54,6 +55,7 @@ import { useReduceMotion } from '../hooks/useReduceMotion';
 import { useSurfaceHeader, type SurfaceHeaderContent } from '../hooks/useSurfaceHeader';
 import { toast } from '@oxy.so/bloom/toast';
 import type { BaseScreenProps } from '../types/navigation';
+import { getImageSize } from '../utils/imageSize';
 
 /** Component name used in `logger` context for filtered diagnostics. */
 const LOG_COMPONENT = 'AvatarCropScreen';
@@ -138,25 +140,24 @@ interface ImageNaturalSize {
 }
 
 /**
- * Measure an image's intrinsic size via `Image.getSize`, wrapped as a Promise so
- * it can be a React Query `queryFn` (no component state / effects). Rejects on a
- * platform failure or degenerate dimensions so the query surfaces `isError`.
- * Mirrors the `measurePhotoDimensions` helper the photo grid uses.
+ * Measure an image's intrinsic size via `getImageSize` (expo-image on a
+ * device), as a Promise so it can be a React Query `queryFn` (no component
+ * state / effects). Rejects on a load failure or degenerate dimensions so the
+ * query surfaces `isError`. Mirrors the `measurePhotoDimensions` helper the
+ * photo grid uses.
  */
-function measureImageSize(uri: string): Promise<ImageNaturalSize> {
-  return new Promise<ImageNaturalSize>((resolve, reject) => {
-    Image.getSize(
-      uri,
-      (width, height) => {
-        if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
-          reject(new Error('Image reported invalid dimensions'));
-          return;
-        }
-        resolve({ width, height });
-      },
-      () => reject(new Error('Image measurement failed')),
-    );
-  });
+async function measureImageSize(uri: string): Promise<ImageNaturalSize> {
+  let size: ImageNaturalSize;
+  try {
+    size = await getImageSize(uri);
+  } catch {
+    throw new Error('Image measurement failed');
+  }
+  const { width, height } = size;
+  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+    throw new Error('Image reported invalid dimensions');
+  }
+  return { width, height };
 }
 
 /**
@@ -381,7 +382,7 @@ const AvatarCropScreen: React.FC<AvatarCropScreenProps> = ({
 
   // Natural size of the source image. Known up front (device/camera sources pass
   // the dimensions) OR measured lazily from `effectiveUri` via a React Query read
-  // (no effect) — the same Image.getSize→useQuery pattern the photo grid uses.
+  // (no effect) — the same getImageSize→useQuery pattern the photo grid uses.
   const hasPassedDimensions = !!(sourceWidth && sourceHeight);
   const measureQuery = useQuery({
     queryKey: ['avatarCropMeasure', effectiveUri],
@@ -1047,11 +1048,15 @@ const AvatarCropScreen: React.FC<AvatarCropScreenProps> = ({
           <GestureDetector gesture={composedGesture}>
             <View style={styles.viewport}>
               {baseFit && effectiveUri ? (
-                <Animated.Image
-                  source={{ uri: effectiveUri }}
-                  style={[styles.image, imageAnimatedStyle]}
-                  resizeMode="cover"
-                />
+                // Reanimated moves the box; expo-image draws the pixels, so the
+                // crop stage never needs react-native's GIF/WebP decoders.
+                <Animated.View style={[styles.image, imageAnimatedStyle]}>
+                  <ExpoImage
+                    source={{ uri: effectiveUri }}
+                    style={StyleSheet.absoluteFill}
+                    contentFit="cover"
+                  />
+                </Animated.View>
               ) : (
                 <SpinnerIcon color="#ffffff" />
               )}

package/src/ui/screens/EditProfileFieldScreen.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useCallback, useMemo } from 'react';
-import { View, Image, StyleSheet, type TextInputProps } from 'react-native';
+import { View, StyleSheet, type TextInputProps } from 'react-native';
+import { Image as ExpoImage } from 'expo-image';
 import Ionicons from '../icons/Ionicons';
 import type { BaseScreenProps } from '../types/navigation';
 import { useTheme } from '@oxy.so/bloom/theme';
@@ -657,7 +658,11 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
                 description={fieldType === 'links' ? String(item.url) : undefined}
                 icon={
                   fieldType === 'links' && item.image ? (
-                    <Image source={{ uri: item.image }} style={styles.linkImage} />
+                    <ExpoImage
+                      source={{ uri: item.image }}
+                      style={styles.linkImage}
+                      contentFit="cover"
+                    />
                   ) : undefined
                 }
                 rightElement={

package/src/ui/screens/OxyOneScreen.tsx

@@ -1,5 +1,6 @@
 import { useContext, useState } from 'react';
-import { Image, Linking, View } from 'react-native';
+import { Linking, View } from 'react-native';
+import { Image as ExpoImage } from 'expo-image';
 import { SubscriptionPlans } from '@oxy.so/bloom/subscription-plans';
 import {
   SegmentedControl,
@@ -174,9 +175,9 @@ export default function OxyOneScreen() {
       productName="Oxy One"
       heroBackground={
         oxyOneArtwork ?? (
-          <Image
+          <ExpoImage
             source={floralPoster}
-            resizeMode="cover"
+            contentFit="cover"
             style={{ width: '100%', height: '100%' }}
           />
         )

package/src/ui/utils/__tests__/imageSize.test.ts

@@ -0,0 +1,61 @@
+/**
+ * Both forks of `getImageSize` keep react-native's `Image.getSize` contract —
+ * the PIXEL size on success, a rejection when the image cannot load — so the
+ * grid, the viewer and the crop stage size their boxes the same on every
+ * platform.
+ */
+const loadAsync = jest.fn();
+jest.mock('expo-image', () => ({ Image: { loadAsync } }), { virtual: true });
+
+const getSize = jest.fn();
+jest.mock('react-native', () => ({ Image: { getSize } }));
+
+import { getImageSize as getNativeImageSize } from '../imageSize.native';
+import { getImageSize as getWebImageSize } from '../imageSize';
+
+beforeEach(() => {
+  loadAsync.mockReset();
+  getSize.mockReset();
+});
+
+describe('getImageSize (native: expo-image)', () => {
+  it('reports pixels and releases the decoded image', async () => {
+    const release = jest.fn();
+    loadAsync.mockResolvedValue({ width: 200, height: 150, scale: 2, release });
+
+    await expect(getNativeImageSize('https://cdn.example/a.gif')).resolves.toEqual({
+      width: 400,
+      height: 300,
+    });
+    expect(loadAsync).toHaveBeenCalledWith('https://cdn.example/a.gif');
+    expect(release).toHaveBeenCalledTimes(1);
+  });
+
+  it('treats a missing scale as 1', async () => {
+    loadAsync.mockResolvedValue({ width: 64, height: 32, scale: 0, release: jest.fn() });
+    await expect(getNativeImageSize('file:///a.webp')).resolves.toEqual({ width: 64, height: 32 });
+  });
+
+  it('rejects when the image cannot load', async () => {
+    loadAsync.mockRejectedValue(new Error('decode failed'));
+    await expect(getNativeImageSize('https://cdn.example/broken')).rejects.toThrow('decode failed');
+  });
+});
+
+describe('getImageSize (web: react-native-web getSize)', () => {
+  it('resolves what getSize reports', async () => {
+    getSize.mockImplementation((_uri: string, ok: (w: number, h: number) => void) => ok(640, 480));
+    await expect(getWebImageSize('https://cdn.example/a.png')).resolves.toEqual({
+      width: 640,
+      height: 480,
+    });
+  });
+
+  it('rejects through the failure callback', async () => {
+    const failure = new Error('404');
+    getSize.mockImplementation((_uri: string, _ok: unknown, fail: (error: unknown) => void) =>
+      fail(failure),
+    );
+    await expect(getWebImageSize('https://cdn.example/missing')).rejects.toBe(failure);
+  });
+});

package/src/ui/utils/imageSize.native.ts

@@ -0,0 +1,26 @@
+/**
+ * Native fork of `imageSize.ts`: measures through expo-image (Glide on
+ * Android, SDWebImage on iOS), the same pipeline and cache `ExpoImage` draws
+ * from. react-native's `Image.getSize` decodes through Fresco, whose GIF and
+ * animated-WebP support an Android app ships only while `expo-build-properties`
+ * keeps `gifEnabled`/`webpEnabled` on — so this file must never name
+ * react-native's `Image` (`__tests__/packaging/rnImageBoundary.test.ts`).
+ */
+import { Image as ExpoImage } from 'expo-image';
+
+export interface ImageSize {
+  width: number;
+  height: number;
+}
+
+export async function getImageSize(uri: string): Promise<ImageSize> {
+  const ref = await ExpoImage.loadAsync(uri);
+  try {
+    // `width`/`height` are logical; times `scale` is the pixel size
+    // `Image.getSize` reports, which the callers' layouts were written for.
+    const scale = ref.scale > 0 ? ref.scale : 1;
+    return { width: ref.width * scale, height: ref.height * scale };
+  } finally {
+    ref.release();
+  }
+}

package/src/ui/utils/imageSize.ts

@@ -0,0 +1,26 @@
+/**
+ * Intrinsic pixel size of an image the SDK is about to draw, for the layouts
+ * that size a box from it (the justified photo grid, the file viewer, the
+ * avatar crop stage). Resolves `{ width, height }`; rejects when the image
+ * cannot be loaded, exactly as react-native's `Image.getSize` reports through
+ * its failure callback.
+ *
+ * This is the web (and `tsc`/Vite) fork: react-native-web's `getSize` is an
+ * `<img>` probe, which needs no CORS headers — expo-image's web `loadAsync`
+ * uses `fetch`, which does. The native fork (`imageSize.native.ts`) measures
+ * through expo-image, so no SDK image depends on react-native's GIF/WebP
+ * decoders on Android and an app may turn them off
+ * (`expo-build-properties` `android.gifEnabled`/`webpEnabled: false`).
+ */
+import { Image } from 'react-native';
+
+export interface ImageSize {
+  width: number;
+  height: number;
+}
+
+export function getImageSize(uri: string): Promise<ImageSize> {
+  return new Promise<ImageSize>((resolve, reject) => {
+    Image.getSize(uri, (width, height) => resolve({ width, height }), reject);
+  });
+}