react-native-ensys-camera-x 1.0.7

package/src/library/components/ExpandableFab.tsx

@@ -0,0 +1,342 @@
+/**
+ * ExpandableFab — a bottom-right Floating Action Button that expands into a stack of labelled
+ * action rows (Camera / Document / Audio).
+ *
+ * Constraints honoured:
+ *  • All icons are hand-authored from RN primitives (see ../icons/CustomIcons) — no icon library,
+ *    no react-native-svg, no external assets.
+ *  • All motion uses ONLY React Native's built-in Animated API (no reanimated / animatable / moti /
+ *    lottie). A single Animated.Value drives everything, so there is one source of truth and the
+ *    expand/collapse reverse is exact.
+ *  • Transforms + opacity run on the native driver, so it stays smooth on low-end devices.
+ *
+ * State model: `open` (React state) is the source of truth; an effect animates `progress` toward
+ * it. Rapid taps just flip `open`; Animated.timing redirects from the current value, so there are
+ * no glitches or half-open states. The menu auto-collapses when an action is picked, when the
+ * backdrop is tapped, and whenever the FAB is disabled (e.g. a capture is in flight).
+ */
+import { useEffect, useMemo, useRef, useState, useCallback, type FC } from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  TouchableOpacity,
+  Animated,
+  Easing,
+  StyleSheet,
+  ActivityIndicator,
+  type ColorValue,
+} from 'react-native';
+import { NativeBlurView } from '../../NativeBlurView';
+import { useCameraLocalization } from '../../localization';
+import { RenderIcon, type CameraIconKey } from '../../icons';
+
+// ── Responsive scaling — shared with the whole app (portrait-normalized + clamped) ──
+import { wp, hp, ms, fs } from '../responsive';
+import { useLibraryPalette, type LibraryPalette } from '../palette';
+
+interface FabAction {
+  key: string;
+  label: string;
+  /** Registry key — rendered via `<RenderIcon>` from the app's icon registry. */
+  iconName: CameraIconKey;
+  color: string;
+  onPress: () => void;
+}
+
+export interface ExpandableFabProps {
+  onCamera: () => void;
+  /**
+   * Opens the device gallery for an existing image or video, then hands the pick to the same
+   * preview/editor screen a capture opens on (image editor for a photo, video editor for a clip).
+   */
+  onImageVideo: () => void;
+  onDocument: () => void;
+  onAudio: () => void;
+  onRecordAudio: () => void;
+  /** Shows a spinner on the FAB and disables interaction (e.g. while capturing). */
+  busy?: boolean;
+  disabled?: boolean;
+  /** Distance from the right/bottom screen edges — defaults match the app's original FAB. */
+  right?: number;
+  bottom?: number;
+  accentColor?: ColorValue;
+}
+
+const ANIM_IN = 240;
+const ANIM_OUT = 200;
+const ICON_SIZE = ms(22);
+const ICON_STROKE = 2;
+
+export const ExpandableFab: FC<ExpandableFabProps> = ({
+  onCamera,
+  onImageVideo,
+  onDocument,
+  onAudio,
+  onRecordAudio,
+  busy = false,
+  disabled = false,
+  right = wp(16),
+  bottom = hp(80),
+  accentColor,
+}) => {
+  const { t } = useCameraLocalization();
+  const palette = useLibraryPalette();
+  const styles = useMemo(() => makeStyles(palette), [palette]);
+  const resolvedAccent = accentColor ?? palette.accentTeal;
+  const [open, setOpen] = useState(false);
+  // Keeps the frosted backdrop mounted/active through the collapse animation so the
+  // blur fades out with the menu instead of snapping away the instant `open` flips.
+  const [backdropVisible, setBackdropVisible] = useState(false);
+  const progress = useRef(new Animated.Value(0)).current;
+
+  // Follows the host-driven plugin theme (not the device setting), so the menu matches the
+  // rest of the shell: dark cards + light text in dark mode, white cards + dark text in light.
+  const isDark = palette.isDark;
+  const cardBgColor = isDark ? palette.chromeSystem : palette.white;
+  const cardPressedBgColor = isDark ? palette.chromeSystemAlt : palette.surfaceMuted;
+  const textColor = isDark ? palette.white : palette.black;
+
+  // Actions are declared top-of-menu → bottom-of-menu is handled by column-reverse below, so the
+  // FIRST entry (Camera) ends up nearest the FAB and reveals first.
+  const actions: FabAction[] = [
+    { key: 'camera', label: t('camera'), iconName: 'camera', color: palette.accentBlue, onPress: onCamera },
+    { key: 'imagevideo', label: t('gallery'), iconName: 'image_video', color: palette.accentIndigo, onPress: onImageVideo },
+    { key: 'document', label: t('document'), iconName: 'document', color: palette.accentPurple, onPress: onDocument },
+    { key: 'recordAudio', label: t('recordAudio'), iconName: 'mic', color: palette.accentOrange, onPress: onRecordAudio },
+    { key: 'audio', label: t('browseAudio'), iconName: 'browse_audio', color: palette.accentOrange, onPress: onAudio },
+  ];
+
+  // Single source of truth: animate `progress` toward the `open` state. Interrupting taps simply
+  // change `open`; the timing restarts from the live value → no glitches, exact reverse.
+  useEffect(() => {
+    const animation = Animated.timing(progress, {
+      toValue: open ? 1 : 0,
+      duration: open ? ANIM_IN : ANIM_OUT,
+      easing: open ? Easing.out(Easing.cubic) : Easing.in(Easing.cubic),
+      useNativeDriver: true,
+    });
+    animation.start();
+    return () => animation.stop();
+  }, [open, progress]);
+
+  // A disabled FAB (e.g. capture in progress) must never stay expanded.
+  useEffect(() => {
+    if (disabled) setOpen(false);
+  }, [disabled]);
+
+  // Snapshot-blur the background as soon as the menu opens; keep it active until the
+  // collapse animation has finished so it fades out smoothly rather than popping.
+  useEffect(() => {
+    if (open) {
+      setBackdropVisible(true);
+      return;
+    }
+    const timeout = setTimeout(() => setBackdropVisible(false), ANIM_OUT + 40);
+    return () => clearTimeout(timeout);
+  }, [open]);
+
+  const toggle = useCallback(() => {
+    if (disabled) return;
+    setOpen((prev) => !prev);
+  }, [disabled]);
+
+  const handleSelect = useCallback((action: FabAction) => {
+    // Collapse immediately, then run the existing flow — the menu animates away while the
+    // native picker/flow opens.
+    setOpen(false);
+    action.onPress();
+  }, []);
+
+  const backdropOpacity = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1],
+  });
+
+  return (
+    <View style={[StyleSheet.absoluteFill, styles.overlay]} pointerEvents="box-none">
+      {/* Backdrop — fades in with the menu and collapses on tap. Non-interactive when closed so
+          the media library underneath stays fully usable. */}
+      <Animated.View
+        pointerEvents={open ? 'auto' : 'none'}
+        style={[styles.backdrop, { opacity: backdropOpacity }]}
+      >
+        {/* Native frosted-glass blur of the media library sitting behind the menu
+            (Android; a graceful no-op elsewhere). ONLY the background is blurred —
+            the menu rows and the FAB are rendered above this layer and stay crisp. */}
+        <NativeBlurView
+          active={backdropVisible}
+          blurRadius={6}
+          downsampleFactor={7}
+          style={StyleSheet.absoluteFill}
+        />
+        {/* Subtle scrim over the blur for contrast; fades with the same progress. */}
+        <View style={styles.backdropTint} pointerEvents="none" />
+        <Pressable
+          style={StyleSheet.absoluteFill}
+          onPress={() => setOpen(false)}
+          accessibilityLabel={t('closeActionsMenu')}
+        />
+      </Animated.View>
+
+      <View style={[styles.anchor, { right, bottom }]} pointerEvents="box-none">
+        {/* Menu — reversed so Camera sits at the bottom (closest to the FAB). */}
+        <View
+          style={styles.menu}
+          pointerEvents={open ? 'auto' : 'none'}
+        >
+          {actions.map((action, index) => {
+            // Stagger each row's reveal by its position; clamp keeps every item fully hidden
+            // before its window starts and fully shown after it ends.
+            const start = index * 0.16;
+            const end = Math.min(start + 0.6, 1);
+            const itemOpacity = progress.interpolate({
+              inputRange: [start, end],
+              outputRange: [0, 1],
+              extrapolate: 'clamp',
+            });
+            const translateY = progress.interpolate({
+              inputRange: [start, end],
+              outputRange: [ms(18), 0],
+              extrapolate: 'clamp',
+            });
+            const scale = progress.interpolate({
+              inputRange: [start, end],
+              outputRange: [0.9, 1],
+              extrapolate: 'clamp',
+            });
+            return (
+              <Animated.View
+                key={action.key}
+                style={{ opacity: itemOpacity, transform: [{ translateY }, { scale }] }}
+              >
+                <Pressable
+                  style={({ pressed }) => [
+                    styles.row,
+                    { backgroundColor: pressed ? cardPressedBgColor : cardBgColor },
+                  ]}
+                  onPress={() => handleSelect(action)}
+                  accessibilityRole="button"
+                  accessibilityLabel={action.label}
+                >
+                  <View style={[styles.iconWrap, { backgroundColor: action.color }]}>
+                    <RenderIcon
+                      name={action.iconName}
+                      size={ICON_SIZE}
+                      color={palette.white}
+                      strokeWidth={ICON_STROKE}
+                    />
+                  </View>
+                  <Text style={[styles.label, { color: textColor }]} numberOfLines={1}>
+                    {action.label}
+                  </Text>
+                </Pressable>
+              </Animated.View>
+            );
+          })}
+        </View>
+
+        {/* Main FAB */}
+        <TouchableOpacity
+          activeOpacity={0.85}
+          onPress={toggle}
+          disabled={disabled}
+          accessibilityRole="button"
+          accessibilityState={{ expanded: open, disabled }}
+          accessibilityLabel={open ? t('closeActionsMenu') : t('openActionsMenu')}
+          style={[styles.fab, { backgroundColor: resolvedAccent }]}
+        >
+          {busy ? (
+            <ActivityIndicator color={palette.white} size="small" />
+          ) : (
+            <RenderIcon name="plus_close" size={ms(24)} color={palette.white} strokeWidth={2.4} progress={progress} />
+          )}
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const ROW_HEIGHT = ms(46);
+// Fixed width sized to accommodate the longest label ("Browse Audio") so all
+// five menu options share one uniform width.
+const ROW_WIDTH = ms(160);
+
+const makeStyles = (palette: LibraryPalette) =>
+  StyleSheet.create({
+  backdrop: {
+    // Transparent container: the native blur layer paints the frosted background and
+    // `backdropTint` adds the darkening, so the two compose into a frosted scrim.
+    ...StyleSheet.absoluteFill,
+    backgroundColor: 'transparent',
+    zIndex: 1,
+    elevation: 16,
+  },
+  backdropTint: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: palette.scrimA22,
+  },
+  anchor: {
+    position: 'absolute',
+    alignItems: 'flex-end',
+    zIndex: 2,
+    elevation: 17,
+  },
+  overlay: {
+    zIndex: 100,
+    elevation: 16,
+  },
+  menu: {
+    flexDirection: 'column-reverse',
+    alignItems: 'flex-end',
+    gap: ms(12),
+    marginBottom: ms(14),
+    // Reserve space on the right so menu rows never overlap the FAB or overflow
+    // the screen edge. The FAB is ms(56) wide + ms(14) gap below the menu.
+    paddingRight: ms(20),
+  },
+  // Fixed row width so every icon shares one left edge and every label shares one left edge —
+  // the whole menu reads as one perfectly aligned column.
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: ROW_WIDTH,
+    height: ROW_HEIGHT,
+    borderRadius: Math.round(ROW_HEIGHT / 2),
+    paddingLeft: ms(8),
+    paddingRight: ms(10),
+    // Subtle lift so the pills sit above the media library.
+    shadowColor: palette.blackShort,
+    shadowOffset: { width: 0, height: hp(2) },
+    shadowOpacity: 0.12,
+    shadowRadius: ms(6),
+    elevation: 4,
+  },
+  iconWrap: {
+    width: ms(34),
+    height: ms(34),
+    borderRadius: ms(17),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: {
+    flex: 1,
+    fontSize: fs(15),
+    fontWeight: '600',
+    textAlign: 'center',
+    includeFontPadding: false,
+  },
+  fab: {
+    width: ms(56),
+    height: ms(56),
+    borderRadius: ms(20),
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    shadowColor: palette.blackShort,
+    shadowOffset: { width: 0, height: hp(4) },
+    shadowOpacity: 0.3,
+    shadowRadius: ms(6),
+    elevation: 8,
+  },
+});

