@marktiderman/genesis-chat 0.1.0 → 0.2.0

package/src/native/video-recorder-state.ts

@@ -0,0 +1,140 @@
+/**
+ * @feat:chat
+ * The video recorder's rules, without React or the camera, so they are tested
+ * directly. One button does both gestures: a tap starts a recording that a
+ * second tap stops (what VoiceOver and TalkBack do too), and a hold records
+ * until the finger lifts. Stopping sends; Cancel throws the take away. The
+ * camera flips only between takes (expo-camera stops a recording that flips).
+ * A take the camera doesn't hand over is only that take: the camera stays
+ * ready. A camera that fails to start offers Try again.
+ */
+
+export type VideoRecorderPhase = "asking" | "denied" | "starting" | "ready" | "recording" | "stopping" | "failed";
+
+export interface VideoRecorderState {
+  phase: VideoRecorderPhase;
+  facing: "front" | "back";
+  /** When recording began (ms, the clock the events carry). */
+  startedAt: number;
+  elapsedMs: number;
+  /** "hold": a finger is down and lifting it stops; "tap": recording hands-free until the next tap. */
+  gesture: "hold" | "tap" | "stop-on-release" | null;
+  /** The take is to be thrown away when the camera hands it over. */
+  discard: boolean;
+  notice: "too-short" | "take-failed" | null;
+  /** Bumped by Try again after the camera failed: the camera view starts over. */
+  cameraKey: number;
+}
+
+export type VideoRecorderEvent =
+  | { type: "permissions"; granted: boolean }
+  | { type: "camera-ready" }
+  | { type: "camera-failed" }
+  | { type: "press"; at: number }
+  | { type: "release"; at: number }
+  | { type: "tick"; at: number }
+  | { type: "recorded"; at: number; uri: string | null }
+  | { type: "flip" }
+  | { type: "retry" }
+  | { type: "cancel" };
+
+export type VideoRecorderEffect =
+  | { type: "start" }
+  | { type: "stop" }
+  | { type: "send"; uri: string; durationMs: number }
+  | { type: "close" }
+  | { type: "haptic"; event: "record-start" | "send" | "record-cancel" | "error" };
+
+export interface VideoRecorderConfig {
+  limitMs: number;
+  /** A press held this long is a hold; shorter is a tap. */
+  holdMs?: number;
+  /** Shorter takes aren't sent. */
+  minMs?: number;
+}
+
+export const VIDEO_HOLD_MS = 350;
+export const VIDEO_MIN_MS = 1000;
+
+export const initialVideoRecorder = (facing: "front" | "back" = "front"): VideoRecorderState => ({
+  phase: "asking",
+  facing,
+  startedAt: 0,
+  elapsedMs: 0,
+  gesture: null,
+  discard: false,
+  notice: null,
+  cameraKey: 0,
+});
+
+type Step = { state: VideoRecorderState; effects: VideoRecorderEffect[] };
+
+export function videoRecorderStep(state: VideoRecorderState, event: VideoRecorderEvent, config: VideoRecorderConfig): Step {
+  const holdMs = config.holdMs ?? VIDEO_HOLD_MS;
+  const minMs = config.minMs ?? VIDEO_MIN_MS;
+  const same = { state, effects: [] as VideoRecorderEffect[] };
+  const stop = (s: VideoRecorderState): Step => ({ state: { ...s, phase: "stopping", gesture: null }, effects: [{ type: "stop" }] });
+
+  switch (event.type) {
+    case "permissions":
+      if (state.phase !== "asking") return same;
+      return { state: { ...state, phase: event.granted ? "starting" : "denied" }, effects: [] };
+    case "camera-ready":
+      return state.phase === "starting" ? { state: { ...state, phase: "ready" }, effects: [] } : same;
+    case "camera-failed":
+      return state.phase === "starting" || state.phase === "ready" ? { state: { ...state, phase: "failed" }, effects: [{ type: "haptic", event: "error" }] } : same;
+    case "press":
+      if (state.phase === "ready") {
+        return {
+          state: { ...state, phase: "recording", startedAt: event.at, elapsedMs: 0, gesture: "hold", discard: false, notice: null },
+          effects: [{ type: "start" }, { type: "haptic", event: "record-start" }],
+        };
+      }
+      if (state.phase === "recording" && state.gesture === "tap") return { state: { ...state, gesture: "stop-on-release" }, effects: [] };
+      return same;
+    case "release":
+      if (state.phase !== "recording") return same;
+      if (state.gesture === "hold") return event.at - state.startedAt >= holdMs ? stop(state) : { state: { ...state, gesture: "tap" }, effects: [] };
+      if (state.gesture === "stop-on-release") return stop(state);
+      return same;
+    case "tick":
+      if (state.phase !== "recording") return same;
+      {
+        const elapsedMs = Math.max(0, event.at - state.startedAt);
+        // The camera stops at the limit too (maxDuration); this keeps the button in step.
+        if (elapsedMs >= config.limitMs) return stop({ ...state, elapsedMs: config.limitMs });
+        return { state: { ...state, elapsedMs }, effects: [] };
+      }
+    case "recorded": {
+      if (state.phase !== "recording" && state.phase !== "stopping") return same;
+      const durationMs = Math.min(config.limitMs, Math.max(0, event.at - state.startedAt));
+      const base: VideoRecorderState = { ...state, phase: "ready", gesture: null, elapsedMs: 0, discard: false };
+      if (state.discard) return { state: base, effects: [{ type: "close" }] };
+      // Too short first: a take stopped straight after it started often leaves no file at all.
+      if (durationMs < minMs) return { state: { ...base, notice: "too-short" }, effects: [{ type: "haptic", event: "record-cancel" }] };
+      // The camera is still there; only this take is lost.
+      if (!event.uri) return { state: { ...base, notice: "take-failed" }, effects: [{ type: "haptic", event: "error" }] };
+      return { state: base, effects: [{ type: "send", uri: event.uri, durationMs }, { type: "haptic", event: "send" }, { type: "close" }] };
+    }
+    case "flip":
+      if (state.phase === "recording" || state.phase === "stopping") return same;
+      // The preview restarts on the other camera: wait for it (the screen also gives it a moment).
+      return { state: { ...state, facing: state.facing === "front" ? "back" : "front", phase: state.phase === "ready" ? "starting" : state.phase, notice: null }, effects: [] };
+    case "retry":
+      return state.phase === "failed" ? { state: { ...state, phase: "starting", cameraKey: state.cameraKey + 1, notice: null }, effects: [] } : same;
+    case "cancel":
+      if (state.phase === "recording") {
+        return { state: { ...state, phase: "stopping", gesture: null, discard: true }, effects: [{ type: "stop" }, { type: "haptic", event: "record-cancel" }] };
+      }
+      if (state.phase === "stopping") return { state: { ...state, discard: true }, effects: [] };
+      return { state, effects: [{ type: "close" }] };
+  }
+}
+
+/** The kind of file a recording is, from its URI: .mov on iOS, .mp4 on Android. */
+export function recordingType(uri: string): { contentType: string; ext: string } {
+  const ext = /\.([a-z0-9]+)(?:\?|#|$)/i.exec(uri)?.[1]?.toLowerCase() ?? "mp4";
+  if (ext === "mov") return { contentType: "video/quicktime", ext };
+  if (ext === "webm") return { contentType: "video/webm", ext };
+  return { contentType: "video/mp4", ext: "mp4" };
+}

package/src/native/video-recorder.tsx

@@ -0,0 +1,271 @@
+/**
+ * @feat:chat
+ * Async video messages, recorded in the thread: a full-screen camera (expo-camera, passed as
+ * `modules.camera`), one button to tap or hold, the time against the role's limit, flip
+ * between takes, and close to throw a take away. Stopping sends: the recording is handed to
+ * `onRecorded`, which the thread screen sends (`videoUploads`). Asks for the camera and the
+ * microphone when it opens; refused, it says how to turn them on.
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { AccessibilityInfo, Linking, Modal, Pressable, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { NativeButton, NativeIcon, NativeText } from "@marktiderman/genesis-ui-native/components";
+import { useThemeRoles } from "@marktiderman/genesis-ui-native/hooks";
+import { formatDuration } from "../core/media";
+import { fill } from "./copy";
+import { useChatNative } from "./context";
+import { MEDIA_BACKDROP, MEDIA_SCRIM, ON_MEDIA } from "./media-colors";
+import { haptic, type CameraViewHandleLike, type ExpoCameraLike } from "./modules";
+import type { RecordedVideo } from "./video-upload";
+import { initialVideoRecorder, recordingType, videoRecorderStep, type VideoRecorderEffect, type VideoRecorderEvent, type VideoRecorderState } from "./video-recorder-state";
+
+export interface ChatVideoRecorderProps {
+  open: boolean;
+  onClose: () => void;
+  /** The role's limit (`recordingLimitMs(role)`). */
+  limitMs: number;
+  /** A take began: the moment to mint the upload, so the bytes can go as soon as it stops. */
+  onStart?: () => void;
+  /** About every second while recording (to tell the others: `signalRecordingVideo`). */
+  onTick?: () => void;
+  onRecorded: (video: RecordedVideo) => void;
+  /** For tests: the clock. */
+  now?: () => number;
+  testID?: string;
+}
+
+/** Renders nothing without `modules.camera`. */
+export function ChatVideoRecorder(props: ChatVideoRecorderProps) {
+  const { modules } = useChatNative();
+  const camera = modules.camera;
+  if (!camera) return null;
+  const testID = props.testID ?? "chat-video-recorder";
+  return (
+    <Modal visible={props.open} animationType="slide" presentationStyle="fullScreen" onRequestClose={props.onClose} testID={testID}>
+      {props.open ? <RecorderBody {...props} camera={camera} testID={testID} /> : null}
+    </Modal>
+  );
+}
+
+function RecorderBody({ camera, onClose, limitMs, onStart, onTick, onRecorded, now = Date.now, testID }: ChatVideoRecorderProps & { camera: ExpoCameraLike; testID: string }) {
+  const { copy, modules } = useChatNative();
+  const colors = useThemeRoles();
+  const [state, setState] = useState<VideoRecorderState>(() => initialVideoRecorder());
+  const stateRef = useRef(state);
+  const cameraRef = useRef<CameraViewHandleLike | null>(null);
+  const alive = useRef(true);
+  const latest = useRef({ onClose, onStart, onTick, onRecorded, limitMs, now });
+  latest.current = { onClose, onStart, onTick, onRecorded, limitMs, now };
+
+  const dispatch = useCallback(
+    (event: VideoRecorderEvent) => {
+      if (!alive.current) return;
+      const step = videoRecorderStep(stateRef.current, event, { limitMs: latest.current.limitMs });
+      stateRef.current = step.state;
+      setState(step.state);
+      step.effects.forEach(run);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  function run(effect: VideoRecorderEffect) {
+    const l = latest.current;
+    switch (effect.type) {
+      case "start": {
+        l.onStart?.();
+        const cam = cameraRef.current;
+        if (!cam) return dispatch({ type: "recorded", at: l.now(), uri: null });
+        cam
+          .recordAsync({ maxDuration: Math.ceil(l.limitMs / 1000) })
+          .then((r) => dispatch({ type: "recorded", at: latest.current.now(), uri: r?.uri ?? null }))
+          .catch(() => dispatch({ type: "recorded", at: latest.current.now(), uri: null }));
+        return;
+      }
+      case "stop":
+        try {
+          cameraRef.current?.stopRecording();
+        } catch {
+          dispatch({ type: "recorded", at: l.now(), uri: null });
+        }
+        return;
+      case "send": {
+        const { contentType, ext } = recordingType(effect.uri);
+        l.onRecorded({ uri: effect.uri, durationMs: effect.durationMs, contentType, name: `video-${Math.round(l.now())}.${ext}` });
+        return;
+      }
+      case "close":
+        l.onClose();
+        return;
+      case "haptic":
+        haptic(modules.haptics, effect.event);
+        return;
+    }
+  }
+
+  // Camera and microphone, asked for when the recorder opens.
+  useEffect(() => {
+    alive.current = true;
+    void Promise.all([camera.Camera.requestCameraPermissionsAsync(), camera.Camera.requestMicrophonePermissionsAsync()])
+      .then(([cam, mic]) => dispatch({ type: "permissions", granted: Boolean(cam?.granted && mic?.granted) }))
+      .catch(() => dispatch({ type: "permissions", granted: false }));
+    return () => {
+      // Closed mid-take (Android back, the app's navigation): the take is thrown away.
+      if (stateRef.current.phase === "recording" || stateRef.current.phase === "stopping") {
+        try {
+          cameraRef.current?.stopRecording();
+        } catch {
+          // Already stopped.
+        }
+      }
+      alive.current = false;
+    };
+  }, [camera, dispatch]);
+
+  // The timer, and the others told about once a second.
+  const recording = state.phase === "recording";
+  useEffect(() => {
+    if (!recording) return;
+    let ticks = 0;
+    const id = setInterval(() => {
+      dispatch({ type: "tick", at: latest.current.now() });
+      if (ticks++ % 4 === 0) latest.current.onTick?.();
+    }, 250);
+    return () => clearInterval(id);
+  }, [recording, dispatch]);
+
+  // The preview says when it's ready (at open, after a flip, after Try again); a camera that never
+  // says so gets the button anyway after a moment, and a take that can't record says that.
+  const starting = state.phase === "starting";
+  useEffect(() => {
+    if (!starting) return;
+    const id = setTimeout(() => dispatch({ type: "camera-ready" }), 1500);
+    return () => clearTimeout(id);
+  }, [starting, state.facing, state.cameraKey, dispatch]);
+
+  // Said out loud on iOS too (a live region is Android only).
+  const noticeText = state.notice === "too-short" ? copy.videoTooShort : state.notice === "take-failed" ? copy.videoTakeFailed : null;
+  const blockedText = state.phase === "denied" ? copy.cameraDenied : state.phase === "failed" ? copy.cameraFailed : null;
+  useEffect(() => {
+    const text = noticeText ?? blockedText;
+    if (text) AccessibilityInfo?.announceForAccessibility?.(text);
+  }, [noticeText, blockedText]);
+
+  const { CameraView } = camera;
+    const blocked = state.phase === "denied" || state.phase === "failed";
+  const canRecord = state.phase === "ready" || recording;
+  const stopping = state.phase === "stopping";
+
+  return (
+    <View testID={`${testID}-body`} style={{ flex: 1, backgroundColor: MEDIA_BACKDROP }}>
+      {state.phase !== "asking" && state.phase !== "denied" ? (
+        <CameraView
+          key={state.cameraKey}
+          ref={cameraRef}
+          testID={`${testID}-camera`}
+          style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }}
+          facing={state.facing}
+          mode="video"
+          videoQuality="720p"
+          onCameraReady={() => dispatch({ type: "camera-ready" })}
+          onMountError={() => dispatch({ type: "camera-failed" })}
+        />
+      ) : null}
+      <SafeAreaView edges={["top", "bottom", "left", "right"]} style={{ flex: 1, justifyContent: "space-between" }}>
+        <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 8, paddingTop: 4 }}>
+          <Pressable
+            testID={`${testID}-close`}
+            accessibilityRole="button"
+            accessibilityLabel={copy.closeRecorder}
+            onPress={() => dispatch({ type: "cancel" })}
+            style={{ width: 44, height: 44, alignItems: "center", justifyContent: "center" }}
+          >
+            <NativeIcon name="close" size={24} color={ON_MEDIA} />
+          </Pressable>
+          {canRecord || stopping ? (
+            <View
+              testID={`${testID}-time`}
+              accessible
+              accessibilityLabel={fill(copy.videoElapsed, { elapsed: formatDuration(state.elapsedMs), limit: formatDuration(limitMs) })}
+              style={{ flexDirection: "row", alignItems: "center", gap: 6, paddingHorizontal: 10, paddingVertical: 4, borderRadius: 14, backgroundColor: MEDIA_SCRIM }}
+            >
+              {recording ? <View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: colors.destructive }} /> : null}
+              <NativeText style={{ color: ON_MEDIA, fontVariant: ["tabular-nums"], fontSize: 15 }}>
+                {fill(copy.videoElapsed, { elapsed: formatDuration(state.elapsedMs), limit: formatDuration(limitMs) })}
+              </NativeText>
+            </View>
+          ) : null}
+          <View style={{ width: 44 }} />
+        </View>
+
+        {blocked ? (
+          <View testID={`${testID}-${state.phase}`} accessibilityLiveRegion="polite" style={{ paddingHorizontal: 32, gap: 16, alignItems: "center" }}>
+            <NativeIcon name="camera" size={40} color={ON_MEDIA} />
+            <NativeText style={{ color: ON_MEDIA, textAlign: "center", fontSize: 17 }}>{state.phase === "denied" ? copy.cameraDenied : copy.cameraFailed}</NativeText>
+            {state.phase === "denied" ? (
+              <NativeButton testID={`${testID}-settings`} variant="secondary" onPress={() => void Linking?.openSettings?.()}>
+                {copy.openSettings}
+              </NativeButton>
+            ) : (
+              <NativeButton testID={`${testID}-retry`} variant="secondary" onPress={() => dispatch({ type: "retry" })}>
+                {copy.tryAgain}
+              </NativeButton>
+            )}
+          </View>
+        ) : null}
+
+        <View style={{ paddingBottom: 16, gap: 12, alignItems: "center" }}>
+          {state.notice ? (
+            <NativeText testID={`${testID}-notice`} accessibilityLiveRegion="polite" style={{ color: ON_MEDIA, textAlign: "center", paddingHorizontal: 24 }}>
+              {noticeText}
+            </NativeText>
+          ) : null}
+          {!blocked ? (
+            <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "center", width: "100%" }}>
+              <View style={{ flex: 1 }} />
+              <Pressable
+                testID={`${testID}-record`}
+                accessibilityRole="button"
+                accessibilityLabel={recording ? copy.stopVideo : copy.startVideo}
+                accessibilityHint={recording ? undefined : copy.recordVideoHint}
+                accessibilityState={{ disabled: !canRecord, busy: stopping }}
+                // A screen reader's double tap is a tap: it starts hands-free, and the next one stops.
+                accessibilityActions={canRecord ? [{ name: "activate" }] : []}
+                onAccessibilityAction={(e) => {
+                  if (e.nativeEvent.actionName !== "activate") return;
+                  const at = latest.current.now();
+                  dispatch({ type: "press", at });
+                  dispatch({ type: "release", at });
+                }}
+                disabled={!canRecord}
+                onPressIn={() => dispatch({ type: "press", at: latest.current.now() })}
+                onPressOut={() => dispatch({ type: "release", at: latest.current.now() })}
+                style={{ width: 84, height: 84, borderRadius: 42, borderWidth: 5, borderColor: ON_MEDIA, alignItems: "center", justifyContent: "center", opacity: canRecord ? 1 : 0.5 }}
+              >
+                <View style={recording ? { width: 30, height: 30, borderRadius: 6, backgroundColor: colors.destructive } : { width: 64, height: 64, borderRadius: 32, backgroundColor: colors.destructive }} />
+              </Pressable>
+              <View style={{ flex: 1, alignItems: "center" }}>
+                <Pressable
+                  testID={`${testID}-flip`}
+                  accessibilityRole="button"
+                  accessibilityLabel={copy.flipCamera}
+                  accessibilityState={{ disabled: recording || stopping }}
+                  disabled={recording || stopping}
+                  onPress={() => dispatch({ type: "flip" })}
+                  style={{ width: 48, height: 48, borderRadius: 24, alignItems: "center", justifyContent: "center", backgroundColor: MEDIA_SCRIM, opacity: recording || stopping ? 0.4 : 1 }}
+                >
+                  <NativeIcon name="camera-flip" size={24} color={ON_MEDIA} />
+                </Pressable>
+              </View>
+            </View>
+          ) : null}
+          {!blocked && !recording ? (
+            <NativeText preset="caption" style={{ color: ON_MEDIA, opacity: 0.85, textAlign: "center", paddingHorizontal: 24 }}>
+              {copy.recordVideoHint}
+            </NativeText>
+          ) : null}
+        </View>
+      </SafeAreaView>
+    </View>
+  );
+}

