feat(mobile/mosques): swipeable hero pager for multi-photo mosques

FlatList pagingEnabled replaces the hero-plus-strip layout so the
whole gallery lives in one swipeable surface; active page indicator
pill overlays at the bottom.

Author: Aqib-Rime

apps/mobile/features/mosques/components/mosque-detail-content.tsx

@@ -9,7 +9,7 @@ import { MosqueDetailTabs, type MosqueTab } from "./mosque-detail-tabs";
 import { MosqueEventsTab } from "./mosque-events-tab";
 import { MosqueMetaRow } from "./mosque-meta-row";
 import { MosqueOverviewTab } from "./mosque-overview-tab";
-import { MosquePhotoHero, MosquePhotoStrip } from "./mosque-photo-gallery";
+import { MosquePhotoHero } from "./mosque-photo-gallery";
 import { MosqueReviewsTab } from "./mosque-reviews-tab";
 
 export function MosqueDetailContent({ data }: { data: MosqueDetail }) {
@@ -51,12 +51,6 @@ export function MosqueDetailContent({ data }: { data: MosqueDetail }) {
         </View>
       </View>
 
-      {mosque.photos.length > 1 ? (
-        <View className="mt-s-5">
-          <MosquePhotoStrip photos={mosque.photos} />
-        </View>
-      ) : null}
-
       <View className="mt-s-5">
         <MosqueDetailTabs active={tab} onChange={setTab} />
       </View>

apps/mobile/features/mosques/components/mosque-photo-gallery.tsx

@@ -1,53 +1,91 @@
 import { Image } from "expo-image";
-import { FlatList, View } from "react-native";
+import { useState } from "react";
+import {
+  Dimensions,
+  FlatList,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  View,
+} from "react-native";
 import { MosqueMark } from "@/components/ui/mosque-mark";
+import { useThemeColors } from "@/lib/theme";
 
 type Props = {
   photos: string[];
 };
 
 export function MosquePhotoHero({ photos }: Props) {
-  const uri = photos[0];
+  const width = Dimensions.get("window").width;
+  const [index, setIndex] = useState(0);
+  const colors = useThemeColors();
 
-  if (!uri) {
+  if (photos.length === 0) {
     return (
       <View className="aspect-[4/3] items-center justify-center bg-green-tint">
         <MosqueMark size="xl" />
       </View>
     );
   }
 
-  return (
-    <View className="aspect-[4/3] bg-line">
-      <Image
-        source={{ uri }}
-        contentFit="cover"
-        style={{ width: "100%", height: "100%" }}
-        transition={200}
-      />
-    </View>
-  );
-}
-
-export function MosquePhotoStrip({ photos }: Props) {
-  const rest = photos.slice(1);
-  if (rest.length === 0) return null;
-
-  return (
-    <FlatList
-      data={rest}
-      keyExtractor={(uri) => uri}
-      horizontal
-      showsHorizontalScrollIndicator={false}
-      contentContainerStyle={{ paddingHorizontal: 24, gap: 8 }}
-      renderItem={({ item }) => (
+  if (photos.length === 1) {
+    return (
+      <View className="aspect-[4/3] bg-line">
         <Image
-          source={{ uri: item }}
+          source={{ uri: photos[0] }}
           contentFit="cover"
-          style={{ width: 120, height: 88, borderRadius: 8 }}
+          style={{ width: "100%", height: "100%" }}
           transition={200}
         />
-      )}
-    />
+      </View>
+    );
+  }
+
+  const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const next = Math.round(e.nativeEvent.contentOffset.x / width);
+    if (next !== index) setIndex(next);
+  };
+
+  return (
+    <View className="aspect-[4/3] bg-line">
+      <FlatList
+        data={photos}
+        keyExtractor={(uri) => uri}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        onScroll={onScroll}
+        scrollEventThrottle={16}
+        renderItem={({ item }) => (
+          <View style={{ width, aspectRatio: 4 / 3 }}>
+            <Image
+              source={{ uri: item }}
+              contentFit="cover"
+              style={{ width: "100%", height: "100%" }}
+              transition={200}
+            />
+          </View>
+        )}
+      />
+
+      <View
+        pointerEvents="none"
+        className="absolute inset-x-0 bottom-s-3 flex-row justify-center gap-s-1"
+      >
+        {photos.map((uri, i) => {
+          const active = i === index;
+          return (
+            <View
+              key={uri}
+              style={{
+                width: active ? 18 : 6,
+                height: 6,
+                borderRadius: 3,
+                backgroundColor: active ? colors.white : `${colors.white}80`,
+              }}
+            />
+          );
+        })}
+      </View>
+    </View>
   );
 }