@planningcenter/chat-react-native 3.12.0-rc.0 → 3.12.0-rc.10

package/build/components/conversation/attachments/attachment_card.js

@@ -29,6 +29,7 @@ const useStyles = () => {
         title: {
             color: colors.textColorDefaultPrimary,
             fontSize: tokens.fontSizeSm,
+            flex: 1,
         },
     });
 };

package/build/components/conversation/attachments/attachment_card.js.map

@@ -1 +1 @@
-{"version":3,"file":"attachment_card.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/attachment_card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAIzC,MAAM,UAAU,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAuB;IACxE,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,CAClC;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,EAAE,QAAQ,EAA2B;IACvE,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,CAC7D;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC;YACV,eAAe,EAAE,MAAM,CAAC,eAAe;YACvC,YAAY,EAAE,CAAC;YACf,QAAQ,EAAE,MAAM;YAChB,SAAS,EAAE,EAAE;YACb,cAAc,EAAE,QAAQ;SACzB;QACD,KAAK,EAAE;YACL,KAAK,EAAE,MAAM,CAAC,uBAAuB;YACrC,QAAQ,EAAE,MAAM,CAAC,UAAU;SAC5B;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React, { ComponentProps, ReactNode } from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { Text } from '../../display'\nimport { tokens } from '../../../vendor/tapestry/tokens'\nimport { useTheme } from '../../../hooks'\n\ntype AttachmentCardProps = ComponentProps<typeof View>\n\nexport function AttachmentCard({ children, ...props }: AttachmentCardProps) {\n  const styles = useStyles()\n\n  return (\n    <View style={styles.card} {...props}>\n      {children}\n    </View>\n  )\n}\n\nexport function AttachmentCardTitle({ children }: { children: ReactNode }) {\n  const styles = useStyles()\n\n  return (\n    <Text style={styles.title} numberOfLines={1} selectable={false}>\n      {children}\n    </Text>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    card: {\n      padding: 8,\n      backgroundColor: colors.surfaceColor100,\n      borderRadius: 8,\n      minWidth: '100%',\n      minHeight: 60,\n      justifyContent: 'center',\n    },\n    title: {\n      color: colors.textColorDefaultPrimary,\n      fontSize: tokens.fontSizeSm,\n    },\n  })\n}\n"]}
+{"version":3,"file":"attachment_card.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/attachment_card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAIzC,MAAM,UAAU,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAuB;IACxE,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,CAClC;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,EAAE,QAAQ,EAA2B;IACvE,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,CAC7D;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC;YACV,eAAe,EAAE,MAAM,CAAC,eAAe;YACvC,YAAY,EAAE,CAAC;YACf,QAAQ,EAAE,MAAM;YAChB,SAAS,EAAE,EAAE;YACb,cAAc,EAAE,QAAQ;SACzB;QACD,KAAK,EAAE;YACL,KAAK,EAAE,MAAM,CAAC,uBAAuB;YACrC,QAAQ,EAAE,MAAM,CAAC,UAAU;YAC3B,IAAI,EAAE,CAAC;SACR;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React, { ComponentProps, ReactNode } from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { Text } from '../../display'\nimport { tokens } from '../../../vendor/tapestry/tokens'\nimport { useTheme } from '../../../hooks'\n\ntype AttachmentCardProps = ComponentProps<typeof View>\n\nexport function AttachmentCard({ children, ...props }: AttachmentCardProps) {\n  const styles = useStyles()\n\n  return (\n    <View style={styles.card} {...props}>\n      {children}\n    </View>\n  )\n}\n\nexport function AttachmentCardTitle({ children }: { children: ReactNode }) {\n  const styles = useStyles()\n\n  return (\n    <Text style={styles.title} numberOfLines={1} selectable={false}>\n      {children}\n    </Text>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    card: {\n      padding: 8,\n      backgroundColor: colors.surfaceColor100,\n      borderRadius: 8,\n      minWidth: '100%',\n      minHeight: 60,\n      justifyContent: 'center',\n    },\n    title: {\n      color: colors.textColorDefaultPrimary,\n      fontSize: tokens.fontSizeSm,\n      flex: 1,\n    },\n  })\n}\n"]}

package/build/components/conversation/attachments/image_attachment.d.ts

@@ -4,8 +4,10 @@ export type MetaProps = {
     authorName: string;
     createdAt: string;
 };
