@repzo/widget-react-native 1.2.1 → 1.3.0

package/src/ui/components/MessagesSkeleton.tsx

@@ -0,0 +1,92 @@
+/**
+ * Placeholder bubbles while a conversation's messages load: the shape of a
+ * thread (team on one side, visitor on the other) that gently pulses, so the
+ * screen reads as "messages are coming" instead of a line of text.
+ */
+
+import { useEffect, useState } from 'react';
+import { Animated, Easing, StyleSheet, View } from 'react-native';
+
+import { useReduceMotion } from '../hooks/use-reduce-motion';
+import { palette, radius, spacing, withAlpha } from '../styles/theme';
+import { isRTL } from '../utils/rtl';
+
+/** Who "sent" each placeholder, its width, and how many lines it holds. */
+const ROWS: { visitor: boolean; width: `${number}%`; lines: number }[] = [
+  { visitor: false, width: '62%', lines: 2 },
+  { visitor: false, width: '40%', lines: 1 },
+  { visitor: true, width: '48%', lines: 1 },
+  { visitor: false, width: '70%', lines: 3 },
+  { visitor: true, width: '56%', lines: 2 },
+  { visitor: false, width: '34%', lines: 1 },
+];
+
+const LINE_HEIGHT = 20;
+const PULSE_MS = 900;
+
+export function MessagesSkeleton({ color, label }: { color: string; label: string }) {
+  const reduceMotion = useReduceMotion();
+  const [opacity] = useState(() => new Animated.Value(1));
+  const rtl = isRTL();
+
+  useEffect(() => {
+    // `null` (not known yet) holds still too, so the bubbles never jump.
+    if (reduceMotion !== false) return undefined;
+    const pulse = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: 0.45,
+          duration: PULSE_MS,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: PULSE_MS,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ])
+    );
+    pulse.start();
+    return () => pulse.stop();
+  }, [opacity, reduceMotion]);
+
+  return (
+    <Animated.View
+      style={[styles.root, { opacity }]}
+      accessible
+      accessibilityRole="progressbar"
+      accessibilityLabel={label}
+      accessibilityState={{ busy: true }}>
+      {ROWS.map((row, i) => (
+        <View key={i} style={row.visitor ? styles.rowVisitor : styles.rowAgent}>
+          <View
+            style={[
+              styles.bubble,
+              row.visitor
+                ? [styles.bubbleVisitor, rtl && styles.bubbleVisitorRTL, { backgroundColor: withAlpha(color, 0.16) }]
+                : [styles.bubbleAgent, rtl && styles.bubbleAgentRTL],
+              { width: row.width, height: row.lines * LINE_HEIGHT + spacing.sm * 2 + 4 },
+            ]}
+          />
+        </View>
+      ))}
+    </Animated.View>
+  );
+}
+
+// The same corners as real bubbles, so the thread doesn't reshape when it loads.
+const BUBBLE_RADIUS = radius.lg + 4;
+const TAIL_RADIUS = 4;
+
+const styles = StyleSheet.create({
+  root: { gap: spacing.sm },
+  rowAgent: { alignItems: 'flex-start' },
+  rowVisitor: { alignItems: 'flex-end' },
+  bubble: { borderRadius: BUBBLE_RADIUS },
+  bubbleAgent: { backgroundColor: palette.surfaceAlt, borderBottomLeftRadius: TAIL_RADIUS },
+  bubbleAgentRTL: { borderBottomLeftRadius: BUBBLE_RADIUS, borderBottomRightRadius: TAIL_RADIUS },
+  bubbleVisitor: { borderBottomRightRadius: TAIL_RADIUS },
+  bubbleVisitorRTL: { borderBottomRightRadius: BUBBLE_RADIUS, borderBottomLeftRadius: TAIL_RADIUS },
+});

package/src/ui/components/VoiceNote.tsx

