fix(painting-viewer): restore native swipe-down dismissal

src/app/_layout.tsx

@@ -99,6 +99,7 @@ function RootStack() {
           // photo rather than on a themed surface: black behind, white on top,
           // in both themes. `PaintingViewerChrome` paints the same pair.
           contentStyle: { backgroundColor: constantBlack },
+          headerShown: !isIOS,
           headerTintColor: constantWhite,
           headerTransparent: true,
           title: '',

src/frontend/features/paintings/PaintingViewerScreen/PaintingViewerScreen.tsx

@@ -12,7 +12,7 @@ import {
   useResolvedPaintingFiles,
 } from '../hooks/usePaintings';
 import { PaintingViewerChrome } from './components/PaintingViewerChrome';
-import { ViewerImage } from './components/ViewerImage';
+import { PaintingViewerImage } from './components/PaintingViewerImage';
 import { usePaintingViewerActions } from './hooks/usePaintingViewerActions';
 
 export function PaintingViewerScreen() {
@@ -73,7 +73,7 @@ function PaintingViewerContent({
         onViewConversation={actions.viewConversation}
       />
       <View className="flex-1">
-        <ViewerImage uri={current.uri} />
+        <PaintingViewerImage uri={current.uri} />
       </View>
     </>
   );

src/frontend/features/paintings/PaintingViewerScreen/components/PaintingViewerImage.android.tsx

@@ -0,0 +1,6 @@
+import type { PaintingViewerImageProps } from './PaintingViewerImage.types';
+import { ViewerImage } from './ViewerImage';
+
+export function PaintingViewerImage({ uri }: PaintingViewerImageProps) {
+  return <ViewerImage uri={uri} />;
+}

src/frontend/features/paintings/PaintingViewerScreen/components/PaintingViewerImage.ios.tsx

@@ -0,0 +1,16 @@
+import { Stack } from 'expo-router';
+import { useState } from 'react';
+
+import type { PaintingViewerImageProps } from './PaintingViewerImage.types';
+import { ViewerImage } from './ViewerImage';
+
+export function PaintingViewerImage({ uri }: PaintingViewerImageProps) {
+  const [isImageZoomed, setIsImageZoomed] = useState(false);
+
+  return (
+    <>
+      <Stack.Screen options={{ gestureEnabled: !isImageZoomed }} />
+      <ViewerImage onZoomChange={setIsImageZoomed} uri={uri} />
+    </>
+  );
+}

src/frontend/features/paintings/PaintingViewerScreen/components/PaintingViewerImage.tsx

@@ -0,0 +1,2 @@
+export { PaintingViewerImage } from './PaintingViewerImage.android';
+export type { PaintingViewerImageProps } from './PaintingViewerImage.types';

src/frontend/features/paintings/PaintingViewerScreen/components/PaintingViewerImage.types.ts

@@ -0,0 +1,3 @@
+export type PaintingViewerImageProps = {
+  uri: string;
+};

src/frontend/features/paintings/PaintingViewerScreen/components/ViewerImage.tsx

@@ -7,14 +7,22 @@ import { ZoomableImage } from './ZoomableImage';
 
 // Use the measured container height because `100%` is not reliable through the
 // shared-element transition wrapper.
-export function ViewerImage({ uri }: { uri: string }) {
+export function ViewerImage({
+  onZoomChange,
+  uri,
+}: {
+  onZoomChange?: (isZoomed: boolean) => void;
+  uri: string;
+}) {
   const { width } = useWindowDimensions();
   const [height, setHeight] = useState(0);
 
   return (
     <PaintingZoomTarget>
       <View className="flex-1" onLayout={({ nativeEvent }) => setHeight(nativeEvent.layout.height)}>
-        {height > 0 ? <ZoomableImage height={height} uri={uri} width={width} /> : null}
+        {height > 0 ? (
+          <ZoomableImage height={height} onZoomChange={onZoomChange} uri={uri} width={width} />
+        ) : null}
       </View>
     </PaintingZoomTarget>
   );

src/frontend/features/paintings/PaintingViewerScreen/components/ZoomableImage.tsx

@@ -18,10 +18,12 @@ const DOUBLE_TAP_SCALE = 2.5;
 // rest so it does not compete with the navigation gesture.
 export function ZoomableImage({
   height,
+  onZoomChange,
   uri,
   width,
 }: {
   height: number;
+  onZoomChange?: (isZoomed: boolean) => void;
   uri: string;
   width: number;
 }) {
@@ -35,6 +37,11 @@ export function ZoomableImage({
   const savedX = useSharedValue(0);
   const savedY = useSharedValue(0);
 
+  const updateZoomState = (nextIsZoomed: boolean) => {
+    setIsZoomed(nextIsZoomed);
+    onZoomChange?.(nextIsZoomed);
+  };
+
   const clampTranslate = () => {
     'worklet';
     const maxX = (width * (scale.value - 1)) / 2;
@@ -45,13 +52,16 @@ export function ZoomableImage({
 
   const resetZoom = () => {
     'worklet';
-    scale.value = withTiming(1);
+    scale.value = withTiming(1, undefined, (finished) => {
+      if (finished) {
+        runOnJS(updateZoomState)(false);
+      }
+    });
     savedScale.value = 1;
     translateX.value = withTiming(0);
     translateY.value = withTiming(0);
     savedX.value = 0;
     savedY.value = 0;
-    runOnJS(setIsZoomed)(false);
   };
 
   const pinch = Gesture.Pinch()
@@ -69,7 +79,7 @@ export function ZoomableImage({
       clampTranslate();
       savedX.value = translateX.value;
       savedY.value = translateY.value;
-      runOnJS(setIsZoomed)(true);
+      runOnJS(updateZoomState)(true);
     });
 
   const pan = Gesture.Pan()
@@ -107,7 +117,7 @@ export function ZoomableImage({
       translateY.value = withTiming(targetY);
       savedX.value = targetX;
       savedY.value = targetY;
-      runOnJS(setIsZoomed)(true);
+      runOnJS(updateZoomState)(true);
     });
 
   const gesture = Gesture.Race(doubleTap, Gesture.Simultaneous(pinch, pan));