-export declare function ImageAttachment({ attachment, metaProps, onMessageAttachmentLongPress, }: {
+export declare function ImageAttachment({ attachment, imageAttachments, currentImageIndex, metaProps, onMessageAttachmentLongPress, }: {
     attachment: DenormalizedMessageAttachmentResource;
+    imageAttachments: DenormalizedMessageAttachmentResource[];
+    currentImageIndex: number;
     metaProps: MetaProps;
     onMessageAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void;
 }): React.JSX.Element;

package/build/components/conversation/attachments/image_attachment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image_attachment.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/image_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAA;AAoB1E,OAAO,EAAE,qCAAqC,EAAE,MAAM,2DAA2D,CAAA;AAkBjH,MAAM,MAAM,SAAS,GAAG;IACtB,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,SAAS,EACT,4BAA4B,GAC7B,EAAE;IACD,UAAU,EAAE,qCAAqC,CAAA;IACjD,SAAS,EAAE,SAAS,CAAA;IACpB,4BAA4B,EAAE,CAAC,UAAU,EAAE,qCAAqC,KAAK,IAAI,CAAA;CAC1F,qBAkCA"}
+{"version":3,"file":"image_attachment.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/image_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAA;AAkCvF,OAAO,EAAE,qCAAqC,EAAE,MAAM,2DAA2D,CAAA;AAwBjH,MAAM,MAAM,SAAS,GAAG;IACtB,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,SAAS,EACT,4BAA4B,GAC7B,EAAE;IACD,UAAU,EAAE,qCAAqC,CAAA;IACjD,gBAAgB,EAAE,qCAAqC,EAAE,CAAA;IACzD,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,EAAE,SAAS,CAAA;IACpB,4BAA4B,EAAE,CAAC,UAAU,EAAE,qCAAqC,KAAK,IAAI,CAAA;CAC1F,qBAyCA"}

package/build/components/conversation/attachments/image_attachment.js

@@ -1,17 +1,23 @@
-import React, { useMemo, useState } from 'react';
-import { StatusBar, StyleSheet, Modal, View, Linking, Dimensions } from 'react-native';
+import React, { useMemo, useState, useCallback } from 'react';
+import { StatusBar, StyleSheet, Modal, View, Linking, Dimensions, Platform, } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Gesture, GestureDetector, GestureHandlerRootView, Pressable, } from 'react-native-gesture-handler';
-import { runOnJS, useAnimatedStyle, useSharedValue, withSpring, withDecay, } from 'react-native-reanimated';
+import { FlatList, Gesture, GestureDetector, GestureHandlerRootView, Pressable, } from 'react-native-gesture-handler';
+import Animated, { runOnJS, useAnimatedStyle, useAnimatedReaction, useSharedValue, withSpring, withDecay, } from 'react-native-reanimated';
 import { tokens } from '../../../vendor/tapestry/tokens';
 import { IconButton, Image, Heading, Text } from '../../display';
 import colorFunction from 'color';
 import { formatDatePreview } from '../../../utils/date';
 import { PlatformPressable } from '@react-navigation/elements';
 import { useTheme } from '../../../hooks';
+import { platformFontWeightMedium } from '../../../utils';
 const { width: WINDOW_WIDTH, height: WINDOW_HEIGHT } = Dimensions.get('window');
-const DISMISS_PAN_THRESHOLD = 300;
+const DISMISS_PAN_THRESHOLD = 250;
+const MIN_DISTANCE_FOR_PAN = 10; // Higher threshold gives pinching priority
+const SINGLE_FINGER_POINTER = 1; // Single-finger panning / tapping helps to avoid conflicts with pinching
+const MAX_TRAVEL_DISTANCE_FOR_DOUBLE_TAP_PLATFORM = Platform.OS === 'ios' ? 8 : 0; // Causes taps to be unreliable on Android
 const DEFAULT_OPACITY = 1;
+const DEFAULT_TRANSLATE_X = 0;
+const DEFAULT_TRANSLATE_Y = 0;
 const DEFAULT_SCALE = 1;
 const MIN_SCALE = 0.5;
 const MAX_SCALE = 5;
@@ -22,65 +28,104 @@ const RESET_SPRING_CONFIG = {
     damping: 20,
     stiffness: 150,
 };
-export function ImageAttachment({ attachment, metaProps, onMessageAttachmentLongPress, }) {
+export function ImageAttachment({ attachment, imageAttachments, currentImageIndex, metaProps, onMessageAttachmentLongPress, }) {
     const { attributes } = attachment;
     const { url, urlMedium, filename, metadata = {} } = attributes;
     const { colors } = useTheme();
     const styles = useStyles({ imageWidth: metadata.width, imageHeight: metadata.height });
     const [visible, setVisible] = useState(false);
+    // Force modal to remount with fresh state
+    // Fixes a bug where dismissing the modal too quickly causes the Reanimated shared values (like toolbarVisible) to not reset.
+    const [modalKey, setModalKey] = useState(0);
     return (<>
-      <PlatformPressable style={styles.container} onPress={() => setVisible(true)} onLongPress={() => onMessageAttachmentLongPress(attachment)} android_ripple={{ color: colors.androidRippleNeutral, foreground: true }} accessibilityHint="Long press for more options">
-        <Image source={{ uri: urlMedium || url }} style={styles.image} wrapperStyle={styles.imageWrapper} alt={filename}/>
+      <PlatformPressable style={styles.container} onPress={() => {
+            setModalKey(prev => prev + 1);
+            setVisible(true);
+        }} onLongPress={() => onMessageAttachmentLongPress(attachment)} android_ripple={{ color: colors.androidRippleNeutral, foreground: true }} accessibilityHint="Long press for more options">
+        <Image source={{ uri: urlMedium || url }} style={styles.image} wrapperStyle={styles.attachmentImageWrapper} alt={filename}/>
       </PlatformPressable>
-      <LightboxModal visible={visible} setModalVisible={setVisible} uri={urlMedium || url} metaProps={metaProps} imageWidth={metadata.width} imageHeight={metadata.height}/>
+      <LightboxModal key={modalKey} visible={visible} setModalVisible={setVisible} imageAttachments={imageAttachments} initialImageIndex={currentImageIndex} metaProps={metaProps}/>
     </>);
 }
-const LightboxModal = ({ uri, visible, setModalVisible, metaProps, imageWidth, imageHeight, }) => {
+const LightboxModal = ({ visible, setModalVisible, imageAttachments, initialImageIndex, metaProps, }) => {
     const styles = useStyles();
     const insets = useSafeAreaInsets();
-    const { authorName, createdAt } = metaProps;
+    const [currentImageIndex, setCurrentImageIndex] = useState(initialImageIndex);
+    // Get current image data
+    const currentImage = imageAttachments[currentImageIndex];
+    const { url, urlMedium, metadata = {} } = currentImage.attributes;
+    const imageWidth = metadata.width;
+    const imageHeight = metadata.height;
     // Calculate available space for image display
     const availableWindowWidth = WINDOW_WIDTH;
     const availableWindowHeight = WINDOW_HEIGHT - insets.top - insets.bottom;
     /* ============================
      ANIMATION VALUES
     ============================ */
+    // Native State:
     const dismissY = useSharedValue(0); // vertical distance to dismiss modal
     const opacity = useSharedValue(DEFAULT_OPACITY); // opacity of modal
     const scale = useSharedValue(DEFAULT_SCALE); // zoom level of image
     const focalX = useSharedValue(0); // focal point of image between fingers
     const focalY = useSharedValue(0); // focal point of image between fingers
-    const translateX = useSharedValue(0); // horizontal distance to pan image
-    const translateY = useSharedValue(0); // vertical distance to pan image
+    const translateX = useSharedValue(DEFAULT_TRANSLATE_X); // horizontal distance to pan image
+    const translateY = useSharedValue(DEFAULT_TRANSLATE_Y); // vertical distance to pan image
     const savedScale = useSharedValue(DEFAULT_SCALE); // previous zoom level
-    const savedTranslateX = useSharedValue(0); // previous horizontal position
-    const savedTranslateY = useSharedValue(0); // previous vertical position
+    const savedTranslateX = useSharedValue(DEFAULT_TRANSLATE_X); // previous horizontal position
+    const savedTranslateY = useSharedValue(DEFAULT_TRANSLATE_Y); // previous vertical position
+    const lightboxToolbarVisible = useSharedValue(1); // toolbar visibility state
+    // React (JS) State:
+    const [isStatusBarHidden, setIsStatusBarHidden] = useState(false);
+    const [flatListScrollEnabled, setFlatListScrollEnabled] = useState(true);
+    const [panGestureEnabled, setPanGestureEnabled] = useState(false);
+    // Syncs toolbar useSharedValue state with React's state so that the status bar can be hidden/shown based on the toolbar's animation
+    useAnimatedReaction(() => lightboxToolbarVisible.value, value => {
+        runOnJS(setIsStatusBarHidden)(value === 0);
+    });
+    // Syncs FlatList scroll state with scale changes
+    // When image is at default scale, enable scroll and disable pan gesture
+    // When image is zoomed in, disable scroll and enable pan gesture
+    useAnimatedReaction(() => scale.value, value => {
+        const enableFlatListScroll = value === DEFAULT_SCALE;
+        runOnJS(setFlatListScrollEnabled)(enableFlatListScroll);
+        runOnJS(setPanGestureEnabled)(!enableFlatListScroll);
+    });
     /* ============================
      HANDLERS
     ============================ */
-    const handleOpenInBrowser = () => {
-        Linking.openURL(uri);
-    };
-    const resetDismissGestures = () => {
+    const handleOpenInBrowser = useCallback(() => {
+        Linking.openURL(urlMedium || url);
+    }, [urlMedium, url]);
+    const resetDismissGestures = useCallback(() => {
         dismissY.value = withSpring(0, RESET_SPRING_CONFIG);
         opacity.value = withSpring(DEFAULT_OPACITY, RESET_SPRING_CONFIG);
-    };
-    const resetAllGestures = () => {
+    }, [dismissY, opacity]);
+    const resetAllGestures = useCallback(() => {
         resetDismissGestures();
         scale.value = withSpring(DEFAULT_SCALE, RESET_SPRING_CONFIG);
-        translateX.value = withSpring(0, RESET_SPRING_CONFIG);
-        translateY.value = withSpring(0, RESET_SPRING_CONFIG);
+        translateX.value = withSpring(DEFAULT_TRANSLATE_X, RESET_SPRING_CONFIG);
+        translateY.value = withSpring(DEFAULT_TRANSLATE_Y, RESET_SPRING_CONFIG);
         savedScale.value = DEFAULT_SCALE;
-        savedTranslateX.value = 0;
-        savedTranslateY.value = 0;
-    };
-    const handleCloseModal = () => {
+        savedTranslateX.value = DEFAULT_TRANSLATE_X;
+        savedTranslateY.value = DEFAULT_TRANSLATE_Y;
+        lightboxToolbarVisible.value = withSpring(1, RESET_SPRING_CONFIG);
+    }, [
+        resetDismissGestures,
+        scale,
+        translateX,
+        translateY,
+        savedScale,
+        savedTranslateX,
+        savedTranslateY,
+        lightboxToolbarVisible,
+    ]);
+    const handleCloseModal = useCallback(() => {
         setModalVisible(false);
         resetAllGestures();
-    };
+    }, [setModalVisible, resetAllGestures]);
     /* ============================
-     UTILITY FUNCTIONS
-     'worklet' runs functions on the UI thread, instead of the JS thread for better performance
+     UTILITY WORKLET FUNCTIONS
+     'worklet' runs functions on the UI thread, instead of the JS thread for better performance.
     ============================ */
     const getImageContainedToWindowDimensions = () => {
         'worklet';
@@ -129,8 +174,8 @@ const LightboxModal = ({ uri, visible, setModalVisible, metaProps, imageWidth, i
         const excessWidth = scaledWidth - availableWindowWidth;
         const excessHeight = scaledHeight - availableWindowHeight;
         // How far the image can move in each direction before hitting window edges
-        const maxTranslateX = Math.max(0, excessWidth / 2);
-        const maxTranslateY = Math.max(0, excessHeight / 2);
+        const maxTranslateX = Math.max(DEFAULT_TRANSLATE_X, excessWidth / 2);
+        const maxTranslateY = Math.max(DEFAULT_TRANSLATE_Y, excessHeight / 2);
         return { maxTranslateX, maxTranslateY };
     };
     const clampDecay = (currentScale) => {
@@ -155,17 +200,62 @@ const LightboxModal = ({ uri, visible, setModalVisible, metaProps, imageWidth, i
         // Calculate how much the image can exceed the window container
         const scaledHeight = containedImageHeight * currentScale;
         const excessHeight = scaledHeight - availableWindowHeight;
-        const maxTranslateY = Math.max(0, excessHeight / 2);
+        const maxTranslateY = Math.max(DEFAULT_TRANSLATE_Y, excessHeight / 2);
         const currentTranslateY = translateY.value;
         const panPositionTolerance = 1; // buffer to account for translateY being at a subpixel position
         const atTopBoundry = currentTranslateY >= maxTranslateY - panPositionTolerance;
         const atBottomBoundry = currentTranslateY <= -maxTranslateY + panPositionTolerance;
         return atTopBoundry || atBottomBoundry;
     };
+    /* ============================
+     UTILITY FLATLIST FUNCTIONS
+     Supports the image gallery layout and swipe functionality.
+    ============================ */
+    // Used in tandem with FlatList's initialScrollIndex to quickly calculate the position and size of each image before they load.
+    const getItemLayout = useCallback((_, index) => ({
+        length: WINDOW_WIDTH,
+        offset: WINDOW_WIDTH * index,
+        index,
+    }), []);
+    // Captures the current image's index after the FlatList finishes its scroll animation.
+    // Used in tandem with onViewableItemsChanged to ensure the final value for currentImageIndex is set.
+    const onMomentumScrollEnd = useCallback((event) => {
+        // Calculate the index of the image that is currently visible
+        const imageOffsetX = event.nativeEvent.contentOffset.x;
+        const newImageIndex = Math.round(imageOffsetX / WINDOW_WIDTH);
+        // Check if the image index has changed and the FlatList didn't scroll past the first or last image
+        const didImageIndexChange = newImageIndex !== currentImageIndex;
+        const isImageIndexWithinBounds = newImageIndex >= 0 && newImageIndex < imageAttachments.length;
+        if (didImageIndexChange && isImageIndexWithinBounds) {
+            setCurrentImageIndex(newImageIndex);
+        }
+    }, [currentImageIndex, imageAttachments.length]);
+    // Supplements onMomentumScrollEnd by capturing the current image's index while the FlatList is actively scrolling.
+    // Used in tandem with viewabilityConfig to trigger when the image is 50% visible in the window.
+    const onViewableItemsChanged = useCallback(({ viewableItems }) => {
+        if (viewableItems.length === 0)
+            return;
+        // Use the first viewable item which is enforced by the FlatList's pagingEnabled prop that allows only two images to be visible at a time when scrolling.
+        const firstViewableItem = viewableItems[0];
+        const newIndex = firstViewableItem.index;
+        if (newIndex !== null && newIndex !== currentImageIndex) {
+            setCurrentImageIndex(newIndex);
+        }
+    }, [currentImageIndex]);
     /* ============================
      GESTURES
     ============================ */
+    const singleTapGesture = Gesture.Tap()
+        .minPointers(SINGLE_FINGER_POINTER)
+        .numberOfTaps(1)
+        .onStart(() => {
+        lightboxToolbarVisible.value = withSpring(lightboxToolbarVisible.value > 0.5 ? 0 : 1, RESET_SPRING_CONFIG);
+    });
     const doubleTapGesture = Gesture.Tap()
+        .maxDeltaX(MAX_TRAVEL_DISTANCE_FOR_DOUBLE_TAP_PLATFORM)
+        .maxDeltaY(MAX_TRAVEL_DISTANCE_FOR_DOUBLE_TAP_PLATFORM)
+        .maxDistance(MAX_TRAVEL_DISTANCE_FOR_DOUBLE_TAP_PLATFORM)
+        .minPointers(SINGLE_FINGER_POINTER)
         .numberOfTaps(2)
         .onStart(e => {
         const isZoomedIn = scale.value > DEFAULT_SCALE;
@@ -173,6 +263,8 @@ const LightboxModal = ({ uri, visible, setModalVisible, metaProps, imageWidth, i
             runOnJS(resetAllGestures)();
         }
         else {
+            // Hide toolbar when starting to zoom
+            lightboxToolbarVisible.value = withSpring(0, RESET_SPRING_CONFIG);
             // Zoom to 2x at tap location
             const newTranslation = zoomToFocalPoint({
                 focalPointX: e.x,
@@ -202,6 +294,8 @@ const LightboxModal = ({ uri, visible, setModalVisible, metaProps, imageWidth, i
         .onStart(e => {
         focalX.value = e.focalX;
         focalY.value = e.focalY;
+        // Hide toolbar when starting to zoom
+        lightboxToolbarVisible.value = withSpring(0, RESET_SPRING_CONFIG);
         // Ensure that pinch accounts for the decay animation and starts from the true current position.
         savedTranslateX.value = translateX.value;
         savedTranslateY.value = translateY.value;
@@ -264,6 +358,10 @@ const LightboxModal = ({ uri, visible, setModalVisible, metaProps, imageWidth, i
         savedTranslateY.value = clampedTranslate.y;
     });
     const panGesture = Gesture.Pan()
+        .minDistance(MIN_DISTANCE_FOR_PAN)
+        .minPointers(SINGLE_FINGER_POINTER)
+        .maxPointers(SINGLE_FINGER_POINTER)
+        .enabled(panGestureEnabled)
         .onStart(() => {
         // Update saved position to current animated position
         // This ensures smooth continuation if decay is running
@@ -316,12 +414,15 @@ const LightboxModal = ({ uri, visible, setModalVisible, metaProps, imageWidth, i
         const atVerticalBoundry = isImageAtVerticalBoundry(scale.value);
         const panDirectionIsPrimarilyVertical = Math.abs(e.translationY) > Math.abs(e.translationX);
         const canDismissWhileZoomed = atVerticalBoundry && panDirectionIsPrimarilyVertical;
-        if (atDefaultScale || canDismissWhileZoomed) {
-            const panDistance = Math.abs(e.translationY);
-            const fadeProgress = panDistance / DISMISS_PAN_THRESHOLD;
-            opacity.value = Math.max(0, DEFAULT_OPACITY - fadeProgress);
-            dismissY.value = e.translationY;
-        }
+        if (!(atDefaultScale || canDismissWhileZoomed))
+            return;
+        // Fade image if its been panned past 50% of the dismiss threshold
+        const panDistance = Math.abs(e.translationY);
+        const halfThreshold = DISMISS_PAN_THRESHOLD / 2;
+        const fadeDistance = Math.max(0, panDistance - halfThreshold);
+        const fadeProgress = fadeDistance / halfThreshold;
+        opacity.value = Math.max(0, DEFAULT_OPACITY - fadeProgress);
+        dismissY.value = e.translationY;
     })
         .onEnd(() => {
         const exceededDismissThreshold = Math.abs(dismissY.value) > DISMISS_PAN_THRESHOLD;
@@ -333,45 +434,29 @@ const LightboxModal = ({ uri, visible, setModalVisible, metaProps, imageWidth, i
         }
     });
     /* ==============================
-     IMPLEMENT GESTURES & ANIMATIONS
+     COMPOSE GESTURES
     ================================= */
-    // Race between pinch and pan ensures only one is active at a time, preventing issues with zooming to focal point between fingers
+    // Race between pinch and pan ensures only one is active at a time, preserving focal point logic
     const pinchOrPanGestures = Gesture.Race(pinchGesture, panGesture);
-    // Race between double-tap and pinch/pan ensures that pinch/pan can't interrupt double-tap
-    const transformImageGestures = Gesture.Race(doubleTapGesture, pinchOrPanGestures);
+    // Exclusive race ensures single tap doesn't interfere with double tap
+    const tapGestures = Gesture.Exclusive(doubleTapGesture, singleTapGesture);
+    // Race between tap gestures and pinch/pan
+    const transformImageGestures = Gesture.Race(tapGestures, pinchOrPanGestures);
     // Dismiss can work simultaneously with all gestures
     const composedGesture = Gesture.Simultaneous(transformImageGestures, panToDismissModalGesture);
-    const animatedImageStyles = useAnimatedStyle(() => ({
-        transform: [
-            { translateX: translateX.value },
-            { translateY: translateY.value + dismissY.value },
-            { scale: scale.value },
-        ],
-        opacity: opacity.value,
-    }));
     return (<Modal visible={visible} transparent animationType="fade" onRequestClose={handleCloseModal}>
-      <StatusBar barStyle="light-content"/>
-      <View style={styles.lightboxModalSafeArea}>
-        <GestureHandlerRootView>
-          <GestureDetector gesture={composedGesture}>
-            <PreventPressEventsBubbling>
-              <Image source={{ uri }} loadingBackgroundStyles={styles.lightboxImageLoading} style={styles.lightboxImage} animatedImageStyle={animatedImageStyles} resizeMode="contain" animated={true} alt=""/>
-            </PreventPressEventsBubbling>
-          </GestureDetector>
-        </GestureHandlerRootView>
-      </View>
-      <View style={styles.actionToolbar} accessibilityRole="toolbar">
-        <View style={styles.actionToolbarTextMeta}>
-          <Heading variant="h3" style={styles.actionToolbarTitle} numberOfLines={1}>
-            {authorName}
-          </Heading>
-          <Text variant="tertiary" style={styles.actionToolbarSubtitle}>
-            {formatDatePreview(createdAt)}
-          </Text>
-        </View>
-        <IconButton onPress={handleOpenInBrowser} name="general.newWindow" accessibilityRole="link" accessibilityLabel="Open image in browser" accessibilityHint="Image can be downloaded and shared through the browser." style={styles.actionButton} iconStyle={styles.actionButtonIcon} size="lg"/>
-        <IconButton onPress={handleCloseModal} name="general.x" accessibilityLabel="Close image" style={styles.actionButton} iconStyle={styles.actionButtonIcon} size="lg"/>
-      </View>
+      <StatusBar barStyle="light-content" hidden={isStatusBarHidden} animated showHideTransition="slide"/>
+      <GestureHandlerRootView>
+        <GestureDetector gesture={composedGesture}>
+          <PreventPressEventsBubbling>
+            <FlatList data={imageAttachments} renderItem={({ item, index }) => (<GestureImage item={item} gesturesEnabled={index === currentImageIndex} scale={scale} translateX={translateX} translateY={translateY} dismissY={dismissY} opacity={opacity}/>)} keyExtractor={(item, index) => `${item.id}-${index}`} horizontal pagingEnabled scrollEnabled={flatListScrollEnabled} showsHorizontalScrollIndicator={false} initialScrollIndex={initialImageIndex} getItemLayout={getItemLayout} onMomentumScrollEnd={onMomentumScrollEnd} onViewableItemsChanged={onViewableItemsChanged} viewabilityConfig={{
+            itemVisiblePercentThreshold: 50, // 50% of the image must be visible in the window to be considered viewable
+        }} style={styles.gallery} contentContainerStyle={styles.galleryContentContainer}/>
+          </PreventPressEventsBubbling>
+        </GestureDetector>
+      </GestureHandlerRootView>
+      <LightboxToolbarHeader metaProps={metaProps} lightboxToolbarVisible={lightboxToolbarVisible} isStatusBarHidden={isStatusBarHidden} handleOpenInBrowser={handleOpenInBrowser} handleCloseModal={handleCloseModal}/>
+      {imageAttachments.length > 1 && (<LightboxToolbarFooter lightboxToolbarVisible={lightboxToolbarVisible} totalImages={imageAttachments.length} currentImageIndex={currentImageIndex}/>)}
     </Modal>);
 };
 const PreventPressEventsBubbling = ({ children }) => {
@@ -379,6 +464,57 @@ const PreventPressEventsBubbling = ({ children }) => {
       {children}
     </Pressable>);
 };
+const GestureImage = ({ item, gesturesEnabled, scale, translateX, translateY, dismissY, opacity, }) => {
+    const styles = useStyles();
+    const { url: itemUrl, urlMedium: itemUrlMedium } = item.attributes;
+    const animatedImageStyles = useAnimatedStyle(() => {
+        return {
+            transform: [
+                { translateX: gesturesEnabled ? translateX.value : DEFAULT_TRANSLATE_X },
+                { translateY: gesturesEnabled ? translateY.value + dismissY.value : DEFAULT_TRANSLATE_Y },
+                { scale: gesturesEnabled ? scale.value : DEFAULT_SCALE },
+            ],
+            opacity: opacity.value,
+        };
+    });
+    return (<Image source={{ uri: itemUrlMedium || itemUrl }} style={styles.gestureImage} animatedImageStyle={animatedImageStyles} loadingBackgroundStyles={styles.gestureImageLoading} resizeMode="contain" alt=""/>);
+};
+const LightboxToolbarHeader = ({ metaProps, lightboxToolbarVisible, isStatusBarHidden, handleOpenInBrowser, handleCloseModal, }) => {
+    const styles = useStyles();
+    const { authorName, createdAt } = metaProps;
+    const animatedHeaderStyles = useAnimatedStyle(() => ({
+        opacity: lightboxToolbarVisible.value,
+        transform: [
+            { translateY: (1 - lightboxToolbarVisible.value) * -20 }, // slide up when hiding
+        ],
+    }));
+    return (<Animated.View style={[styles.lightboxToolbar, styles.lightboxToolbarHeader, animatedHeaderStyles]} accessibilityRole="toolbar">
+      <View style={styles.lightboxToolbarHeaderMetaContainer}>
+        <Heading variant="h3" style={styles.lightboxToolbarHeaderTitle} numberOfLines={1}>
+          {authorName}
+        </Heading>
+        <Text variant="tertiary" style={styles.lightboxToolbarHeaderSubtitle}>
+          {formatDatePreview(createdAt)}
+        </Text>
+      </View>
+      <IconButton onPress={handleOpenInBrowser} disabled={isStatusBarHidden} name="general.newWindow" accessibilityRole="link" accessibilityLabel="Open image in browser" accessibilityHint="Image can be downloaded and shared through the browser." style={styles.lightboxToolbarButton} iconStyle={styles.lightboxToolbarButtonIcon} size="lg"/>
+      <IconButton onPress={handleCloseModal} disabled={isStatusBarHidden} name="general.x" accessibilityLabel="Close image" style={styles.lightboxToolbarButton} iconStyle={styles.lightboxToolbarButtonIcon} size="lg"/>
+    </Animated.View>);
+};
+const LightboxToolbarFooter = ({ lightboxToolbarVisible, totalImages, currentImageIndex, }) => {
+    const styles = useStyles();
+    const animatedFooterStyles = useAnimatedStyle(() => ({
+        opacity: lightboxToolbarVisible.value,
+        transform: [
+            { translateY: (1 - lightboxToolbarVisible.value) * 20 }, // slide down when showing
+        ],
+    }));
+    return (<Animated.View style={[styles.lightboxToolbar, styles.lightboxToolbarFooter, animatedFooterStyles]} accessibilityRole="toolbar">
+      <Text style={styles.lightboxToolbarFooterText}>
+        {currentImageIndex + 1} of {totalImages}
+      </Text>
+    </Animated.View>);
+};
 const useStyles = ({ imageWidth = 100, imageHeight = 100 } = {}) => {
     const { top, bottom } = useSafeAreaInsets();
     const backgroundColor = tokens.colorNeutral7;
@@ -387,7 +523,7 @@ const useStyles = ({ imageWidth = 100, imageHeight = 100 } = {}) => {
         container: {
             maxWidth: '100%',
         },
-        imageWrapper: {
+        attachmentImageWrapper: {
             width: '100%',
             minWidth: 200,
             aspectRatio: imageWidth / imageHeight,
@@ -395,55 +531,66 @@ const useStyles = ({ imageWidth = 100, imageHeight = 100 } = {}) => {
         image: {
             borderRadius: 8,
         },
-        lightboxModalSafeArea: {
-            flex: 1,
+        gallery: {
             backgroundColor,
-            justifyContent: 'center',
-            alignItems: 'center',
+        },
+        galleryContentContainer: {
             paddingTop: top,
             paddingBottom: bottom,
         },
-        lightboxImage: {
+        gestureImage: {
             height: '100%',
             width: WINDOW_WIDTH,
-            backgroundColor,
+            backgroundColor: 'transparent',
         },
-        lightboxImageLoading: {
+        gestureImageLoading: {
             backgroundColor,
         },
-        actionToolbar: {
+        lightboxToolbar: {
             width: '100%',
             position: 'absolute',
-            top: 0,
             flexDirection: 'row',
             alignItems: 'center',
             gap: 20,
             paddingHorizontal: 16,
+            backgroundColor: transparentBackgroundColor,
+        },
+        lightboxToolbarButton: {
+            backgroundColor,
+            height: 40,
+            width: 40,
+            borderRadius: 50,
+            borderWidth: 1,
+            borderColor: tokens.colorNeutral24,
+        },
+        lightboxToolbarButtonIcon: {
+            color: tokens.colorNeutral88,
+        },
+        lightboxToolbarHeader: {
+            top: 0,
             paddingTop: top + 16,
             paddingBottom: 8,
-            backgroundColor: transparentBackgroundColor,
         },
-        actionToolbarTextMeta: {
+        lightboxToolbarHeaderMetaContainer: {
             flex: 1,
         },
-        actionToolbarTitle: {
+        lightboxToolbarHeaderTitle: {
             marginRight: 'auto',
             flexShrink: 1,
             color: tokens.colorNeutral88,
         },
-        actionToolbarSubtitle: {
+        lightboxToolbarHeaderSubtitle: {
             color: tokens.colorNeutral68,
         },
-        actionButton: {
-            backgroundColor,
-            height: 40,
-            width: 40,
-            borderRadius: 50,
-            borderWidth: 1,
-            borderColor: tokens.colorNeutral24,
+        lightboxToolbarFooter: {
+            justifyContent: 'center',
+            bottom: 0,
+            paddingTop: 8,
+            paddingBottom: bottom + 16,
         },
-        actionButtonIcon: {
+        lightboxToolbarFooterText: {
             color: tokens.colorNeutral88,
+            fontWeight: platformFontWeightMedium,
         },
     });
 };