@repzo/widget-react-native 1.2.1 → 1.3.0

package/src/audio/native-player.ts

@@ -0,0 +1,106 @@
+/**
+ * The SDK's own voice-note player (`ios/` and `android/`), on the system
+ * players: AVPlayer on iOS, MediaPlayer on Android. It's an Expo module, so it
+ * exists in apps with Expo modules after a native build; in Expo Go, bare
+ * React Native apps and an over-the-air update to an app built with an older
+ * SDK it's missing, and `src/audio/voice.ts` falls back to `expo-audio` or the
+ * file row.
+ */
+
+import { useEffect, useMemo, useState } from 'react';
+
+interface NativeAudioModule {
+  create(id: string, url: string): Promise<void>;
+  play(id: string): Promise<void>;
+  pause(id: string): Promise<void>;
+  seekTo(id: string, seconds: number): Promise<void>;
+  setRate(id: string, rate: number): Promise<void>;
+  release(id: string): Promise<void>;
+  addListener?(event: 'onStatus', listener: (status: NativeVoiceStatus) => void): { remove(): void };
+}
+
+/** What the player reports; the same fields `expo-audio`'s status has. */
+export interface NativeVoiceStatus {
+  id: string;
+  currentTime: number;
+  duration: number;
+  playing: boolean;
+  isLoaded: boolean;
+  isBuffering: boolean;
+  didJustFinish: boolean;
+  error?: string | null;
+}
+
+function loadNativeAudio(): NativeAudioModule | null {
+  let mod: any = null;
+  try {
+    mod = require('expo-modules-core').requireOptionalNativeModule('RepzoWidgetAudio');
+  } catch {
+    mod = null;
+  }
+  // Without the JS package (an unusual setup), the module can still be installed.
+  mod = mod ?? (globalThis as any).expo?.modules?.RepzoWidgetAudio ?? null;
+  return mod && typeof mod.create === 'function' && typeof mod.play === 'function' ? mod : null;
+}
+
+const nativeAudio = loadNativeAudio();
+
+/** Subscribes to every player's status; null when events can't be received. */
+function addStatusListener(listener: (status: NativeVoiceStatus) => void): { remove(): void } | null {
+  if (!nativeAudio) return null;
+  try {
+    if (typeof nativeAudio.addListener === 'function') return nativeAudio.addListener('onStatus', listener);
+    // Expo SDK 51 and older: native modules aren't event emitters themselves.
+    const { EventEmitter } = require('expo-modules-core');
+    return new EventEmitter(nativeAudio).addListener('onStatus', listener);
+  } catch {
+    return null;
+  }
+}
+
+/** Whether the app has the SDK's own player. */
+export function hasNativeVoicePlayer(): boolean {
+  return nativeAudio != null;
+}
+
+let nextPlayerId = 0;
+
+const ignore = () => {};
+
+/**
+ * A player for one note, released when the component goes away. Shaped like
+ * `expo-audio`'s `useAudioPlayer` + `useAudioPlayerStatus`, so the voice note
+ * drives either the same way.
+ */
+export function useNativeVoicePlayer(url: string) {
+  const id = useMemo(() => `repzo-voice-${(nextPlayerId += 1)}`, []);
+  const [status, setStatus] = useState<Partial<NativeVoiceStatus>>({ isLoaded: false });
+
+  useEffect(() => {
+    const audio = nativeAudio!;
+    const subscription = addStatusListener((next) => {
+      if (next?.id === id) setStatus(next);
+    });
+    if (!subscription) {
+      setStatus({ isLoaded: false, error: 'Voice notes need a newer Expo SDK' });
+      return undefined;
+    }
+    audio.create(id, url).catch((error: unknown) => setStatus({ isLoaded: false, error: String(error) }));
+    return () => {
+      subscription.remove();
+      audio.release(id).catch(ignore);
+    };
+  }, [id, url]);
+
+  const player = useMemo(
+    () => ({
+      play: () => void nativeAudio!.play(id).catch(ignore),
+      pause: () => void nativeAudio!.pause(id).catch(ignore),
+      seekTo: (seconds: number) => nativeAudio!.seekTo(id, seconds).catch(ignore),
+      setPlaybackRate: (rate: number) => void nativeAudio!.setRate(id, rate).catch(ignore),
+    }),
+    [id]
+  );
+
+  return { player, status };
+}

package/src/audio/voice.ts