package/src/native/video-upload-tray.tsx

@@ -0,0 +1,77 @@
+/**
+ * @feat:chat
+ * Videos on their way, above the composer: how far each upload has got, and, when one
+ * fails, why, with Retry (it resumes where it stopped) and Cancel. Once a video's bytes are
+ * all there, its message joins the outbox and shows in the thread like any other.
+ */
+import { useEffect, useRef } from "react";
+import { AccessibilityInfo, Pressable, View } from "react-native";
+import { NativeIcon, NativeProgress, NativeText } from "@marktiderman/genesis-ui-native/components";
+import { useThemeRoles } from "@marktiderman/genesis-ui-native/hooks";
+import { fill } from "./copy";
+import { useChatNative } from "./context";
+import { useVideoUploads, videoUploads as defaultUploads, type VideoUploads } from "./video-upload";
+
+export interface VideoUploadTrayProps {
+  conversationId: string;
+  /** The signed-in person: the tray shows only their uploads. */
+  userId?: string | null;
+  uploads?: VideoUploads;
+  testID?: string;
+}
+
+export function VideoUploadTray({ conversationId, userId = null, uploads = defaultUploads, testID = "chat-video-uploads" }: VideoUploadTrayProps) {
+  const { copy } = useChatNative();
+  const colors = useThemeRoles();
+  const tasks = useVideoUploads(conversationId, userId, uploads);
+  const why = (t: (typeof tasks)[number]) => (t.error === "offline" ? copy.videoOffline : t.error === "forbidden" ? copy.videoForbidden : copy.videoUploadFailed);
+  // A failure is said once, on both platforms (a live region is Android only, and would read every percent).
+  const told = useRef(new Set<string>());
+  const failedNow = tasks.filter((t) => t.status === "failed").map((t) => t.id).join(",");
+  useEffect(() => {
+    for (const t of tasks) {
+      if (t.status === "failed" && !told.current.has(t.id)) {
+        told.current.add(t.id);
+        AccessibilityInfo?.announceForAccessibility?.(why(t));
+      }
+      if (t.status !== "failed") told.current.delete(t.id);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [failedNow]);
+  if (!tasks.length) return null;
+  return (
+    <View testID={testID} style={{ paddingHorizontal: 12, paddingTop: 6, gap: 6, backgroundColor: colors.groupedBackground }}>
+      {tasks.map((t) => {
+        const percent = Math.round(t.progress * 100);
+        const failed = t.status === "failed";
+        return (
+          <View key={t.id} testID={`${testID}-${t.id}`} style={{ flexDirection: "row", alignItems: "center", gap: 8, padding: 8, borderRadius: 12, backgroundColor: colors.surface }}>
+            <NativeIcon name="video" size={20} color={failed ? colors.destructive : colors.tint} />
+            <View
+              style={{ flex: 1, gap: 4 }}
+              accessible
+              accessibilityRole={failed ? "alert" : "progressbar"}
+              accessibilityLabel={failed ? why(t) : fill(copy.videoUploading, { percent })}
+              accessibilityValue={failed ? undefined : { min: 0, max: 100, now: percent }}
+            >
+              <NativeText testID={`${testID}-${t.id}-text`} preset="caption" numberOfLines={2} style={{ color: failed ? colors.destructive : colors.label }}>
+                {failed ? why(t) : fill(copy.videoUploading, { percent })}
+              </NativeText>
+              {failed ? null : <NativeProgress value={percent} testID={`${testID}-${t.id}-progress`} />}
+            </View>
+            {failed ? (
+              <Pressable testID={`${testID}-${t.id}-retry`} accessibilityRole="button" accessibilityLabel={copy.retry} onPress={() => uploads.retry(t.id)} style={{ minHeight: 44, minWidth: 44, paddingHorizontal: 8, alignItems: "center", justifyContent: "center" }}>
+                <NativeText preset="label" style={{ color: colors.tint }}>
+                  {copy.retry}
+                </NativeText>
+              </Pressable>
+            ) : null}
+            <Pressable testID={`${testID}-${t.id}-cancel`} accessibilityRole="button" accessibilityLabel={copy.cancelUpload} onPress={() => uploads.cancel(t.id)} style={{ width: 44, height: 44, alignItems: "center", justifyContent: "center" }}>
+              <NativeIcon name="close" size={18} color={colors.secondaryLabel} />
+            </Pressable>
+          </View>
+        );
+      })}
+    </View>
+  );
+}