package/src/library/components/FileTiles.tsx

@@ -0,0 +1,252 @@
+/**
+ * FileTiles — modern, informative list thumbnails for media without a pixel frame
+ * (documents and audio) on the Media List screen.
+ *
+ *  • DocumentTile — a colour-coded mini page with a folded corner and a solid
+ *    file-type badge. The palette is keyed by file family (PDF red, Word blue,
+ *    spreadsheet green, slides amber, archive violet), so a row is identifiable
+ *    at a glance without reading the file name.
+ *  • AudioTile — a waveform seeded deterministically from the asset id (stable
+ *    across re-renders, unique per file) with the same style of format badge.
+ *
+ * Both are drawn purely from RN primitives — no icon library, no react-native-svg,
+ * no image assets — and degrade gracefully: an unknown or missing extension falls
+ * back to a neutral dark-theme palette and a generic FILE / AUD badge.
+ */
+import { useMemo } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import type { CameraAsset } from '../../types';
+import { RenderIcon } from '../../icons';
+import { useCameraLocalization } from '../../localization';
+
+// ── Responsive scaling — shared with the whole app (portrait-normalized + clamped) ──
+import { ms, fs } from '../responsive';
+import { useLibraryPalette, type LibraryPalette } from '../palette';
+
+interface TilePalette {
+  /** Tile background — a tint of the accent hue for the active theme. */
+  bg: string;
+  /** Glyph strokes + badge fill. */
+  accent: string;
+}
+
+interface TilePalettes {
+  /** Neutral fallback for unknown/missing extensions. */
+  default: TilePalette;
+  /** File-family palettes, keyed by lowercase extension. */
+  families: Array<{ exts: string[]; palette: TilePalette }>;
+  audio: TilePalette;
+  /** Alternating waveform bar tone (depth without gradients). */
+  audioBarSoft: string;
+}
+
+// Built from the LIVE shell palette so every tile tint flips with the theme
+// (deep navy shades in dark, soft pastels in light) — the neutral fallback keeps
+// the hue of the old placeholder tile so unknown types still sit naturally.
+const makeTilePalettes = (palette: LibraryPalette): TilePalettes => ({
+  default: { bg: palette.surfaceRaised, accent: palette.isDark ? palette.accentPeriwinkle : palette.accentIndigo },
+  families: [
+    { exts: ['pdf'], palette: { bg: palette.surfaceRoseTint, accent: palette.accentRose } },
+    {
+      exts: ['doc', 'docx', 'rtf', 'odt', 'txt'],
+      palette: { bg: palette.surfaceNavy, accent: palette.accentSky },
+    },
+    {
+      exts: ['xls', 'xlsx', 'csv', 'ods'],
+      palette: { bg: palette.surfaceGreenTint, accent: palette.accentMint },
+    },
+    {
+      exts: ['ppt', 'pptx', 'odp'],
+      palette: { bg: palette.surfaceAmberTint, accent: palette.accentAmber },
+    },
+    {
+      exts: ['zip', 'rar', '7z', 'tar', 'gz'],
+      palette: { bg: palette.surfacePlum, accent: palette.accentLavender },
+    },
+  ],
+  audio: { bg: palette.surfaceViolet, accent: palette.accentViolet },
+  audioBarSoft: palette.accentPurpleMuted,
+});
+
+const paletteForExtension = (palettes: TilePalettes, ext: string): TilePalette =>
+  palettes.families.find((family) => family.exts.includes(ext.toLowerCase()))
+    ?.palette ?? palettes.default;
+
+// MIME subtypes whose uppercase form would mislead as a badge (audio/mpeg is an
+// .mp3, audio/x-wav a .wav, …). Applied only when no file extension is available.
+const MIME_SUBTYPE_FIXUPS: Record<string, string> = {
+  MPEG: 'MP3',
+  MP4: 'M4A',
+  'X-M4A': 'M4A',
+  'X-WAV': 'WAV',
+  WAVE: 'WAV',
+  'X-FLAC': 'FLAC',
+  'X-OGG': 'OGG',
+};
+
+/** Uppercase extension from the file name, then the MIME subtype, else fallback. */
+function extensionOf(
+  fileName: string | undefined,
+  mimeType: string | undefined,
+  fallback: string
+): string {
+  if (fileName) {
+    const dot = fileName.lastIndexOf('.');
+    if (dot >= 0 && dot < fileName.length - 1) {
+      return fileName.slice(dot + 1).toUpperCase();
+    }
+  }
+  if (mimeType) {
+    const slash = mimeType.lastIndexOf('/');
+    if (slash >= 0 && slash < mimeType.length - 1) {
+      const subtype = mimeType.slice(slash + 1).toUpperCase();
+      return MIME_SUBTYPE_FIXUPS[subtype] ?? subtype;
+    }
+  }
+  return fallback;
+}
+
+/**
+ * Deterministic pseudo-waveform: heights (0..1) derived from the asset key via a
+ * tiny LCG, so every audio file gets its own bar pattern that never changes
+ * between renders or app launches — no Math.random, no re-render flicker.
+ */
+function waveformFor(key: string, count = 7): number[] {
+  let seed = 0;
+  for (let i = 0; i < key.length; i++) {
+    seed = (seed * 31 + key.charCodeAt(i)) >>> 0;
+  }
+  const heights: number[] = [];
+  for (let i = 0; i < count; i++) {
+    seed = (seed * 1664525 + 1013904223) >>> 0;
+    heights.push(0.25 + ((seed >>> 8) % 1000) / 1000 * 0.75);
+  }
+  return heights;
+}
+
+/** Solid extension chip anchored to the tile's bottom edge. */
+const TypeBadge = ({ label, accent }: { label: string; accent: string }) => {
+  const palette = useLibraryPalette();
+  const styles = useMemo(() => makeStyles(palette), [palette]);
+  return (
+    <View style={[styles.badge, { backgroundColor: accent }]}>
+      <Text style={styles.badgeText} numberOfLines={1}>
+        {label.slice(0, 4)}
+      </Text>
+    </View>
+  );
+};
+
+/** The name the published file actually has on disk, when the path carries one. */
+function fileNameFromUri(asset: CameraAsset): string | undefined {
+  const uri = asset.documentUri || asset.uri;
+  if (!uri) return undefined;
+  const segment = (uri.split(/[?#]/)[0] ?? '').split(/[\\/]/).pop();
+  if (!segment) return undefined;
+  const dot = segment.lastIndexOf('.');
+  return dot > 0 && dot < segment.length - 1 ? segment : undefined;
+}
+
+export const DocumentTile = ({ asset }: { asset: CameraAsset }) => {
+  const { t } = useCameraLocalization();
+  const palette = useLibraryPalette();
+  const styles = useMemo(() => makeStyles(palette), [palette]);
+  const palettes = useMemo(() => makeTilePalettes(palette), [palette]);
+  // The FILE names the badge, ahead of `fileName`/`mimeType`: an image exported to PDF can still
+  // carry its source photo's name and type, and a PDF badged "JPG" describes the wrong file.
+  const ext = extensionOf(
+    fileNameFromUri(asset) ?? asset.fileName,
+    asset.mimeType,
+    t('fileTypeGeneric')
+  );
+  const tile = paletteForExtension(palettes, ext);
+  return (
+    <View style={[styles.tile, { backgroundColor: tile.bg }]}>
+      {/* Page glyph sourced from the centralized icon registry (host-overridable
+          by the `document` key); the family accent colour is applied as tint so
+          the tile stays colour-coded per file type. */}
+      <View style={styles.glyphWrap}>
+        <RenderIcon
+          name="document"
+          size={ms(26)}
+          color={tile.accent}
+          strokeWidth={STROKE}
+        />
+      </View>
+      <TypeBadge label={ext} accent={tile.accent} />
+    </View>
+  );
+};
+
+export const AudioTile = ({ asset }: { asset: CameraAsset }) => {
+  const { t } = useCameraLocalization();
+  const palette = useLibraryPalette();
+  const styles = useMemo(() => makeStyles(palette), [palette]);
+  const palettes = useMemo(() => makeTilePalettes(palette), [palette]);
+  const audio = palettes.audio;
+  const ext = extensionOf(asset.fileName, asset.mimeType, t('audioTypeGeneric'));
+  const bars = waveformFor(asset.id || asset.fileName || 'audio');
+  return (
+    <View style={[styles.tile, { backgroundColor: audio.bg }]}>
+      <View style={styles.waveRow}>
+        {bars.map((height, index) => (
+          <View
+            key={index}
+            style={[
+              styles.waveBar,
+              {
+                height: ms(7) + Math.round(height * ms(18)),
+                backgroundColor:
+                  index % 2 === 0 ? audio.accent : palettes.audioBarSoft,
+              },
+            ]}
+          />
+        ))}
+      </View>
+      <TypeBadge label={ext} accent={audio.accent} />
+    </View>
+  );
+};
+
+const STROKE = 1.5;
+
+const makeStyles = (palette: LibraryPalette) =>
+  StyleSheet.create({
+    // Fills the list's fixed thumbnailWrapper (which clips to its own radius).
+    tile: {
+      flex: 1,
+      width: '100%',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    // Lifts the registry glyph so it + the bottom badge read balanced.
+    glyphWrap: {
+      marginBottom: ms(12),
+    },
+    waveRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: ms(3),
+      marginBottom: ms(12),
+    },
+    waveBar: {
+      width: ms(3),
+      borderRadius: ms(2),
+    },
+    badge: {
+      position: 'absolute',
+      bottom: ms(5),
+      paddingHorizontal: ms(5),
+      paddingVertical: ms(1.5),
+      borderRadius: ms(4),
+    },
+    badgeText: {
+      // Dark glyph on the bright accent chip in BOTH themes: the accent fills are light
+      // pastels, so a light label (appBackground in light mode) would wash out on them.
+      color: palette.isDark ? palette.appBackground : palette.inkDark,
+      fontSize: fs(8),
+      fontWeight: '800',
+      letterSpacing: 0.4,
+      includeFontPadding: false,
+    },
+  });

package/src/library/components/ImagePreview.tsx

@@ -0,0 +1,72 @@
+/**
+ * ImagePreview — in-app image preview for an image asset in the full-screen viewer.
+ *
+ * Displays a metadata header (file name, size, date, time, dimensions) using the
+ * standardized metadata header component, with the full image below using contain mode.
+ * Handles all image types including HEIF/AVIF and animated GIFs through native decoders.
+ */
+import { View, Image, StyleSheet } from 'react-native';
+import type { CameraAsset } from '../../types';
+import { NativeAnimatedImageView } from '../../NativeAnimatedImageView';
+import { isGifAsset, requiresNativeImageDecoder } from '../../utils';
+
+export const ImagePreview = ({
+  asset,
+}: {
+  asset: CameraAsset;
+}) => {
+  const previewUri = asset.documentUri || asset.uri;
+  // Determine which renderer to use based on image format
+  const isGif = isGifAsset(asset);
+  const needsNativeDecoder = requiresNativeImageDecoder(asset);
+  const useNativeDecoder = isGif || needsNativeDecoder;
+
+  return (
+    <View style={styles.wrap}>
+      <View style={styles.imageWrapper}>
+        {useNativeDecoder ? (
+          <NativeAnimatedImageView
+            src={previewUri}
+            style={styles.image}
+            resizeMode="contain"
+            active={true}
+          />
+        ) : (
+          <Image
+            source={{ uri: previewUri }}
+            style={styles.image}
+            resizeMode="contain"
+            // Decode to the slide's size instead of the file's full resolution: a 12MP still
+            // decoded whole is ~48MB of bitmap, and the viewer keeps neighbouring slides
+            // mounted. No-op on iOS.
+            resizeMethod="resize"
+          />
+        )}
+      </View>
+    </View>
+  );
+};
+
+// No backgroundColor anywhere in this tree: the slide sits directly on the viewer's single
+// screen background (s.viewerContainer). The header used to sit on `surface` and the media on
+// `surfaceRaised`, which read as two stacked colour blocks — and because the image is fitted
+// with `contain`, the raised block showed as empty strips above and below it. Painting nothing
+// lets the one screen colour run edge to edge behind both.
+const styles = StyleSheet.create({
+  wrap: {
+    flex: 1,
+    width: '100%',
+    overflow: 'hidden',
+  },
+  imageWrapper: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+  },
+  image: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+  },
+});