@@ -0,0 +1,127 @@
+/**
+ * Voice notes (and any audio file) play inside the chat with the SDK's own
+ * native player (`src/audio/native-player.ts`). Where that isn't built into
+ * the app (Expo Go, bare React Native, an app built with SDK 1.2.2 or older),
+ * they play with the host app's `expo-audio` if it has one; otherwise they
+ * stay a file row that opens in the browser.
+ *
+ * Resolved once at module load, like the attachment pickers: each `require` is
+ * static so Metro can see it, and with `allowOptionalDependencies` (see
+ * metro.js) an uninstalled one bundles as a require that throws, which the
+ * `try` around it catches.
+ */
+
+import { hasNativeVoicePlayer, useNativeVoicePlayer } from './native-player';
+
+let expoAudio: any = null;
+try {
+  const mod = require('expo-audio');
+  if (typeof mod?.useAudioPlayer === 'function' && typeof mod?.useAudioPlayerStatus === 'function') {
+    expoAudio = mod;
+  }
+} catch {
+  expoAudio = null;
+}
+
+// expo-audio 1.x (Expo SDK 54+) takes `{ updateInterval }`; 0.x (SDK 53) took
+// the interval itself. Passing the wrong shape would break the player.
+let takesOptionsObject = true;
+try {
+  const version: unknown = require('expo-audio/package.json')?.version;
+  if (typeof version === 'string') takesOptionsObject = Number(version.split('.')[0]) >= 1;
+} catch {
+  takesOptionsObject = true;
+}
+
+/** How often the playhead moves while a note plays. */
+const UPDATE_INTERVAL_MS = 100;
+
+/** Which player voice notes use in this app, or null when audio stays a file row. */
+const backend: 'native' | 'expo-audio' | null = hasNativeVoicePlayer() ? 'native' : expoAudio ? 'expo-audio' : null;
+
+export function voicePlaybackBackend(): 'native' | 'expo-audio' | null {
+  return backend;
+}
+
+/** The second argument to `useAudioPlayer` for the installed expo-audio. */
+export function audioPlayerOptions(): unknown {
+  return takesOptionsObject ? { updateInterval: UPDATE_INTERVAL_MS } : UPDATE_INTERVAL_MS;
+}
+
+/** expo-audio's player for a note, on the same terms as the native one. */
+function useExpoAudioPlayer(url: string): { player: any; status: any } {
+  const player = expoAudio.useAudioPlayer({ uri: url }, audioPlayerOptions());
+  const status = expoAudio.useAudioPlayerStatus(player);
+  return { player, status };
+}
+
+/**
+ * The player for one note: `play()`, `pause()`, `seekTo(seconds)`,
+ * `setPlaybackRate(rate)`, and its status (`currentTime`, `duration`,
+ * `playing`, `isLoaded`, `isBuffering`, `didJustFinish`, `error`). Only use it
+ * when `voicePlaybackBackend()` isn't null. Picked once, since the backend
+ * never changes while the app runs.
+ */
+export const useVoicePlayer: (url: string) => { player: any; status: any } =
+  backend === 'native' ? useNativeVoicePlayer : useExpoAudioPlayer;
+
+/** Audio the chat can play in place: an `audio/*` attachment with a web address. */
+export function isPlayableAudio(contentType: string | null | undefined, url: string | null | undefined): boolean {
+  return backend != null && (contentType ?? '').toLowerCase().startsWith('audio/') && /^https?:\/\//i.test(url ?? '');
+}
+
+// ─── One note at a time ─────────────────────────────────────────────────────
+// Each bubble owns its own player, so starting a second note would otherwise
+// talk over the first.
+
+let playing: { pause: () => void } | null = null;
+
+/**
+ * Called as a note starts: pauses whichever note was playing and returns a
+ * release for this one's claim (call it when the note goes away).
+ */
+export function claimVoicePlayback(pause: () => void): () => void {
+  const claim = { pause };
+  const previous = playing;
+  playing = claim;
+  if (previous) {
+    try {
+      previous.pause();
+    } catch {
+      // Its player was released with its bubble: nothing is playing.
+    }
+  }
+  return () => {
+    if (playing === claim) playing = null;
+  };
+}
+
+// ─── Waveform ───────────────────────────────────────────────────────────────
+
+/**
+ * Bar heights (0.15–1) for a note's waveform. Workstation doesn't send the
+ * recorded loudness to visitors, so the pattern is made up — seeded from the
+ * attachment, so the same note always draws the same bars.
+ */
+export function voiceWaveformLevels(seed: string, count: number): number[] {
+  let h = 2166136261;
+  for (let i = 0; i < seed.length; i += 1) {
+    h ^= seed.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  const levels: number[] = [];
+  for (let i = 0; i < count; i += 1) {
+    h ^= h << 13;
+    h ^= h >>> 17;
+    h ^= h << 5;
+    const n = ((h >>> 0) % 1000) / 1000;
+    levels.push(0.15 + Math.pow(n, 0.85) * 0.85);
+  }
+  return levels;
+}
+
+/** `m:ss` for a playback position or length. */
+export function formatVoiceClock(seconds: number): string {
+  const s = Math.max(0, Math.floor(Number.isFinite(seconds) ? seconds : 0));
+  return `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, '0')}`;
+}

package/src/i18n.ts

@@ -70,6 +70,12 @@ export const DEFAULT_LABELS = {
   attachmentsTooLargeTogether:
     'Attachments are too large to send together — send some in another message',
   attachmentFailed: "Couldn't attach that file",
+  // A file in a message; tapping opens it. `{name}` is the file name.
+  openAttachment: 'Open {name}',
+  // Voice notes played in the chat (with expo-audio).
+  voicePlay: 'Play voice message',
+  voicePause: 'Pause voice message',
+  voiceSpeed: 'Playback speed',
   // Full-screen image viewer.
   imageLoadFailed: "Couldn't load this image",
   openImageExternally: 'Open image',

package/src/locales.ts

@@ -29,6 +29,10 @@ const ar: LabelMap = {
   attachmentTooMany: 'يمكنك إرفاق {count} ملفات كحد أقصى',
   attachmentsTooLargeTogether: 'المرفقات كبيرة جدًا لإرسالها معًا — أرسل بعضها في رسالة أخرى',
   attachmentFailed: 'تعذر إرفاق هذا الملف',
+  openAttachment: 'فتح {name}',
+  voicePlay: 'تشغيل الرسالة الصوتية',
+  voicePause: 'إيقاف الرسالة الصوتية مؤقتًا',
+  voiceSpeed: 'سرعة التشغيل',
   imageLoadFailed: 'تعذر تحميل هذه الصورة',
   openImageExternally: 'فتح الصورة',
   cameraPermissionDenied: 'اسمح بالوصول إلى الكاميرا من الإعدادات لالتقاط صورة',

package/src/state/use-widget-state.ts

@@ -4,7 +4,7 @@
  * component is mounted; this hook only subscribes to it.
  */
 
-import { useSyncExternalStore } from 'react';
+import { useRef, useSyncExternalStore } from 'react';
 
 import { controller } from '../controller';
 import type { WidgetState } from '../types';
@@ -18,3 +18,32 @@ export function useWidgetState(): WidgetState {
 export function useWidgetStore(): WidgetStore {
   return controller.store;
 }
+
+/**
+ * A slice of the state that re-renders only when the slice changes (by
+ * `isEqual`) — for UI that lives on the host's own screens, like the launcher,
+ * which shouldn't redraw on every message or typing event. Internal.
+ */
+export function useWidgetSelector<T>(
+  select: (state: WidgetState) => T,
+  isEqual: (previous: T, next: T) => boolean
+): T {
+  const store = controller.store;
+  const last = useRef<{ state: WidgetState; value: T } | null>(null);
+  const getSnapshot = () => {
+    const state = store.getState();
+    const previous = last.current;
+    if (previous && previous.state === state) return previous.value;
+    const value = select(state);
+    // Same slice from a newer state: keep the old value so React bails out.
+    last.current = { state, value: previous && isEqual(previous.value, value) ? previous.value : value };
+    return last.current.value;
+  };
+  return useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+
+/** Same keys, same values (by identity). */
+export function shallowEqual<T extends Record<string, unknown>>(previous: T, next: T): boolean {
+  const keys = Object.keys(previous);
+  return keys.length === Object.keys(next).length && keys.every((key) => Object.is(previous[key], next[key]));
+}

package/src/state/widget-store.ts

@@ -40,7 +40,7 @@ import type {
 import { setOpenUrlHandler } from '../ui/utils/safe-url';
 
 /** Sent on every init; must match `package.json` (tests/version.test.js checks). */
-const SDK_VERSION = '@repzo/widget-react-native@1.2.1';
+const SDK_VERSION = '@repzo/widget-react-native@1.3.0';
 
 /** The platform this session reports — mobile sessions get the Mobile SDKs overrides. */
 function sessionPlatform(): 'ios' | 'android' | 'web' {
@@ -67,6 +67,13 @@ const LOGOUT_REQUEST_TIMEOUT_MS = 5_000;
 const STREAM_REAUTH_MIN_INTERVAL_MS = 30_000;
 /** Live replies in the open thread advance the server read cursor, batched. */
 const MARK_READ_DEBOUNCE_MS = 1_000;
+/**
+ * Back from the background sooner than this, availability and the post are
+ * still current enough to skip re-asking. Reps hop to maps or the camera and
+ * back all day; the list and the open thread still catch up every time, since
+ * the stream was closed meanwhile.
+ */
+const FOREGROUND_REFRESH_AFTER_MS = 5 * 60_000;
 /** Live events held back while a draft's first send is creating its thread. */
 const DRAFT_EVENT_BUFFER_LIMIT = 50;
 /** How long a post stays up after a reaction, thanking them, before it goes. */
@@ -209,8 +216,18 @@ export class WidgetStore {
 
   private pendingConversationId: string | null = null;
 
+  /**
+   * The screen a thread was opened from, so its back button returns there.
+   * Null when it was opened with the messenger closed (a push, a notification
+   * card, `presentConversation`): there is nothing to go back to.
+   */
+  private chatOpenedFrom: 'home' | 'conversations' | null = null;
+
   private appStateSubscription: { remove(): void } | null = null;
 
+  /** When the app last went to the background (0: hasn't this session). */
+  private backgroundedAt = 0;
+
   private lastTypingPingAt = 0;
 
   private visitorTypingActive = false;
@@ -311,6 +328,14 @@ export class WidgetStore {
     }
     this.state = next;
 
+    // Recorded here because a thread opens from many places (home cards, the
+    // list, the Messages tab, posts) and each would otherwise have to say so.
+    const intoThread = next.view === 'chat' || next.view === 'prechat';
+    if (intoThread && previous.view !== 'chat' && previous.view !== 'prechat') {
+      this.chatOpenedFrom =
+        previous.isOpen && (previous.view === 'home' || previous.view === 'conversations') ? previous.view : null;
+    }
+
     if (next.unreadCount !== previous.unreadCount) {
       this.events.emit(RepzoWidgetEvents.UnreadCountDidChange, { count: next.unreadCount });
     }
@@ -914,10 +939,14 @@ export class WidgetStore {
 
   private watchAppState() {
     if (this.appStateSubscription) return;
+    // Booted while already in the background (a push woke the app): coming
+    // to the foreground is a return from the background too.
+    if (AppState.currentState === 'background') this.backgroundedAt = Date.now();
     this.appStateSubscription = AppState.addEventListener('change', (status: AppStateStatus) => {
       if (status === 'active') {
         void this.resumeFromBackground();
       } else if (status === 'background') {
+        this.backgroundedAt = Date.now();
         this.realtime.close();
       }
     });
@@ -931,6 +960,12 @@ export class WidgetStore {
       if (this.state.error) await this.retry();
       return;
     }
+    // Only the background closes the stream. Back from merely inactive (a
+    // system sheet, Face ID, the notification shade) it never stopped, so
+    // there is nothing to catch up on.
+    if (!this.backgroundedAt) return;
+    const awayMs = Date.now() - this.backgroundedAt;
+    this.backgroundedAt = 0;
     const epoch = this.epoch;
     const token = await this.client.getToken();
     if (!token || this.isStale(epoch)) return;
@@ -938,6 +973,7 @@ export class WidgetStore {
     // The stream had a gap: refresh the list so unread/snippets are correct,
     // and the thread on screen so replies sent meanwhile show up.
     await Promise.all([this.refreshConversations(), this.refreshOpenThread()]);
+    if (awayMs < FOREGROUND_REFRESH_AFTER_MS) return;
     await this.refreshConfig();
     // A post may have gone live (or ended) while the app was away.
     if (!this.isStale(epoch)) this.loadPost();
@@ -1503,6 +1539,14 @@ export class WidgetStore {
     });
   }
 
+  /**
+   * The thread's back button: the screen it was opened from, or the
+   * conversation list when it was opened from outside the messenger.
+   */
+  leaveConversation(): void {
+    this.setView(this.chatOpenedFrom ?? (this.state.activeTab === 'messages' ? 'conversations' : 'home'));
+  }
+
   setActiveTab(tab: WidgetSpaceType): void {
     if (tab === 'home') {
       this.setState({ activeTab: 'home', view: 'home' });

package/src/ui/WidgetProvider.tsx

@@ -182,6 +182,7 @@ export function RepzoWidgetProvider({
       emptyConversation: labels.emptyConversation,
       messagePlaceholder: labels.messagePlaceholder,
       failedToSend: labels.failedToSend,
+      openAttachment: labels.openAttachment,
       thinking: labels.thinking,
       team: labels.team,
       statusOnline: labels.homeStatusOnline,
@@ -224,6 +225,11 @@ export function RepzoWidgetProvider({
         loadFailed: labels.imageLoadFailed,
         openExternally: labels.openImageExternally,
       },
+      voice: {
+        play: labels.voicePlay,
+        pause: labels.voicePause,
+        speed: labels.voiceSpeed,
+      },
     }),
     [labels, blockLabels, attachLabels]
   );
@@ -326,9 +332,7 @@ export function RepzoWidgetProvider({
     [store]
   );
 
-  const handleBack = useCallback(() => {
-    store.setView(state.activeTab === 'messages' ? 'conversations' : 'home');
-  }, [state.activeTab, store]);
+  const handleBack = useCallback(() => store.leaveConversation(), [store]);
 
   const handleStartConversation = useCallback(() => {
     if (!theme.allowNewConversations) return;

package/src/ui/components/FileCard.tsx

@@ -0,0 +1,111 @@
+/**
+ * An attachment that opens outside the chat (PDF, video, sheet…), drawn as a
+ * card that reads as tappable: a tile with the file's type, its name, the
+ * type and size under it, and an arrow — instead of a bare name in a box.
+ */
+
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { formatBytes } from '../../attachments/pickers';
+import { ChevronIcon, PlayIcon } from './icons';
+import { fontSize, palette, radius, spacing, withAlpha } from '../styles/theme';
+import { forwardDirection, START_ALIGN } from '../utils/rtl';
+
+/** `PDF`, `MP4`, `XLSX` — from the name, else the MIME subtype; at most 4 letters. */
+export function fileTypeLabel(name: string, contentType: string | null | undefined): string {
+  const fromName = /\.([a-z0-9]{1,8})$/i.exec(name.trim())?.[1];
+  const fromType = (contentType ?? '').split('/')[1]?.split(/[;+.-]/)[0];
+  const label = (fromName || fromType || 'file').toUpperCase();
+  return label.length > 4 ? label.slice(0, 4) : label;
+}
+
+export function FileCard({
+  name,
+  contentType,
+  size,
+  color,
+  onBrandBubble,
+  openLabel,
+  onPress,
+}: {
+  name: string;
+  contentType: string;
+  size: number;
+  /** The workspace color. */
+  color: string;
+  /** In a visitor bubble, which is filled with `color`: the card turns white-on-color. */
+  onBrandBubble: boolean;
+  /** Screen-reader label, e.g. "Open report.pdf". */
+  openLabel: string;
+  /** Missing while there's nothing to open yet (an unsent file). */
+  onPress?: () => void;
+}) {
+  const type = fileTypeLabel(name, contentType);
+  const isVideo = (contentType ?? '').toLowerCase().startsWith('video/');
+  const meta = size > 0 ? `${type} · ${formatBytes(size)}` : type;
+  const accent = onBrandBubble ? palette.white : color;
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={!onPress}
+      accessibilityRole="button"
+      accessibilityLabel={openLabel}
+      style={({ pressed }) => [
+        styles.card,
+        onBrandBubble
+          ? { backgroundColor: withAlpha(palette.white, 0.16), borderColor: withAlpha(palette.white, 0.35) }
+          : { backgroundColor: palette.white, borderColor: palette.border },
+        !onPress && styles.unavailable,
+        pressed && styles.pressed,
+      ]}>
+      <View style={[styles.tile, { backgroundColor: onBrandBubble ? palette.white : withAlpha(color, 0.12) }]}>
+        {isVideo ? (
+          <PlayIcon size={16} color={color} />
+        ) : (
+          <Text style={[styles.tileLabel, { color }]} numberOfLines={1}>
+            {type}
+          </Text>
+        )}
+      </View>
+
+      <View style={styles.text}>
+        <Text style={[styles.name, { color: onBrandBubble ? palette.white : palette.ink }]} numberOfLines={2}>
+          {name}
+        </Text>
+        <Text style={[styles.meta, { color: onBrandBubble ? withAlpha(palette.white, 0.8) : palette.textMuted }]}>
+          {meta}
+        </Text>
+      </View>
+
+      {onPress ? <ChevronIcon size={14} color={accent} direction={forwardDirection()} /> : null}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm + 2,
+    minWidth: 220,
+    paddingVertical: spacing.sm + 1,
+    paddingHorizontal: spacing.sm + 2,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: radius.lg,
+  },
+  pressed: { opacity: 0.7 },
+  unavailable: { opacity: 0.6 },
+  tile: {
+    width: 40,
+    height: 40,
+    borderRadius: radius.sm,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  tileLabel: { fontSize: 11, fontWeight: '800', letterSpacing: 0.3 },
+  text: { flex: 1, minWidth: 0, gap: 2 },
+  // A Latin file name in an Arabic chat still lines up with the card's start.
+  name: { fontSize: fontSize.meta + 1, fontWeight: '600', textAlign: START_ALIGN },
+  meta: { fontSize: fontSize.caption, textAlign: START_ALIGN },
+});

package/src/ui/components/ImageViewer.tsx

@@ -1,17 +1,15 @@
 /**
  * Full-screen viewer for image attachments, so a tap on a photo the agent sent
- * stays inside the messenger instead of bouncing to the browser. Pinch-to-zoom
- * uses the native ScrollView zoom (iOS); Android shows the image fitted.
+ * stays inside the messenger instead of bouncing to the browser. Pinch, drag
+ * and double-tap zoom work on iOS and Android (see ZoomableImage).
  */
 
 import { useState } from 'react';
 import {
   ActivityIndicator,
-  Image,
   Modal,
   Platform,
   Pressable,
-  ScrollView,
   StyleSheet,
   Text,
   View,
@@ -20,6 +18,7 @@ import {
 import { useWidgetInsets } from '../hooks/use-widget-insets';
 import { fontSize, palette, spacing } from '../styles/theme';
 import { CloseIcon } from './icons';
+import { ZoomableImage } from './ZoomableImage';
 
 export interface ImageViewerLabels {
   close: string;
@@ -52,25 +51,14 @@ export function ImageViewer({ image, labels, onClose, onOpenExternally }: ImageV
       onRequestClose={onClose}>
       <View style={styles.backdrop} accessibilityViewIsModal>
         {image ? (
-          <ScrollView
-            style={styles.fill}
-            contentContainerStyle={styles.center}
-            maximumZoomScale={4}
-            minimumZoomScale={1}
-            centerContent
-            showsHorizontalScrollIndicator={false}
-            showsVerticalScrollIndicator={false}
-            bouncesZoom>
-            <Image
-              source={{ uri: image.url }}
-              style={styles.image}
-              resizeMode="contain"
-              accessibilityLabel={image.name}
-              accessibilityIgnoresInvertColors
-              onLoad={() => setStatus({ url: image.url, state: 'ready' })}
-              onError={() => setStatus({ url: image.url, state: 'failed' })}
-            />
-          </ScrollView>
+          // Keyed by URL so the next image opens at 1×, not at the last one's zoom.
+          <ZoomableImage
+            key={image.url}
+            uri={image.url}
+            accessibilityLabel={image.name}
+            onLoad={() => setStatus({ url: image.url, state: 'ready' })}
+            onError={() => setStatus({ url: image.url, state: 'failed' })}
+          />
         ) : null}
 
         {image && state === 'loading' ? (
@@ -112,18 +100,11 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#000000',
   },
-  fill: {
-    flex: 1,
-  },
   center: {
     flexGrow: 1,
     alignItems: 'center',
     justifyContent: 'center',
   },
-  image: {
-    width: '100%',
-    height: '100%',
-  },
   header: {
     position: 'absolute',
     top: 0,

package/src/ui/components/Launcher.tsx

@@ -10,7 +10,7 @@
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import { createTranslator, DEFAULT_LABELS } from '../../i18n';
-import { useWidgetState } from '../../state/use-widget-state';
+import { shallowEqual, useWidgetSelector } from '../../state/use-widget-state';
 import { controller } from '../../controller';
 import { ChatIcon, ChevronIcon } from './icons';
 import {
@@ -37,7 +37,12 @@ export function Launcher({
   horizontalPadding,
   hidden = false,
 }: LauncherProps) {
-  const state = useWidgetState();
+  // Only what the launcher draws: it sits on the host's screens and shouldn't
+  // redraw on every message or typing event.
+  const state = useWidgetSelector(
+    ({ booted, config, isOpen, locale, unreadCount }) => ({ booted, config, isOpen, locale, unreadCount }),
+    shallowEqual
+  );
   const config = state.config;
 
   if (hidden || !state.booted || config?.showLauncher === false) return null;