@oxy.so/services 12.1.0 → 12.2.0

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/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);
+  });
+}