@@ -0,0 +1,355 @@
+/**
+ * A voice note (or any audio attachment) played inside the chat, laid out the
+ * way messaging apps do it: a play button beside a waveform the visitor can
+ * tap or drag to jump through the note, the time under it, and a speed chip
+ * once the note has been started. Only rendered when the app can play audio
+ * (see `src/audio/voice.ts`); otherwise audio stays a file row.
+ */
+
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import {
+  ActivityIndicator,
+  PanResponder,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type GestureResponderHandlers,
+  type LayoutChangeEvent,
+} from 'react-native';
+
+import { claimVoicePlayback, formatVoiceClock, useVoicePlayer, voiceWaveformLevels } from '../../audio/voice';
+import { PauseIcon, PlayIcon } from './icons';
+import { fontSize, palette, withAlpha } from '../styles/theme';
+
+export interface VoiceNoteLabels {
+  play: string;
+  pause: string;
+  speed: string;
+}
+
+interface VoiceNoteProps {
+  url: string;
+  /** Keeps the made-up waveform the same for this note on every render. */
+  seed: string;
+  /** The workspace color. */
+  color: string;
+  /** In a visitor bubble, which is filled with `color`: the player turns white. */
+  onBrandBubble: boolean;
+  labels: VoiceNoteLabels;
+  /** The note can't be played (expired link, unsupported format). */
+  onError: () => void;
+}
+
+const BAR_COUNT = 32;
+const BAR_WIDTH = 3;
+const BAR_MIN_HEIGHT = 4;
+const BAR_MAX_HEIGHT = 24;
+const BUTTON_SIZE = 36;
+const KNOB_SIZE = 12;
+const SPEEDS = [1, 1.5, 2] as const;
+
+/**
+ * The player is only created once the visitor taps play. The whole thread
+ * renders at once, so a player per note would download every note in the
+ * conversation as soon as the chat opened.
+ */
+export function VoiceNote(props: VoiceNoteProps) {
+  const [started, setStarted] = useState(false);
+  if (started) return <ActiveVoiceNote {...props} />;
+  return (
+    <VoiceNoteLayout
+      {...props}
+      playing={false}
+      loading={false}
+      progress={0}
+      time={null}
+      onToggle={() => setStarted(true)}
+    />
+  );
+}
+
+/** A note that has been started: owns its player and plays on mount. */
+function ActiveVoiceNote(props: VoiceNoteProps) {
+  const { url, onError } = props;
+  const { player, status } = useVoicePlayer(url);
+  const [speedIndex, setSpeedIndex] = useState(0);
+  const [scrub, setScrub] = useState<number | null>(null);
+  const [trackWidth, setTrackWidth] = useState(0);
+  // Whether the visitor asked for playback, so a note still loading shows a
+  // spinner, and one they paused while it loaded doesn't.
+  const [wantsPlay, setWantsPlay] = useState(true);
+  // This note's hold on playback: starting it pauses any other note.
+  const releasePlayback = useRef<(() => void) | null>(null);
+
+  const duration = Math.max(Number(status?.duration) || 0, 0);
+  const currentTime = Math.max(Number(status?.currentTime) || 0, 0);
+  const playing = !!status?.playing;
+  const finished = !!status?.didJustFinish || (duration > 0 && currentTime >= duration - 0.1);
+  // `isLoaded` / `isBuffering` are compared strictly: a player that
+  // doesn't report them never gets a spinner that can't go away.
+  const loading = wantsPlay && !playing && (status?.isLoaded === false || status?.isBuffering === true);
+
+  const pause = () => {
+    setWantsPlay(false);
+    player.pause();
+  };
+  const start = () => {
+    releasePlayback.current?.();
+    releasePlayback.current = claimVoicePlayback(pause);
+    setWantsPlay(true);
+    player.play();
+  };
+
+  // The visitor tapped play on the idle note, which created this player.
+  // Neither callback changes for the player's lifetime.
+  useEffect(() => {
+    start();
+    return () => releasePlayback.current?.();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // The error is only on the status update that reports it (the next one
+  // clears it), so it is acted on as it arrives.
+  const error = status?.error;
+  useEffect(() => {
+    if (error) onError();
+  }, [error, onError]);
+
+  const togglePlay = async () => {
+    if (playing || loading) {
+      pause();
+      return;
+    }
+    if (finished) await player.seekTo(0);
+    start();
+  };
+
+  const cycleSpeed = () => {
+    const next = (speedIndex + 1) % SPEEDS.length;
+    setSpeedIndex(next);
+    try {
+      player.setPlaybackRate(SPEEDS[next], 'high');
+    } catch {
+      // Some versions take no pitch-correction argument.
+      try {
+        player.setPlaybackRate(SPEEDS[next]);
+      } catch {
+        // Speed unsupported: the note keeps playing at 1×.
+      }
+    }
+  };
+
+  // The latest values for the (stable) PanResponder below.
+  const latest = useRef({ trackWidth, duration, player });
+  latest.current = { trackWidth, duration, player };
+  const ratioAt = (x: number) => {
+    const width = latest.current.trackWidth;
+    return width > 0 ? Math.min(1, Math.max(0, x / width)) : 0;
+  };
+  // Where the finger first touched the track. Later positions are that plus
+  // the drag distance: a move event's own `locationX` is measured from
+  // whatever view is under the finger, not from the track.
+  const startX = useRef(0);
+  const pan = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: (event) => {
+        startX.current = event.nativeEvent.locationX;
+        setScrub(ratioAt(startX.current));
+      },
+      onPanResponderMove: (_, gesture) => setScrub(ratioAt(startX.current + gesture.dx)),
+      onPanResponderRelease: (_, gesture) => {
+        const { duration: length, player: current } = latest.current;
+        if (length > 0) void current.seekTo(ratioAt(startX.current + gesture.dx) * length);
+        setScrub(null);
+      },
+      onPanResponderTerminate: () => setScrub(null),
+    })
+  ).current;
+
+  const displayTime =
+    scrub != null ? scrub * duration : playing ? currentTime : finished ? duration : currentTime || duration;
+  // The chip joins once the note was started, so an untouched note shows only its length.
+  const showSpeed = speedIndex > 0 || playing || (currentTime > 0 && !finished);
+
+  return (
+    <VoiceNoteLayout
+      {...props}
+      playing={playing}
+      loading={loading}
+      progress={scrub ?? (duration > 0 ? Math.min(1, currentTime / duration) : 0)}
+      // Nothing to show until the player knows the note's length.
+      time={duration > 0 ? formatVoiceClock(displayTime) : null}
+      onToggle={() => void togglePlay()}
+      track={{ panHandlers: pan.panHandlers, onWidth: setTrackWidth }}
+      speed={showSpeed ? { value: SPEEDS[speedIndex], changed: speedIndex > 0, onPress: cycleSpeed } : null}
+    />
+  );
+}
+
+function VoiceNoteLayout({
+  seed,
+  color,
+  onBrandBubble,
+  labels,
+  playing,
+  loading,
+  progress,
+  time,
+  onToggle,
+  track,
+  speed,
+}: VoiceNoteProps & {
+  playing: boolean;
+  loading: boolean;
+  /** 0–1 through the note. */
+  progress: number;
+  time: string | null;
+  onToggle: () => void;
+  /** Scrubbing; missing on a note that hasn't been started. */
+  track?: { panHandlers: GestureResponderHandlers; onWidth: (width: number) => void };
+  speed?: { value: number; changed: boolean; onPress: () => void } | null;
+}) {
+  const accent = onBrandBubble ? palette.white : color;
+  const onAccent = onBrandBubble ? color : palette.white;
+  const trackColor = onBrandBubble ? withAlpha(palette.white, 0.4) : palette.disabled;
+  const subtle = onBrandBubble ? withAlpha(palette.white, 0.8) : palette.textMuted;
+  const levels = useMemo(() => voiceWaveformLevels(seed, BAR_COUNT), [seed]);
+  const [trackWidth, setTrackWidth] = useState(0);
+  const onTrackLayout = (event: LayoutChangeEvent) => {
+    setTrackWidth(event.nativeEvent.layout.width);
+    track?.onWidth(event.nativeEvent.layout.width);
+  };
+
+  // Bar i's centre sits at this share of the track; the playhead travels the same span.
+  const barCentre = (i: number) =>
+    trackWidth > BAR_WIDTH
+      ? (BAR_WIDTH / 2 + (i * (trackWidth - BAR_WIDTH)) / (BAR_COUNT - 1)) / trackWidth
+      : i / (BAR_COUNT - 1);
+  const knobOffset = trackWidth > 0 ? Math.round(progress * (trackWidth - KNOB_SIZE)) : 0;
+
+  let icon: ReactNode = <PlayIcon size={14} color={onAccent} />;
+  if (loading) icon = <ActivityIndicator size="small" color={onAccent} />;
+  else if (playing) icon = <PauseIcon size={14} color={onAccent} />;
+
+  return (
+    <View style={styles.root}>
+      <View style={styles.row}>
+        <Pressable
+          onPress={onToggle}
+          accessibilityRole="button"
+          accessibilityLabel={playing || loading ? labels.pause : labels.play}
+          accessibilityState={{ busy: loading }}
+          hitSlop={4}
+          style={({ pressed }) => [
+            styles.playButton,
+            { backgroundColor: accent, opacity: pressed ? 0.8 : 1 },
+          ]}>
+          {icon}
+        </Pressable>
+
+        <View
+          style={styles.track}
+          onLayout={onTrackLayout}
+          {...track?.panHandlers}>
+          {levels.map((level, i) => (
+            <View
+              key={i}
+              // Touches land on the track itself, so their position is measured from its edge.
+              pointerEvents="none"
+              style={[
+                styles.bar,
+                {
+                  height: BAR_MIN_HEIGHT + level * (BAR_MAX_HEIGHT - BAR_MIN_HEIGHT),
+                  backgroundColor: barCentre(i) <= progress ? accent : trackColor,
+                },
+              ]}
+            />
+          ))}
+          {trackWidth > 0 ? (
+            <View
+              pointerEvents="none"
+              style={[
+                styles.knob,
+                { backgroundColor: accent, transform: [{ translateX: knobOffset }] },
+              ]}
+            />
+          ) : null}
+        </View>
+      </View>
+
+      <View style={styles.meta}>
+        {time != null ? <Text style={[styles.time, { color: subtle }]}>{time}</Text> : null}
+        {speed ? (
+          <Pressable
+            onPress={speed.onPress}
+            accessibilityRole="button"
+            accessibilityLabel={labels.speed}
+            hitSlop={12}
+            style={({ pressed }) => [
+              styles.speed,
+              { backgroundColor: speed.changed ? accent : trackColor, opacity: pressed ? 0.6 : 1 },
+            ]}>
+            <Text
+              style={[
+                styles.speedText,
+                { color: speed.changed ? onAccent : onBrandBubble ? palette.white : palette.text },
+              ]}>
+              {speed.value}×
+            </Text>
+          </Pressable>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  // A timeline runs left to right in every language, so RTL doesn't mirror it
+  // (the touch position and the playhead stay in the same coordinates).
+  root: { minWidth: 200, direction: 'ltr' },
+  row: { flexDirection: 'row', alignItems: 'center', gap: 10 },
+  playButton: {
+    width: BUTTON_SIZE,
+    height: BUTTON_SIZE,
+    borderRadius: BUTTON_SIZE / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  track: {
+    flex: 1,
+    minWidth: 0,
+    height: BUTTON_SIZE,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  bar: { width: BAR_WIDTH, borderRadius: BAR_WIDTH / 2 },
+  knob: {
+    position: 'absolute',
+    left: 0,
+    width: KNOB_SIZE,
+    height: KNOB_SIZE,
+    borderRadius: KNOB_SIZE / 2,
+  },
+  meta: {
+    minHeight: 18,
+    marginTop: -2,
+    marginLeft: BUTTON_SIZE + 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  time: { fontSize: fontSize.caption, fontWeight: '500', fontVariant: ['tabular-nums'] },
+  speed: {
+    minWidth: 30,
+    height: 18,
+    paddingHorizontal: 6,
+    borderRadius: 9,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  speedText: { fontSize: 11, fontWeight: '700', fontVariant: ['tabular-nums'] },
+});

package/src/ui/components/ZoomableImage.tsx

@@ -0,0 +1,250 @@
+/**
+ * An image the visitor can pinch to zoom, drag around once zoomed, and
+ * double-tap to zoom in on a spot (and again to zoom back out). Built on
+ * PanResponder and Animated, so it behaves the same on iOS and Android
+ * without a gesture library in the host app.
+ */
+
+import { useRef, useState } from 'react';
+import {
+  Animated,
+  PanResponder,
+  StyleSheet,
+  View,
+  type GestureResponderEvent,
+  type ImageLoadEventData,
+  type LayoutChangeEvent,
+  type NativeSyntheticEvent,
+} from 'react-native';
+
+import { useReduceMotion } from '../hooks/use-reduce-motion';
+
+export const MAX_ZOOM = 4;
+export const DOUBLE_TAP_ZOOM = 2.5;
+const DOUBLE_TAP_MS = 300;
+const DOUBLE_TAP_SLOP = 30;
+const TAP_SLOP = 10;
+
+/** Scale and offset (from the centre of the view) of the image. */
+export interface ZoomView {
+  scale: number;
+  x: number;
+  y: number;
+}
+
+interface Size {
+  width: number;
+  height: number;
+}
+
+/** The size the image is drawn at with `contain`, before any zoom. */
+export function fittedSize(box: Size, image: Size | null): Size {
+  if (!image || image.width <= 0 || image.height <= 0) return box;
+  const fit = Math.min(box.width / image.width, box.height / image.height);
+  return { width: image.width * fit, height: image.height * fit };
+}
+
+/**
+ * Keeps the image inside the screen: zoom between 1× and `MAX_ZOOM`, and no
+ * empty space past an edge the zoomed image is wider (or taller) than.
+ */
+export function clampView(view: ZoomView, box: Size, content: Size): ZoomView {
+  const scale = Math.min(MAX_ZOOM, Math.max(1, view.scale));
+  const maxX = Math.max(0, (content.width * scale - box.width) / 2);
+  const maxY = Math.max(0, (content.height * scale - box.height) / 2);
+  return {
+    scale,
+    x: Math.min(maxX, Math.max(-maxX, view.x)),
+    y: Math.min(maxY, Math.max(-maxY, view.y)),
+  };
+}
+
+/**
+ * The view at `scale` that keeps the spot that was under `from` (a point
+ * relative to the centre, in the `start` view) under `to`. Pinching zooms
+ * around the fingers this way, and moving them pans at the same time.
+ */
+export function zoomAround(start: ZoomView, scale: number, from: { x: number; y: number }, to: { x: number; y: number }): ZoomView {
+  const spotX = (from.x - start.x) / start.scale;
+  const spotY = (from.y - start.y) / start.scale;
+  return { scale, x: to.x - scale * spotX, y: to.y - scale * spotY };
+}
+
+interface Touch {
+  pageX: number;
+  pageY: number;
+}
+
+const centreOf = (touches: Touch[]) => ({
+  x: touches.reduce((sum, t) => sum + t.pageX, 0) / touches.length,
+  y: touches.reduce((sum, t) => sum + t.pageY, 0) / touches.length,
+});
+const spreadOf = (touches: Touch[]) =>
+  touches.length < 2 ? 0 : Math.hypot(touches[0].pageX - touches[1].pageX, touches[0].pageY - touches[1].pageY);
+
+export function ZoomableImage({
+  uri,
+  accessibilityLabel,
+  onLoad,
+  onError,
+}: {
+  uri: string;
+  accessibilityLabel: string;
+  onLoad: () => void;
+  onError: () => void;
+}) {
+  const reduceMotion = useReduceMotion();
+  const [scale] = useState(() => new Animated.Value(1));
+  const [x] = useState(() => new Animated.Value(0));
+  const [y] = useState(() => new Animated.Value(0));
+
+  // Gesture state, read by the (stable) PanResponder below.
+  const g = useRef({
+    view: { scale: 1, x: 0, y: 0 } as ZoomView,
+    box: { width: 0, height: 0 } as Size,
+    // Where the box sits on screen, so touches can be measured from its centre.
+    origin: { x: 0, y: 0 },
+    image: null as Size | null,
+    // The view, finger centre and finger spread when the current set of fingers went down.
+    start: { view: { scale: 1, x: 0, y: 0 } as ZoomView, centre: { x: 0, y: 0 }, spread: 0, count: 0 },
+    moved: false,
+    grantedAt: 0,
+    lastTap: null as { at: number; x: number; y: number } | null,
+    reduceMotion: false as boolean | null,
+    native: false,
+  }).current;
+  g.reduceMotion = reduceMotion;
+
+  const boxRef = useRef<View>(null);
+
+  const show = (view: ZoomView, animate: boolean) => {
+    g.view = view;
+    if (!animate || g.reduceMotion !== false) {
+      scale.setValue(view.scale);
+      x.setValue(view.x);
+      y.setValue(view.y);
+      return;
+    }
+    const spring = (value: Animated.Value, toValue: number) =>
+      Animated.spring(value, { toValue, useNativeDriver: true, bounciness: 0, speed: 18 });
+    Animated.parallel([spring(scale, view.scale), spring(x, view.x), spring(y, view.y)]).start();
+  };
+
+  // Hands the transform to the native driver as soon as the image is on
+  // screen. Until a native animation had run, Android (new architecture) didn't
+  // draw finger moves, so pinching only worked after a double tap.
+  const goNative = () => {
+    if (g.native) return;
+    g.native = true;
+    const settle = (value: Animated.Value, toValue: number) =>
+      Animated.spring(value, { toValue, useNativeDriver: true, bounciness: 0, speed: 18 });
+    Animated.parallel([settle(scale, g.view.scale), settle(x, g.view.x), settle(y, g.view.y)]).start();
+  };
+
+  const fromCentre = (point: { x: number; y: number }) => ({
+    x: point.x - g.origin.x - g.box.width / 2,
+    y: point.y - g.origin.y - g.box.height / 2,
+  });
+  const content = () => fittedSize(g.box, g.image);
+
+  const begin = (touches: Touch[]) => {
+    g.start = { view: g.view, centre: fromCentre(centreOf(touches)), spread: spreadOf(touches), count: touches.length };
+  };
+
+  const pan = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      // Never hand the gesture over: nothing else in the full-screen viewer
+      // wants it, and giving it up at 1× ended a pinch as it started.
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderGrant: (event: GestureResponderEvent) => {
+        g.moved = false;
+        g.grantedAt = Date.now();
+        begin(event.nativeEvent.touches);
+      },
+      onPanResponderMove: (event: GestureResponderEvent, gesture) => {
+        const touches = event.nativeEvent.touches;
+        if (touches.length === 0) return;
+        // A finger landed or lifted: carry on from where the image is now.
+        if (touches.length !== g.start.count) begin(touches);
+        if (Math.abs(gesture.dx) > TAP_SLOP || Math.abs(gesture.dy) > TAP_SLOP || touches.length > 1) {
+          g.moved = true;
+        }
+        const centre = fromCentre(centreOf(touches));
+        if (touches.length > 1 && g.start.spread > 0) {
+          // Past the limits while pinching, then springs back on release.
+          const zoom = Math.min(MAX_ZOOM * 1.25, Math.max(0.75, (g.start.view.scale * spreadOf(touches)) / g.start.spread));
+          show(zoomAround(g.start.view, zoom, g.start.centre, centre), false);
+        } else if (g.start.view.scale > 1) {
+          // One finger drags the zoomed image; at 1× there's nothing to drag.
+          const dragged = {
+            ...g.start.view,
+            x: g.start.view.x + centre.x - g.start.centre.x,
+            y: g.start.view.y + centre.y - g.start.centre.y,
+          };
+          show(clampView(dragged, g.box, content()), false);
+        }
+      },
+      onPanResponderRelease: (event: GestureResponderEvent) => {
+        const now = Date.now();
+        const { pageX, pageY } = event.nativeEvent;
+        const isTap = !g.moved && now - g.grantedAt < DOUBLE_TAP_MS;
+        const last = g.lastTap;
+        if (
+          isTap &&
+          last &&
+          now - last.at < DOUBLE_TAP_MS &&
+          Math.hypot(pageX - last.x, pageY - last.y) < DOUBLE_TAP_SLOP
+        ) {
+          g.lastTap = null;
+          // Zooming in keeps the tapped spot under the finger (as far as the edges allow).
+          const tapped = fromCentre({ x: pageX, y: pageY });
+          const target =
+            g.view.scale > 1.01
+              ? { scale: 1, x: 0, y: 0 }
+              : zoomAround({ scale: 1, x: 0, y: 0 }, DOUBLE_TAP_ZOOM, tapped, tapped);
+          show(clampView(target, g.box, content()), true);
+          return;
+        }
+        g.lastTap = isTap ? { at: now, x: pageX, y: pageY } : null;
+        show(clampView(g.view, g.box, content()), true);
+      },
+      onPanResponderTerminate: () => show(clampView(g.view, g.box, content()), true),
+    })
+  ).current;
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    g.box = { width, height };
+    goNative();
+    boxRef.current?.measureInWindow?.((left, top) => {
+      g.origin = { x: left, y: top };
+    });
+  };
+
+  const handleLoad = (event: NativeSyntheticEvent<ImageLoadEventData>) => {
+    const source = event?.nativeEvent?.source;
+    if (source && source.width > 0 && source.height > 0) g.image = { width: source.width, height: source.height };
+    onLoad();
+  };
+
+  return (
+    <View ref={boxRef} style={styles.box} onLayout={onLayout} {...pan.panHandlers}>
+      <Animated.Image
+        source={{ uri }}
+        style={[styles.image, { transform: [{ translateX: x }, { translateY: y }, { scale }] }]}
+        resizeMode="contain"
+        accessibilityLabel={accessibilityLabel}
+        accessibilityIgnoresInvertColors
+        onLoad={handleLoad}
+        onError={onError}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: { flex: 1, overflow: 'hidden' },
+  image: { width: '100%', height: '100%' },
+});