@planningcenter/chat-react-native 3.11.0-rc.2 → 3.11.0-rc.4

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,KAAyC,MAAM,OAAO,CAAA;AA2B7D,OAAO,EAAE,qCAAqC,EAAE,MAAM,2DAA2D,CAAA;AAMjH,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,qBA8DA"}
+{"version":3,"file":"image_attachment.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/image_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAA;AAS1E,OAAO,EAAE,qCAAqC,EAAE,MAAM,2DAA2D,CAAA;AAgBjH,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"}

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

@@ -1,61 +1,322 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import { StyleSheet, Modal, useWindowDimensions, SafeAreaView, View, Linking, } from 'react-native';
-import { Gesture, GestureDetector, GestureHandlerRootView, } from 'react-native-gesture-handler';
-import { runOnJS, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import React, { useMemo, useState } from 'react';
+import { StyleSheet, Modal, SafeAreaView, View, Linking, Dimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
+import { runOnJS, useAnimatedStyle, useSharedValue, withSpring } 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';
-const PAN_THRESHOLD_PX = 300;
+const { width: WINDOW_WIDTH, height: WINDOW_HEIGHT } = Dimensions.get('window');
+const DISMISS_PAN_THRESHOLD = 300;
+const DEFAULT_OPACITY = 1;
+const DEFAULT_SCALE = 1;
+const MIN_SCALE = 0.5;
+const MAX_SCALE = 5;
+const DOUBLE_TAP_ZOOM_SCALE = 2;
+const RESET_SPRING_CONFIG = {
+    damping: 20,
+    stiffness: 150,
+};
 export function ImageAttachment({ attachment, 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);
-    // shared values run on the native UI thread and prevents clogging up the JS thread
-    const dismissY = useSharedValue(0);
-    const opacity = useSharedValue(1);
-    const resetAnimations = useCallback(() => {
-        dismissY.value = withTiming(0);
-        opacity.value = withTiming(1);
-    }, [dismissY, opacity]);
-    const handleCloseModal = useCallback(() => {
-        setVisible(false);
-        resetAnimations();
-    }, [setVisible, resetAnimations]);
-    const panGesture = Gesture.Pan()
-        .onUpdate(e => {
-        dismissY.value = e.translationY;
-        opacity.value = 1 - Math.abs(e.translationY) / PAN_THRESHOLD_PX;
-    })
-        .onEnd(() => {
-        runOnJS(handleCloseModal)(); // Ensures we can call a JS function
-    });
-    const animatedImageStyle = useAnimatedStyle(() => ({
-        transform: [{ translateY: dismissY.value }],
-        opacity: opacity.value,
-    }));
     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>
-      <LightboxModal visible={visible} handleCloseModal={handleCloseModal} uri={urlMedium || url} metaProps={metaProps} panGesture={panGesture} animatedImageStyle={animatedImageStyle}/>
+      <LightboxModal visible={visible} setModalVisible={setVisible} uri={urlMedium || url} metaProps={metaProps} imageWidth={metadata.width} imageHeight={metadata.height}/>
     </>);
 }
-const LightboxModal = ({ uri, visible, handleCloseModal, metaProps, panGesture, animatedImageStyle, }) => {
+const LightboxModal = ({ uri, visible, setModalVisible, metaProps, imageWidth, imageHeight, }) => {
     const styles = useStyles();
+    const insets = useSafeAreaInsets();
     const { authorName, createdAt } = metaProps;
+    // Calculate available space for image display
+    const availableWindowWidth = WINDOW_WIDTH;
+    const availableWindowHeight = WINDOW_HEIGHT - insets.top - insets.bottom;
+    /* ============================
+     ANIMATION VALUES
+    ============================ */
+    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 savedScale = useSharedValue(DEFAULT_SCALE); // previous zoom level
+    const savedTranslateX = useSharedValue(0); // previous horizontal position
+    const savedTranslateY = useSharedValue(0); // previous vertical position
+    /* ============================
+     HANDLERS
+    ============================ */
     const handleOpenInBrowser = () => {
         Linking.openURL(uri);
     };
+    const resetDismissGestures = () => {
+        dismissY.value = withSpring(0, RESET_SPRING_CONFIG);
+        opacity.value = withSpring(DEFAULT_OPACITY, RESET_SPRING_CONFIG);
+    };
+    const resetAllGestures = () => {
+        resetDismissGestures();
+        scale.value = withSpring(DEFAULT_SCALE, RESET_SPRING_CONFIG);
+        translateX.value = withSpring(0, RESET_SPRING_CONFIG);
+        translateY.value = withSpring(0, RESET_SPRING_CONFIG);
+        savedScale.value = DEFAULT_SCALE;
+        savedTranslateX.value = 0;
+        savedTranslateY.value = 0;
+    };
+    const handleCloseModal = () => {
+        setModalVisible(false);
+        resetAllGestures();
+    };
+    /* ============================
+     UTILITY FUNCTIONS
+     'worklet' runs functions on the UI thread, instead of the JS thread for better performance
+    ============================ */
+    const getImageContainedToWindowDimensions = () => {
+        'worklet';
+        if (!imageWidth || !imageHeight) {
+            return { width: availableWindowWidth, height: availableWindowHeight };
+        }
+        const imageAspectRatio = imageWidth / imageHeight;
+        const windowAspectRatio = availableWindowWidth / availableWindowHeight;
+        // Constrain image width if its wider than window
+        if (imageAspectRatio > windowAspectRatio) {
+            return {
+                width: availableWindowWidth,
+                height: availableWindowWidth / imageAspectRatio,
+            };
+        }
+        // Constrain image height if its taller than window
+        return {
+            width: availableWindowHeight * imageAspectRatio,
+            height: availableWindowHeight,
+        };
+    };
+    const zoomToFocalPoint = ({ focalPointX, focalPointY, targetScale, currentSavedScale, currentSavedTranslateX, currentSavedTranslateY, }) => {
+        'worklet';
+        // How far the focal point is from the center of the window
+        const windowCenterX = WINDOW_WIDTH / 2;
+        const windowCenterY = WINDOW_HEIGHT / 2;
+        // Position of focal point relative to current image position
+        const focalRelativeX = focalPointX - windowCenterX - currentSavedTranslateX;
+        const focalRelativeY = focalPointY - windowCenterY - currentSavedTranslateY;
+        // Calculate new translation to keep focal point under fingers
+        const scaleRatio = targetScale / currentSavedScale;
+        const newTranslateX = currentSavedTranslateX + focalRelativeX * (1 - scaleRatio);
+        const newTranslateY = currentSavedTranslateY + focalRelativeY * (1 - scaleRatio);
+        return {
+            translateX: newTranslateX,
+            translateY: newTranslateY,
+        };
+    };
+    const clampTranslation = ({ x, y, currentScale, allowGestureOvershoot = false, }) => {
+        'worklet';
+        const { width: containedImageWidth, height: containedImageHeight } = getImageContainedToWindowDimensions();
+        // Image dimensions after scaling / zooming
+        const scaledWidth = containedImageWidth * currentScale;
+        const scaledHeight = containedImageHeight * currentScale;
+        // How much the scaled image exceeds the window container
+        const excessWidth = scaledWidth - availableWindowWidth;
+        const excessHeight = scaledHeight - availableWindowHeight;
+        // How far the image can move in each direction
+        const maxTranslateX = Math.max(0, excessWidth / 2);
+        const maxTranslateY = Math.max(0, excessHeight / 2);
+        if (allowGestureOvershoot) {
+            const overshoot = 20;
+            return {
+                x: Math.min(maxTranslateX + overshoot, Math.max(-maxTranslateX - overshoot, x)),
+                y: Math.min(maxTranslateY + overshoot, Math.max(-maxTranslateY - overshoot, y)),
+            };
+        }
+        return {
+            x: Math.min(maxTranslateX, Math.max(-maxTranslateX, x)),
+            y: Math.min(maxTranslateY, Math.max(-maxTranslateY, y)),
+        };
+    };
+    const isImageAtVerticalBoundry = (currentScale) => {
+        'worklet';
+        const { height: containedImageHeight } = getImageContainedToWindowDimensions();
+        // 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 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;
+    };
+    /* ============================
+     GESTURES
+    ============================ */
+    const doubleTapGesture = Gesture.Tap()
+        .numberOfTaps(2)
+        .onStart(e => {
+        const isZoomedIn = scale.value > DEFAULT_SCALE;
+        if (isZoomedIn) {
+            runOnJS(resetAllGestures)();
+        }
+        else {
+            // Zoom to 2x at tap location
+            const newTranslation = zoomToFocalPoint({
+                focalPointX: e.x,
+                focalPointY: e.y,
+                targetScale: DOUBLE_TAP_ZOOM_SCALE,
+                currentSavedScale: savedScale.value,
+                currentSavedTranslateX: savedTranslateX.value,
+                currentSavedTranslateY: savedTranslateY.value,
+            });
+            // Apply clamping to ensure image edges remain within window boundaries
+            const clampedTranslate = clampTranslation({
+                x: newTranslation.translateX,
+                y: newTranslation.translateY,
+                currentScale: DOUBLE_TAP_ZOOM_SCALE,
+            });
+            // Animate to new scale and translation
+            scale.value = withSpring(DOUBLE_TAP_ZOOM_SCALE, RESET_SPRING_CONFIG);
+            translateX.value = withSpring(clampedTranslate.x, RESET_SPRING_CONFIG);
+            translateY.value = withSpring(clampedTranslate.y, RESET_SPRING_CONFIG);
+            // Update saved state for next gesture
+            savedScale.value = DOUBLE_TAP_ZOOM_SCALE;
+            savedTranslateX.value = clampedTranslate.x;
+            savedTranslateY.value = clampedTranslate.y;
+        }
+    });
+    const pinchGesture = Gesture.Pinch()
+        .onStart(e => {
+        focalX.value = e.focalX;
+        focalY.value = e.focalY;
+    })
+        .onUpdate(e => {
+        // Zoom image in/out within scale limits
+        const newScale = savedScale.value * e.scale;
+        const newScaleClamped = Math.min(MAX_SCALE, Math.max(MIN_SCALE, newScale));
+        scale.value = newScaleClamped;
+        // Calculate new translation to keep focal point under fingers
+        const newTranslation = zoomToFocalPoint({
+            focalPointX: focalX.value,
+            focalPointY: focalY.value,
+            targetScale: newScaleClamped,
+            currentSavedScale: savedScale.value,
+            currentSavedTranslateX: savedTranslateX.value,
+            currentSavedTranslateY: savedTranslateY.value,
+        });
+        // Apply translation without clamping to ensure focal point doesn't jump during gesture
+        translateX.value = newTranslation.translateX;
+        translateY.value = newTranslation.translateY;
+    })
+        .onEnd(() => {
+        const currentScale = scale.value;
+        // Dismiss modal if fully zoomed out
+        if (currentScale <= MIN_SCALE) {
+            runOnJS(handleCloseModal)();
+            return;
+        }
+        // Reset all gestures if image is near default scale
+        const isNearDefaultScale = currentScale <= DEFAULT_SCALE + 0.1;
+        if (isNearDefaultScale) {
+            runOnJS(resetAllGestures)();
+            return;
+        }
+        // Ensure image edges remain within window boundaries
+        const clampedTranslate = clampTranslation({
+            x: translateX.value,
+            y: translateY.value,
+            currentScale: currentScale,
+        });
+        translateX.value = withSpring(clampedTranslate.x, RESET_SPRING_CONFIG);
+        translateY.value = withSpring(clampedTranslate.y, RESET_SPRING_CONFIG);
+        // Save state for next gesture
+        savedScale.value = currentScale;
+        savedTranslateX.value = clampedTranslate.x;
+        savedTranslateY.value = clampedTranslate.y;
+    });
+    const panGesture = Gesture.Pan()
+        .onUpdate(e => {
+        // Only pan if image is zoomed in
+        if (scale.value <= DEFAULT_SCALE)
+            return;
+        const newTranslateX = savedTranslateX.value + e.translationX;
+        const newTranslateY = savedTranslateY.value + e.translationY;
+        // Ensure image edges remain within window boundaries
+        const clampedTranslate = clampTranslation({
+            x: newTranslateX,
+            y: newTranslateY,
+            currentScale: scale.value,
+            allowGestureOvershoot: true,
+        });
+        translateX.value = clampedTranslate.x;
+        translateY.value = clampedTranslate.y;
+    })
+        .onEnd(() => {
+        // Prevents saving pan position if image is zoomed out while panning
+        if (scale.value <= DEFAULT_SCALE)
+            return;
+        // Spring image back to window boundaries if overshot
+        const clampedTranslate = clampTranslation({
+            x: translateX.value,
+            y: translateY.value,
+            currentScale: scale.value,
+        });
+        translateX.value = withSpring(clampedTranslate.x, RESET_SPRING_CONFIG);
+        translateY.value = withSpring(clampedTranslate.y, RESET_SPRING_CONFIG);
+        // Save the current position for the next gesture
+        savedTranslateX.value = clampedTranslate.x;
+        savedTranslateY.value = clampedTranslate.y;
+    });
+    const panToDismissModalGesture = Gesture.Pan()
+        .onUpdate(e => {
+        const atDefaultScale = scale.value === DEFAULT_SCALE;
+        // Calculate zoom conditions for dismissing modal
+        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;
+        }
+    })
+        .onEnd(() => {
+        const exceededDismissThreshold = Math.abs(dismissY.value) > DISMISS_PAN_THRESHOLD;
+        if (exceededDismissThreshold) {
+            runOnJS(handleCloseModal)();
+        }
+        else {
+            runOnJS(resetDismissGestures)();
+        }
+    });
+    /* ==============================
+     IMPLEMENT GESTURES & ANIMATIONS
+    ================================= */
+    // Race between pinch and pan ensures only one is active at a time, preventing issues with zooming to focal point between fingers
+    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);
+    // 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}>
       <SafeAreaView style={styles.modal}>
         <GestureHandlerRootView>
-          <GestureDetector gesture={panGesture}>
-            <Image source={{ uri }} loadingBackgroundStyles={styles.lightboxImageLoading} style={styles.lightboxImage} animatedImageStyle={animatedImageStyle} resizeMode="contain" animated={true} alt=""/>
+          <GestureDetector gesture={composedGesture}>
+            <Image source={{ uri }} loadingBackgroundStyles={styles.lightboxImageLoading} style={styles.lightboxImage} animatedImageStyle={animatedImageStyles} resizeMode="contain" animated={true} alt=""/>
           </GestureDetector>
           <View style={styles.actionToolbar} accessibilityRole="toolbar">
             <View style={styles.actionToolbarTextMeta}>
@@ -74,7 +335,6 @@ const LightboxModal = ({ uri, visible, handleCloseModal, metaProps, panGesture,
     </Modal>);
 };
 const useStyles = ({ imageWidth = 100, imageHeight = 100 } = {}) => {
-    const { width: windowWidth } = useWindowDimensions();
     const backgroundColor = tokens.colorNeutral7;
     const transparentBackgroundColor = useMemo(() => colorFunction(backgroundColor).alpha(0.8).toString(), [backgroundColor]);
     return StyleSheet.create({
@@ -97,7 +357,7 @@ const useStyles = ({ imageWidth = 100, imageHeight = 100 } = {}) => {
         },
         lightboxImage: {
             height: '100%',
-            width: windowWidth,
+            width: WINDOW_WIDTH,
             backgroundColor,
         },
         lightboxImageLoading: {

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

@@ -1 +1 @@
-{"version":3,"file":"image_attachment.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/image_attachment.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useMemo, useState } from 'react'\nimport {\n  StyleSheet,\n  Modal,\n  useWindowDimensions,\n  SafeAreaView,\n  View,\n  Linking,\n  ImageStyle,\n} from 'react-native'\nimport {\n  Gesture,\n  GestureDetector,\n  GestureHandlerRootView,\n  type PanGesture,\n} from 'react-native-gesture-handler'\nimport {\n  runOnJS,\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n  type AnimatedStyle,\n} from 'react-native-reanimated'\nimport { tokens } from '../../../vendor/tapestry/tokens'\nimport { IconButton, Image, Heading, Text } from '../../display'\nimport colorFunction from 'color'\nimport { formatDatePreview } from '../../../utils/date'\nimport { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'\nimport { PlatformPressable } from '@react-navigation/elements'\nimport { useTheme } from '../../../hooks'\n\nconst PAN_THRESHOLD_PX = 300\n\nexport type MetaProps = {\n  authorName: string\n  createdAt: string\n}\n\nexport function ImageAttachment({\n  attachment,\n  metaProps,\n  onMessageAttachmentLongPress,\n}: {\n  attachment: DenormalizedMessageAttachmentResource\n  metaProps: MetaProps\n  onMessageAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void\n}) {\n  const { attributes } = attachment\n  const { url, urlMedium, filename, metadata = {} } = attributes\n  const { colors } = useTheme()\n\n  const styles = useStyles({ imageWidth: metadata.width, imageHeight: metadata.height })\n  const [visible, setVisible] = useState(false)\n\n  // shared values run on the native UI thread and prevents clogging up the JS thread\n  const dismissY = useSharedValue(0)\n  const opacity = useSharedValue(1)\n\n  const resetAnimations = useCallback(() => {\n    dismissY.value = withTiming(0)\n    opacity.value = withTiming(1)\n  }, [dismissY, opacity])\n\n  const handleCloseModal = useCallback(() => {\n    setVisible(false)\n    resetAnimations()\n  }, [setVisible, resetAnimations])\n\n  const panGesture = Gesture.Pan()\n    .onUpdate(e => {\n      dismissY.value = e.translationY\n      opacity.value = 1 - Math.abs(e.translationY) / PAN_THRESHOLD_PX\n    })\n    .onEnd(() => {\n      runOnJS(handleCloseModal)() // Ensures we can call a JS function\n    })\n\n  const animatedImageStyle = useAnimatedStyle(() => ({\n    transform: [{ translateY: dismissY.value }],\n    opacity: opacity.value,\n  }))\n\n  return (\n    <>\n      <PlatformPressable\n        style={styles.container}\n        onPress={() => setVisible(true)}\n        onLongPress={() => onMessageAttachmentLongPress(attachment)}\n        android_ripple={{ color: colors.androidRippleNeutral, foreground: true }}\n        accessibilityHint=\"Long press for more options\"\n      >\n        <Image\n          source={{ uri: urlMedium || url }}\n          style={styles.image}\n          wrapperStyle={styles.imageWrapper}\n          alt={filename}\n        />\n      </PlatformPressable>\n      <LightboxModal\n        visible={visible}\n        handleCloseModal={handleCloseModal}\n        uri={urlMedium || url}\n        metaProps={metaProps}\n        panGesture={panGesture}\n        animatedImageStyle={animatedImageStyle}\n      />\n    </>\n  )\n}\n\ninterface LightboxModalProps {\n  visible: boolean\n  handleCloseModal: () => void\n  uri: string\n  metaProps: MetaProps\n  panGesture: PanGesture\n  animatedImageStyle: AnimatedStyle<ImageStyle>\n}\n\nconst LightboxModal = ({\n  uri,\n  visible,\n  handleCloseModal,\n  metaProps,\n  panGesture,\n  animatedImageStyle,\n}: LightboxModalProps) => {\n  const styles = useStyles()\n\n  const { authorName, createdAt } = metaProps\n\n  const handleOpenInBrowser = () => {\n    Linking.openURL(uri)\n  }\n\n  return (\n    <Modal visible={visible} transparent animationType=\"fade\" onRequestClose={handleCloseModal}>\n      <SafeAreaView style={styles.modal}>\n        <GestureHandlerRootView>\n          <GestureDetector gesture={panGesture}>\n            <Image\n              source={{ uri }}\n              loadingBackgroundStyles={styles.lightboxImageLoading}\n              style={styles.lightboxImage}\n              animatedImageStyle={animatedImageStyle}\n              resizeMode=\"contain\"\n              animated={true}\n              alt=\"\"\n            />\n          </GestureDetector>\n          <View style={styles.actionToolbar} accessibilityRole=\"toolbar\">\n            <View style={styles.actionToolbarTextMeta}>\n              <Heading variant=\"h3\" style={styles.actionToolbarTitle} numberOfLines={1}>\n                {authorName}\n              </Heading>\n              <Text variant=\"tertiary\" style={styles.actionToolbarSubtitle}>\n                {formatDatePreview(createdAt)}\n              </Text>\n            </View>\n            <IconButton\n              onPress={handleOpenInBrowser}\n              name=\"general.newWindow\"\n              accessibilityRole=\"link\"\n              accessibilityLabel=\"Open image in browser\"\n              accessibilityHint=\"Image can be downloaded and shared through the browser.\"\n              style={styles.actionButton}\n              iconStyle={styles.actionButtonIcon}\n              size=\"lg\"\n            />\n            <IconButton\n              onPress={handleCloseModal}\n              name=\"general.x\"\n              accessibilityLabel=\"Close image\"\n              style={styles.actionButton}\n              iconStyle={styles.actionButtonIcon}\n            />\n          </View>\n        </GestureHandlerRootView>\n      </SafeAreaView>\n    </Modal>\n  )\n}\n\ninterface UseStylesProps {\n  imageWidth?: number\n  imageHeight?: number\n}\n\nconst useStyles = ({ imageWidth = 100, imageHeight = 100 }: UseStylesProps = {}) => {\n  const { width: windowWidth } = useWindowDimensions()\n  const backgroundColor = tokens.colorNeutral7\n  const transparentBackgroundColor = useMemo(\n    () => colorFunction(backgroundColor).alpha(0.8).toString(),\n    [backgroundColor]\n  )\n\n  return StyleSheet.create({\n    container: {\n      maxWidth: '100%',\n    },\n    imageWrapper: {\n      width: '100%',\n      minWidth: 200,\n      aspectRatio: imageWidth / imageHeight,\n    },\n    image: {\n      borderRadius: 8,\n    },\n    modal: {\n      flex: 1,\n      backgroundColor,\n      justifyContent: 'center',\n      alignItems: 'center',\n    },\n    lightboxImage: {\n      height: '100%',\n      width: windowWidth,\n      backgroundColor,\n    },\n    lightboxImageLoading: {\n      backgroundColor,\n    },\n    actionToolbar: {\n      width: '100%',\n      position: 'absolute',\n      top: 0,\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 20,\n      paddingHorizontal: 16,\n      paddingTop: 16,\n      paddingBottom: 8,\n      backgroundColor: transparentBackgroundColor,\n    },\n    actionToolbarTextMeta: {\n      flex: 1,\n    },\n    actionToolbarTitle: {\n      marginRight: 'auto',\n      flexShrink: 1,\n      color: tokens.colorNeutral88,\n    },\n    actionToolbarSubtitle: {\n      color: tokens.colorNeutral68,\n    },\n    actionButton: {\n      backgroundColor,\n      height: 40,\n      width: 40,\n      borderRadius: 50,\n      borderWidth: 1,\n      borderColor: tokens.colorNeutral24,\n    },\n    actionButtonIcon: {\n      color: tokens.colorNeutral88,\n    },\n  })\n}\n"]}
+{"version":3,"file":"image_attachment.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/image_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAA4B,MAAM,OAAO,CAAA;AAC1E,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzF,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAA;AAC/F,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAC/F,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,aAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAEzC,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;AAC/E,MAAM,qBAAqB,GAAG,GAAG,CAAA;AACjC,MAAM,eAAe,GAAG,CAAC,CAAA;AACzB,MAAM,aAAa,GAAG,CAAC,CAAA;AACvB,MAAM,SAAS,GAAG,GAAG,CAAA;AACrB,MAAM,SAAS,GAAG,CAAC,CAAA;AACnB,MAAM,qBAAqB,GAAG,CAAC,CAAA;AAC/B,MAAM,mBAAmB,GAAG;IAC1B,OAAO,EAAE,EAAE;IACX,SAAS,EAAE,GAAG;CACf,CAAA;AAOD,MAAM,UAAU,eAAe,CAAC,EAC9B,UAAU,EACV,SAAS,EACT,4BAA4B,GAK7B;IACC,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAA;IACjC,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAG,EAAE,EAAE,GAAG,UAAU,CAAA;IAC9D,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,UAAU,EAAE,QAAQ,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAA;IACtF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE7C,OAAO,CACL,EACE;MAAA,CAAC,iBAAiB,CAChB,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CACxB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAChC,WAAW,CAAC,CAAC,GAAG,EAAE,CAAC,4BAA4B,CAAC,UAAU,CAAC,CAAC,CAC5D,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,oBAAoB,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CACzE,iBAAiB,CAAC,6BAA6B,CAE/C;QAAA,CAAC,KAAK,CACJ,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,SAAS,IAAI,GAAG,EAAE,CAAC,CAClC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACpB,YAAY,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAClC,GAAG,CAAC,CAAC,QAAQ,CAAC,EAElB;MAAA,EAAE,iBAAiB,CACnB;MAAA,CAAC,aAAa,CACZ,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,eAAe,CAAC,CAAC,UAAU,CAAC,CAC5B,GAAG,CAAC,CAAC,SAAS,IAAI,GAAG,CAAC,CACtB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,UAAU,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAC3B,WAAW,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,EAEjC;IAAA,GAAG,CACJ,CAAA;AACH,CAAC;AAWD,MAAM,aAAa,GAAG,CAAC,EACrB,GAAG,EACH,OAAO,EACP,eAAe,EACf,SAAS,EACT,UAAU,EACV,WAAW,GACQ,EAAE,EAAE;IACvB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,MAAM,GAAG,iBAAiB,EAAE,CAAA;IAElC,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,SAAS,CAAA;IAE3C,8CAA8C;IAC9C,MAAM,oBAAoB,GAAG,YAAY,CAAA;IACzC,MAAM,qBAAqB,GAAG,aAAa,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM,CAAC,MAAM,CAAA;IAExE;;mCAE+B;IAC/B,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,CAAA,CAAC,qCAAqC;IACxE,MAAM,OAAO,GAAG,cAAc,CAAC,eAAe,CAAC,CAAA,CAAC,mBAAmB;IACnE,MAAM,KAAK,GAAG,cAAc,CAAC,aAAa,CAAC,CAAA,CAAC,sBAAsB;IAClE,MAAM,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC,CAAA,CAAC,uCAAuC;IACxE,MAAM,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC,CAAA,CAAC,uCAAuC;IACxE,MAAM,UAAU,GAAG,cAAc,CAAC,CAAC,CAAC,CAAA,CAAC,mCAAmC;IACxE,MAAM,UAAU,GAAG,cAAc,CAAC,CAAC,CAAC,CAAA,CAAC,iCAAiC;IACtE,MAAM,UAAU,GAAG,cAAc,CAAC,aAAa,CAAC,CAAA,CAAC,sBAAsB;IACvE,MAAM,eAAe,GAAG,cAAc,CAAC,CAAC,CAAC,CAAA,CAAC,+BAA+B;IACzE,MAAM,eAAe,GAAG,cAAc,CAAC,CAAC,CAAC,CAAA,CAAC,6BAA6B;IAEvE;;mCAE+B;IAC/B,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC/B,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;IACtB,CAAC,CAAA;IAED,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAChC,QAAQ,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAA;QACnD,OAAO,CAAC,KAAK,GAAG,UAAU,CAAC,eAAe,EAAE,mBAAmB,CAAC,CAAA;IAClE,CAAC,CAAA;IAED,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,oBAAoB,EAAE,CAAA;QACtB,KAAK,CAAC,KAAK,GAAG,UAAU,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAA;QAC5D,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAA;QACrD,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAA;QACrD,UAAU,CAAC,KAAK,GAAG,aAAa,CAAA;QAChC,eAAe,CAAC,KAAK,GAAG,CAAC,CAAA;QACzB,eAAe,CAAC,KAAK,GAAG,CAAC,CAAA;IAC3B,CAAC,CAAA;IAED,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,eAAe,CAAC,KAAK,CAAC,CAAA;QACtB,gBAAgB,EAAE,CAAA;IACpB,CAAC,CAAA;IAED;;;mCAG+B;IAC/B,MAAM,mCAAmC,GAAG,GAAG,EAAE;QAC/C,SAAS,CAAA;QAET,IAAI,CAAC,UAAU,IAAI,CAAC,WAAW,EAAE,CAAC;YAChC,OAAO,EAAE,KAAK,EAAE,oBAAoB,EAAE,MAAM,EAAE,qBAAqB,EAAE,CAAA;QACvE,CAAC;QAED,MAAM,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAA;QACjD,MAAM,iBAAiB,GAAG,oBAAoB,GAAG,qBAAqB,CAAA;QAEtE,iDAAiD;QACjD,IAAI,gBAAgB,GAAG,iBAAiB,EAAE,CAAC;YACzC,OAAO;gBACL,KAAK,EAAE,oBAAoB;gBAC3B,MAAM,EAAE,oBAAoB,GAAG,gBAAgB;aAChD,CAAA;QACH,CAAC;QAED,mDAAmD;QACnD,OAAO;YACL,KAAK,EAAE,qBAAqB,GAAG,gBAAgB;YAC/C,MAAM,EAAE,qBAAqB;SAC9B,CAAA;IACH,CAAC,CAAA;IAED,MAAM,gBAAgB,GAAG,CAAC,EACxB,WAAW,EACX,WAAW,EACX,WAAW,EACX,iBAAiB,EACjB,sBAAsB,EACtB,sBAAsB,GAQvB,EAAE,EAAE;QACH,SAAS,CAAA;QAET,2DAA2D;QAC3D,MAAM,aAAa,GAAG,YAAY,GAAG,CAAC,CAAA;QACtC,MAAM,aAAa,GAAG,aAAa,GAAG,CAAC,CAAA;QAEvC,6DAA6D;QAC7D,MAAM,cAAc,GAAG,WAAW,GAAG,aAAa,GAAG,sBAAsB,CAAA;QAC3E,MAAM,cAAc,GAAG,WAAW,GAAG,aAAa,GAAG,sBAAsB,CAAA;QAE3E,8DAA8D;QAC9D,MAAM,UAAU,GAAG,WAAW,GAAG,iBAAiB,CAAA;QAClD,MAAM,aAAa,GAAG,sBAAsB,GAAG,cAAc,GAAG,CAAC,CAAC,GAAG,UAAU,CAAC,CAAA;QAChF,MAAM,aAAa,GAAG,sBAAsB,GAAG,cAAc,GAAG,CAAC,CAAC,GAAG,UAAU,CAAC,CAAA;QAEhF,OAAO;YACL,UAAU,EAAE,aAAa;YACzB,UAAU,EAAE,aAAa;SAC1B,CAAA;IACH,CAAC,CAAA;IAED,MAAM,gBAAgB,GAAG,CAAC,EACxB,CAAC,EACD,CAAC,EACD,YAAY,EACZ,qBAAqB,GAAG,KAAK,GAM9B,EAAE,EAAE;QACH,SAAS,CAAA;QAET,MAAM,EAAE,KAAK,EAAE,mBAAmB,EAAE,MAAM,EAAE,oBAAoB,EAAE,GAChE,mCAAmC,EAAE,CAAA;QAEvC,2CAA2C;QAC3C,MAAM,WAAW,GAAG,mBAAmB,GAAG,YAAY,CAAA;QACtD,MAAM,YAAY,GAAG,oBAAoB,GAAG,YAAY,CAAA;QAExD,yDAAyD;QACzD,MAAM,WAAW,GAAG,WAAW,GAAG,oBAAoB,CAAA;QACtD,MAAM,YAAY,GAAG,YAAY,GAAG,qBAAqB,CAAA;QAEzD,+CAA+C;QAC/C,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,GAAG,CAAC,CAAC,CAAA;QAClD,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,GAAG,CAAC,CAAC,CAAA;QAEnD,IAAI,qBAAqB,EAAE,CAAC;YAC1B,MAAM,SAAS,GAAG,EAAE,CAAA;YACpB,OAAO;gBACL,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,aAAa,GAAG,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,aAAa,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC;gBAC/E,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,aAAa,GAAG,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,aAAa,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC;aAChF,CAAA;QACH,CAAC;QAED,OAAO;YACL,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;YACvD,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;SACxD,CAAA;IACH,CAAC,CAAA;IAED,MAAM,wBAAwB,GAAG,CAAC,YAAoB,EAAE,EAAE;QACxD,SAAS,CAAA;QAET,MAAM,EAAE,MAAM,EAAE,oBAAoB,EAAE,GAAG,mCAAmC,EAAE,CAAA;QAE9E,+DAA+D;QAC/D,MAAM,YAAY,GAAG,oBAAoB,GAAG,YAAY,CAAA;QACxD,MAAM,YAAY,GAAG,YAAY,GAAG,qBAAqB,CAAA;QACzD,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,GAAG,CAAC,CAAC,CAAA;QAEnD,MAAM,iBAAiB,GAAG,UAAU,CAAC,KAAK,CAAA;QAC1C,MAAM,oBAAoB,GAAG,CAAC,CAAA,CAAC,gEAAgE;QAE/F,MAAM,YAAY,GAAG,iBAAiB,IAAI,aAAa,GAAG,oBAAoB,CAAA;QAC9E,MAAM,eAAe,GAAG,iBAAiB,IAAI,CAAC,aAAa,GAAG,oBAAoB,CAAA;QAElF,OAAO,YAAY,IAAI,eAAe,CAAA;IACxC,CAAC,CAAA;IAED;;mCAE+B;IAC/B,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;SACnC,YAAY,CAAC,CAAC,CAAC;SACf,OAAO,CAAC,CAAC,CAAC,EAAE;QACX,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,GAAG,aAAa,CAAA;QAC9C,IAAI,UAAU,EAAE,CAAC;YACf,OAAO,CAAC,gBAAgB,CAAC,EAAE,CAAA;QAC7B,CAAC;aAAM,CAAC;YACN,6BAA6B;YAC7B,MAAM,cAAc,GAAG,gBAAgB,CAAC;gBACtC,WAAW,EAAE,CAAC,CAAC,CAAC;gBAChB,WAAW,EAAE,CAAC,CAAC,CAAC;gBAChB,WAAW,EAAE,qBAAqB;gBAClC,iBAAiB,EAAE,UAAU,CAAC,KAAK;gBACnC,sBAAsB,EAAE,eAAe,CAAC,KAAK;gBAC7C,sBAAsB,EAAE,eAAe,CAAC,KAAK;aAC9C,CAAC,CAAA;YAEF,uEAAuE;YACvE,MAAM,gBAAgB,GAAG,gBAAgB,CAAC;gBACxC,CAAC,EAAE,cAAc,CAAC,UAAU;gBAC5B,CAAC,EAAE,cAAc,CAAC,UAAU;gBAC5B,YAAY,EAAE,qBAAqB;aACpC,CAAC,CAAA;YAEF,uCAAuC;YACvC,KAAK,CAAC,KAAK,GAAG,UAAU,CAAC,qBAAqB,EAAE,mBAAmB,CAAC,CAAA;YACpE,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAA;YACtE,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAA;YAEtE,sCAAsC;YACtC,UAAU,CAAC,KAAK,GAAG,qBAAqB,CAAA;YACxC,eAAe,CAAC,KAAK,GAAG,gBAAgB,CAAC,CAAC,CAAA;YAC1C,eAAe,CAAC,KAAK,GAAG,gBAAgB,CAAC,CAAC,CAAA;QAC5C,CAAC;IACH,CAAC,CAAC,CAAA;IAEJ,MAAM,YAAY,GAAG,OAAO,CAAC,KAAK,EAAE;SACjC,OAAO,CAAC,CAAC,CAAC,EAAE;QACX,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;QACvB,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;IACzB,CAAC,CAAC;SACD,QAAQ,CAAC,CAAC,CAAC,EAAE;QACZ,wCAAwC;QACxC,MAAM,QAAQ,GAAG,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAA;QAC3C,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAA;QAC1E,KAAK,CAAC,KAAK,GAAG,eAAe,CAAA;QAE7B,8DAA8D;QAC9D,MAAM,cAAc,GAAG,gBAAgB,CAAC;YACtC,WAAW,EAAE,MAAM,CAAC,KAAK;YACzB,WAAW,EAAE,MAAM,CAAC,KAAK;YACzB,WAAW,EAAE,eAAe;YAC5B,iBAAiB,EAAE,UAAU,CAAC,KAAK;YACnC,sBAAsB,EAAE,eAAe,CAAC,KAAK;YAC7C,sBAAsB,EAAE,eAAe,CAAC,KAAK;SAC9C,CAAC,CAAA;QAEF,uFAAuF;QACvF,UAAU,CAAC,KAAK,GAAG,cAAc,CAAC,UAAU,CAAA;QAC5C,UAAU,CAAC,KAAK,GAAG,cAAc,CAAC,UAAU,CAAA;IAC9C,CAAC,CAAC;SACD,KAAK,CAAC,GAAG,EAAE;QACV,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAA;QAEhC,oCAAoC;QACpC,IAAI,YAAY,IAAI,SAAS,EAAE,CAAC;YAC9B,OAAO,CAAC,gBAAgB,CAAC,EAAE,CAAA;YAC3B,OAAM;QACR,CAAC;QAED,oDAAoD;QACpD,MAAM,kBAAkB,GAAG,YAAY,IAAI,aAAa,GAAG,GAAG,CAAA;QAC9D,IAAI,kBAAkB,EAAE,CAAC;YACvB,OAAO,CAAC,gBAAgB,CAAC,EAAE,CAAA;YAC3B,OAAM;QACR,CAAC;QAED,qDAAqD;QACrD,MAAM,gBAAgB,GAAG,gBAAgB,CAAC;YACxC,CAAC,EAAE,UAAU,CAAC,KAAK;YACnB,CAAC,EAAE,UAAU,CAAC,KAAK;YACnB,YAAY,EAAE,YAAY;SAC3B,CAAC,CAAA;QACF,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAA;QACtE,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAA;QAEtE,8BAA8B;QAC9B,UAAU,CAAC,KAAK,GAAG,YAAY,CAAA;QAC/B,eAAe,CAAC,KAAK,GAAG,gBAAgB,CAAC,CAAC,CAAA;QAC1C,eAAe,CAAC,KAAK,GAAG,gBAAgB,CAAC,CAAC,CAAA;IAC5C,CAAC,CAAC,CAAA;IAEJ,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;SAC7B,QAAQ,CAAC,CAAC,CAAC,EAAE;QACZ,iCAAiC;QACjC,IAAI,KAAK,CAAC,KAAK,IAAI,aAAa;YAAE,OAAM;QAExC,MAAM,aAAa,GAAG,eAAe,CAAC,KAAK,GAAG,CAAC,CAAC,YAAY,CAAA;QAC5D,MAAM,aAAa,GAAG,eAAe,CAAC,KAAK,GAAG,CAAC,CAAC,YAAY,CAAA;QAE5D,qDAAqD;QACrD,MAAM,gBAAgB,GAAG,gBAAgB,CAAC;YACxC,CAAC,EAAE,aAAa;YAChB,CAAC,EAAE,aAAa;YAChB,YAAY,EAAE,KAAK,CAAC,KAAK;YACzB,qBAAqB,EAAE,IAAI;SAC5B,CAAC,CAAA;QACF,UAAU,CAAC,KAAK,GAAG,gBAAgB,CAAC,CAAC,CAAA;QACrC,UAAU,CAAC,KAAK,GAAG,gBAAgB,CAAC,CAAC,CAAA;IACvC,CAAC,CAAC;SACD,KAAK,CAAC,GAAG,EAAE;QACV,oEAAoE;QACpE,IAAI,KAAK,CAAC,KAAK,IAAI,aAAa;YAAE,OAAM;QAExC,qDAAqD;QACrD,MAAM,gBAAgB,GAAG,gBAAgB,CAAC;YACxC,CAAC,EAAE,UAAU,CAAC,KAAK;YACnB,CAAC,EAAE,UAAU,CAAC,KAAK;YACnB,YAAY,EAAE,KAAK,CAAC,KAAK;SAC1B,CAAC,CAAA;QACF,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAA;QACtE,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAA;QAEtE,iDAAiD;QACjD,eAAe,CAAC,KAAK,GAAG,gBAAgB,CAAC,CAAC,CAAA;QAC1C,eAAe,CAAC,KAAK,GAAG,gBAAgB,CAAC,CAAC,CAAA;IAC5C,CAAC,CAAC,CAAA;IAEJ,MAAM,wBAAwB,GAAG,OAAO,CAAC,GAAG,EAAE;SAC3C,QAAQ,CAAC,CAAC,CAAC,EAAE;QACZ,MAAM,cAAc,GAAG,KAAK,CAAC,KAAK,KAAK,aAAa,CAAA;QAEpD,iDAAiD;QACjD,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QAC/D,MAAM,+BAA+B,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,CAAC,CAAA;QAC3F,MAAM,qBAAqB,GAAG,iBAAiB,IAAI,+BAA+B,CAAA;QAElF,IAAI,cAAc,IAAI,qBAAqB,EAAE,CAAC;YAC5C,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,CAAC,CAAA;YAC5C,MAAM,YAAY,GAAG,WAAW,GAAG,qBAAqB,CAAA;YAExD,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,eAAe,GAAG,YAAY,CAAC,CAAA;YAC3D,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,YAAY,CAAA;QACjC,CAAC;IACH,CAAC,CAAC;SACD,KAAK,CAAC,GAAG,EAAE;QACV,MAAM,wBAAwB,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,qBAAqB,CAAA;QAEjF,IAAI,wBAAwB,EAAE,CAAC;YAC7B,OAAO,CAAC,gBAAgB,CAAC,EAAE,CAAA;QAC7B,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,oBAAoB,CAAC,EAAE,CAAA;QACjC,CAAC;IACH,CAAC,CAAC,CAAA;IAEJ;;wCAEoC;IACpC,iIAAiI;IACjI,MAAM,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAA;IAEjE,0FAA0F;IAC1F,MAAM,sBAAsB,GAAG,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAAA;IAEjF,oDAAoD;IACpD,MAAM,eAAe,GAAG,OAAO,CAAC,YAAY,CAAC,sBAAsB,EAAE,wBAAwB,CAAC,CAAA;IAE9F,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,GAAG,EAAE,CAAC,CAAC;QAClD,SAAS,EAAE;YACT,EAAE,UAAU,EAAE,UAAU,CAAC,KAAK,EAAE;YAChC,EAAE,UAAU,EAAE,UAAU,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,EAAE;YACjD,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE;SACvB;QACD,OAAO,EAAE,OAAO,CAAC,KAAK;KACvB,CAAC,CAAC,CAAA;IAEH,OAAO,CACL,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,gBAAgB,CAAC,CACzF;MAAA,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAChC;QAAA,CAAC,sBAAsB,CACrB;UAAA,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,eAAe,CAAC,CACxC;YAAA,CAAC,KAAK,CACJ,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAChB,uBAAuB,CAAC,CAAC,MAAM,CAAC,oBAAoB,CAAC,CACrD,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAC5B,kBAAkB,CAAC,CAAC,mBAAmB,CAAC,CACxC,UAAU,CAAC,SAAS,CACpB,QAAQ,CAAC,CAAC,IAAI,CAAC,CACf,GAAG,CAAC,EAAE,EAEV;UAAA,EAAE,eAAe,CACjB;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,iBAAiB,CAAC,SAAS,CAC5D;YAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,qBAAqB,CAAC,CACxC;cAAA,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CACvE;gBAAA,CAAC,UAAU,CACb;cAAA,EAAE,OAAO,CACT;cAAA,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAC3D;gBAAA,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAC/B;cAAA,EAAE,IAAI,CACR;YAAA,EAAE,IAAI,CACN;YAAA,CAAC,UAAU,CACT,OAAO,CAAC,CAAC,mBAAmB,CAAC,CAC7B,IAAI,CAAC,mBAAmB,CACxB,iBAAiB,CAAC,MAAM,CACxB,kBAAkB,CAAC,uBAAuB,CAC1C,iBAAiB,CAAC,yDAAyD,CAC3E,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAC3B,SAAS,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CACnC,IAAI,CAAC,IAAI,EAEX;YAAA,CAAC,UAAU,CACT,OAAO,CAAC,CAAC,gBAAgB,CAAC,CAC1B,IAAI,CAAC,WAAW,CAChB,kBAAkB,CAAC,aAAa,CAChC,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAC3B,SAAS,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAEvC;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,sBAAsB,CAC1B;MAAA,EAAE,YAAY,CAChB;IAAA,EAAE,KAAK,CAAC,CACT,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,SAAS,GAAG,CAAC,EAAE,UAAU,GAAG,GAAG,EAAE,WAAW,GAAG,GAAG,KAAqB,EAAE,EAAE,EAAE;IACjF,MAAM,eAAe,GAAG,MAAM,CAAC,aAAa,CAAA;IAC5C,MAAM,0BAA0B,GAAG,OAAO,CACxC,GAAG,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAC1D,CAAC,eAAe,CAAC,CAClB,CAAA;IAED,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,QAAQ,EAAE,MAAM;SACjB;QACD,YAAY,EAAE;YACZ,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,GAAG;YACb,WAAW,EAAE,UAAU,GAAG,WAAW;SACtC;QACD,KAAK,EAAE;YACL,YAAY,EAAE,CAAC;SAChB;QACD,KAAK,EAAE;YACL,IAAI,EAAE,CAAC;YACP,eAAe;YACf,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;SACrB;QACD,aAAa,EAAE;YACb,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,YAAY;YACnB,eAAe;SAChB;QACD,oBAAoB,EAAE;YACpB,eAAe;SAChB;QACD,aAAa,EAAE;YACb,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,EAAE;YACP,iBAAiB,EAAE,EAAE;YACrB,UAAU,EAAE,EAAE;YACd,aAAa,EAAE,CAAC;YAChB,eAAe,EAAE,0BAA0B;SAC5C;QACD,qBAAqB,EAAE;YACrB,IAAI,EAAE,CAAC;SACR;QACD,kBAAkB,EAAE;YAClB,WAAW,EAAE,MAAM;YACnB,UAAU,EAAE,CAAC;YACb,KAAK,EAAE,MAAM,CAAC,cAAc;SAC7B;QACD,qBAAqB,EAAE;YACrB,KAAK,EAAE,MAAM,CAAC,cAAc;SAC7B;QACD,YAAY,EAAE;YACZ,eAAe;YACf,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE;YACT,YAAY,EAAE,EAAE;YAChB,WAAW,EAAE,CAAC;YACd,WAAW,EAAE,MAAM,CAAC,cAAc;SACnC;QACD,gBAAgB,EAAE;YAChB,KAAK,EAAE,MAAM,CAAC,cAAc;SAC7B;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React, { useMemo, useState, Dispatch, SetStateAction } from 'react'\nimport { StyleSheet, Modal, SafeAreaView, View, Linking, Dimensions } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'\nimport { runOnJS, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated'\nimport { tokens } from '../../../vendor/tapestry/tokens'\nimport { IconButton, Image, Heading, Text } from '../../display'\nimport colorFunction from 'color'\nimport { formatDatePreview } from '../../../utils/date'\nimport { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'\nimport { PlatformPressable } from '@react-navigation/elements'\nimport { useTheme } from '../../../hooks'\n\nconst { width: WINDOW_WIDTH, height: WINDOW_HEIGHT } = Dimensions.get('window')\nconst DISMISS_PAN_THRESHOLD = 300\nconst DEFAULT_OPACITY = 1\nconst DEFAULT_SCALE = 1\nconst MIN_SCALE = 0.5\nconst MAX_SCALE = 5\nconst DOUBLE_TAP_ZOOM_SCALE = 2\nconst RESET_SPRING_CONFIG = {\n  damping: 20,\n  stiffness: 150,\n}\n\nexport type MetaProps = {\n  authorName: string\n  createdAt: string\n}\n\nexport function ImageAttachment({\n  attachment,\n  metaProps,\n  onMessageAttachmentLongPress,\n}: {\n  attachment: DenormalizedMessageAttachmentResource\n  metaProps: MetaProps\n  onMessageAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void\n}) {\n  const { attributes } = attachment\n  const { url, urlMedium, filename, metadata = {} } = attributes\n  const { colors } = useTheme()\n\n  const styles = useStyles({ imageWidth: metadata.width, imageHeight: metadata.height })\n  const [visible, setVisible] = useState(false)\n\n  return (\n    <>\n      <PlatformPressable\n        style={styles.container}\n        onPress={() => setVisible(true)}\n        onLongPress={() => onMessageAttachmentLongPress(attachment)}\n        android_ripple={{ color: colors.androidRippleNeutral, foreground: true }}\n        accessibilityHint=\"Long press for more options\"\n      >\n        <Image\n          source={{ uri: urlMedium || url }}\n          style={styles.image}\n          wrapperStyle={styles.imageWrapper}\n          alt={filename}\n        />\n      </PlatformPressable>\n      <LightboxModal\n        visible={visible}\n        setModalVisible={setVisible}\n        uri={urlMedium || url}\n        metaProps={metaProps}\n        imageWidth={metadata.width}\n        imageHeight={metadata.height}\n      />\n    </>\n  )\n}\n\ninterface LightboxModalProps {\n  visible: boolean\n  setModalVisible: Dispatch<SetStateAction<boolean>>\n  uri: string\n  metaProps: MetaProps\n  imageWidth?: number\n  imageHeight?: number\n}\n\nconst LightboxModal = ({\n  uri,\n  visible,\n  setModalVisible,\n  metaProps,\n  imageWidth,\n  imageHeight,\n}: LightboxModalProps) => {\n  const styles = useStyles()\n  const insets = useSafeAreaInsets()\n\n  const { authorName, createdAt } = metaProps\n\n  // Calculate available space for image display\n  const availableWindowWidth = WINDOW_WIDTH\n  const availableWindowHeight = WINDOW_HEIGHT - insets.top - insets.bottom\n\n  /* ============================\n   ANIMATION VALUES\n  ============================ */\n  const dismissY = useSharedValue(0) // vertical distance to dismiss modal\n  const opacity = useSharedValue(DEFAULT_OPACITY) // opacity of modal\n  const scale = useSharedValue(DEFAULT_SCALE) // zoom level of image\n  const focalX = useSharedValue(0) // focal point of image between fingers\n  const focalY = useSharedValue(0) // focal point of image between fingers\n  const translateX = useSharedValue(0) // horizontal distance to pan image\n  const translateY = useSharedValue(0) // vertical distance to pan image\n  const savedScale = useSharedValue(DEFAULT_SCALE) // previous zoom level\n  const savedTranslateX = useSharedValue(0) // previous horizontal position\n  const savedTranslateY = useSharedValue(0) // previous vertical position\n\n  /* ============================\n   HANDLERS\n  ============================ */\n  const handleOpenInBrowser = () => {\n    Linking.openURL(uri)\n  }\n\n  const resetDismissGestures = () => {\n    dismissY.value = withSpring(0, RESET_SPRING_CONFIG)\n    opacity.value = withSpring(DEFAULT_OPACITY, RESET_SPRING_CONFIG)\n  }\n\n  const resetAllGestures = () => {\n    resetDismissGestures()\n    scale.value = withSpring(DEFAULT_SCALE, RESET_SPRING_CONFIG)\n    translateX.value = withSpring(0, RESET_SPRING_CONFIG)\n    translateY.value = withSpring(0, RESET_SPRING_CONFIG)\n    savedScale.value = DEFAULT_SCALE\n    savedTranslateX.value = 0\n    savedTranslateY.value = 0\n  }\n\n  const handleCloseModal = () => {\n    setModalVisible(false)\n    resetAllGestures()\n  }\n\n  /* ============================\n   UTILITY FUNCTIONS\n   'worklet' runs functions on the UI thread, instead of the JS thread for better performance\n  ============================ */\n  const getImageContainedToWindowDimensions = () => {\n    'worklet'\n\n    if (!imageWidth || !imageHeight) {\n      return { width: availableWindowWidth, height: availableWindowHeight }\n    }\n\n    const imageAspectRatio = imageWidth / imageHeight\n    const windowAspectRatio = availableWindowWidth / availableWindowHeight\n\n    // Constrain image width if its wider than window\n    if (imageAspectRatio > windowAspectRatio) {\n      return {\n        width: availableWindowWidth,\n        height: availableWindowWidth / imageAspectRatio,\n      }\n    }\n\n    // Constrain image height if its taller than window\n    return {\n      width: availableWindowHeight * imageAspectRatio,\n      height: availableWindowHeight,\n    }\n  }\n\n  const zoomToFocalPoint = ({\n    focalPointX,\n    focalPointY,\n    targetScale,\n    currentSavedScale,\n    currentSavedTranslateX,\n    currentSavedTranslateY,\n  }: {\n    focalPointX: number\n    focalPointY: number\n    targetScale: number\n    currentSavedScale: number\n    currentSavedTranslateX: number\n    currentSavedTranslateY: number\n  }) => {\n    'worklet'\n\n    // How far the focal point is from the center of the window\n    const windowCenterX = WINDOW_WIDTH / 2\n    const windowCenterY = WINDOW_HEIGHT / 2\n\n    // Position of focal point relative to current image position\n    const focalRelativeX = focalPointX - windowCenterX - currentSavedTranslateX\n    const focalRelativeY = focalPointY - windowCenterY - currentSavedTranslateY\n\n    // Calculate new translation to keep focal point under fingers\n    const scaleRatio = targetScale / currentSavedScale\n    const newTranslateX = currentSavedTranslateX + focalRelativeX * (1 - scaleRatio)\n    const newTranslateY = currentSavedTranslateY + focalRelativeY * (1 - scaleRatio)\n\n    return {\n      translateX: newTranslateX,\n      translateY: newTranslateY,\n    }\n  }\n\n  const clampTranslation = ({\n    x,\n    y,\n    currentScale,\n    allowGestureOvershoot = false,\n  }: {\n    x: number\n    y: number\n    currentScale: number\n    allowGestureOvershoot?: boolean\n  }) => {\n    'worklet'\n\n    const { width: containedImageWidth, height: containedImageHeight } =\n      getImageContainedToWindowDimensions()\n\n    // Image dimensions after scaling / zooming\n    const scaledWidth = containedImageWidth * currentScale\n    const scaledHeight = containedImageHeight * currentScale\n\n    // How much the scaled image exceeds the window container\n    const excessWidth = scaledWidth - availableWindowWidth\n    const excessHeight = scaledHeight - availableWindowHeight\n\n    // How far the image can move in each direction\n    const maxTranslateX = Math.max(0, excessWidth / 2)\n    const maxTranslateY = Math.max(0, excessHeight / 2)\n\n    if (allowGestureOvershoot) {\n      const overshoot = 20\n      return {\n        x: Math.min(maxTranslateX + overshoot, Math.max(-maxTranslateX - overshoot, x)),\n        y: Math.min(maxTranslateY + overshoot, Math.max(-maxTranslateY - overshoot, y)),\n      }\n    }\n\n    return {\n      x: Math.min(maxTranslateX, Math.max(-maxTranslateX, x)),\n      y: Math.min(maxTranslateY, Math.max(-maxTranslateY, y)),\n    }\n  }\n\n  const isImageAtVerticalBoundry = (currentScale: number) => {\n    'worklet'\n\n    const { height: containedImageHeight } = getImageContainedToWindowDimensions()\n\n    // Calculate how much the image can exceed the window container\n    const scaledHeight = containedImageHeight * currentScale\n    const excessHeight = scaledHeight - availableWindowHeight\n    const maxTranslateY = Math.max(0, excessHeight / 2)\n\n    const currentTranslateY = translateY.value\n    const panPositionTolerance = 1 // buffer to account for translateY being at a subpixel position\n\n    const atTopBoundry = currentTranslateY >= maxTranslateY - panPositionTolerance\n    const atBottomBoundry = currentTranslateY <= -maxTranslateY + panPositionTolerance\n\n    return atTopBoundry || atBottomBoundry\n  }\n\n  /* ============================\n   GESTURES\n  ============================ */\n  const doubleTapGesture = Gesture.Tap()\n    .numberOfTaps(2)\n    .onStart(e => {\n      const isZoomedIn = scale.value > DEFAULT_SCALE\n      if (isZoomedIn) {\n        runOnJS(resetAllGestures)()\n      } else {\n        // Zoom to 2x at tap location\n        const newTranslation = zoomToFocalPoint({\n          focalPointX: e.x,\n          focalPointY: e.y,\n          targetScale: DOUBLE_TAP_ZOOM_SCALE,\n          currentSavedScale: savedScale.value,\n          currentSavedTranslateX: savedTranslateX.value,\n          currentSavedTranslateY: savedTranslateY.value,\n        })\n\n        // Apply clamping to ensure image edges remain within window boundaries\n        const clampedTranslate = clampTranslation({\n          x: newTranslation.translateX,\n          y: newTranslation.translateY,\n          currentScale: DOUBLE_TAP_ZOOM_SCALE,\n        })\n\n        // Animate to new scale and translation\n        scale.value = withSpring(DOUBLE_TAP_ZOOM_SCALE, RESET_SPRING_CONFIG)\n        translateX.value = withSpring(clampedTranslate.x, RESET_SPRING_CONFIG)\n        translateY.value = withSpring(clampedTranslate.y, RESET_SPRING_CONFIG)\n\n        // Update saved state for next gesture\n        savedScale.value = DOUBLE_TAP_ZOOM_SCALE\n        savedTranslateX.value = clampedTranslate.x\n        savedTranslateY.value = clampedTranslate.y\n      }\n    })\n\n  const pinchGesture = Gesture.Pinch()\n    .onStart(e => {\n      focalX.value = e.focalX\n      focalY.value = e.focalY\n    })\n    .onUpdate(e => {\n      // Zoom image in/out within scale limits\n      const newScale = savedScale.value * e.scale\n      const newScaleClamped = Math.min(MAX_SCALE, Math.max(MIN_SCALE, newScale))\n      scale.value = newScaleClamped\n\n      // Calculate new translation to keep focal point under fingers\n      const newTranslation = zoomToFocalPoint({\n        focalPointX: focalX.value,\n        focalPointY: focalY.value,\n        targetScale: newScaleClamped,\n        currentSavedScale: savedScale.value,\n        currentSavedTranslateX: savedTranslateX.value,\n        currentSavedTranslateY: savedTranslateY.value,\n      })\n\n      // Apply translation without clamping to ensure focal point doesn't jump during gesture\n      translateX.value = newTranslation.translateX\n      translateY.value = newTranslation.translateY\n    })\n    .onEnd(() => {\n      const currentScale = scale.value\n\n      // Dismiss modal if fully zoomed out\n      if (currentScale <= MIN_SCALE) {\n        runOnJS(handleCloseModal)()\n        return\n      }\n\n      // Reset all gestures if image is near default scale\n      const isNearDefaultScale = currentScale <= DEFAULT_SCALE + 0.1\n      if (isNearDefaultScale) {\n        runOnJS(resetAllGestures)()\n        return\n      }\n\n      // Ensure image edges remain within window boundaries\n      const clampedTranslate = clampTranslation({\n        x: translateX.value,\n        y: translateY.value,\n        currentScale: currentScale,\n      })\n      translateX.value = withSpring(clampedTranslate.x, RESET_SPRING_CONFIG)\n      translateY.value = withSpring(clampedTranslate.y, RESET_SPRING_CONFIG)\n\n      // Save state for next gesture\n      savedScale.value = currentScale\n      savedTranslateX.value = clampedTranslate.x\n      savedTranslateY.value = clampedTranslate.y\n    })\n\n  const panGesture = Gesture.Pan()\n    .onUpdate(e => {\n      // Only pan if image is zoomed in\n      if (scale.value <= DEFAULT_SCALE) return\n\n      const newTranslateX = savedTranslateX.value + e.translationX\n      const newTranslateY = savedTranslateY.value + e.translationY\n\n      // Ensure image edges remain within window boundaries\n      const clampedTranslate = clampTranslation({\n        x: newTranslateX,\n        y: newTranslateY,\n        currentScale: scale.value,\n        allowGestureOvershoot: true,\n      })\n      translateX.value = clampedTranslate.x\n      translateY.value = clampedTranslate.y\n    })\n    .onEnd(() => {\n      // Prevents saving pan position if image is zoomed out while panning\n      if (scale.value <= DEFAULT_SCALE) return\n\n      // Spring image back to window boundaries if overshot\n      const clampedTranslate = clampTranslation({\n        x: translateX.value,\n        y: translateY.value,\n        currentScale: scale.value,\n      })\n      translateX.value = withSpring(clampedTranslate.x, RESET_SPRING_CONFIG)\n      translateY.value = withSpring(clampedTranslate.y, RESET_SPRING_CONFIG)\n\n      // Save the current position for the next gesture\n      savedTranslateX.value = clampedTranslate.x\n      savedTranslateY.value = clampedTranslate.y\n    })\n\n  const panToDismissModalGesture = Gesture.Pan()\n    .onUpdate(e => {\n      const atDefaultScale = scale.value === DEFAULT_SCALE\n\n      // Calculate zoom conditions for dismissing modal\n      const atVerticalBoundry = isImageAtVerticalBoundry(scale.value)\n      const panDirectionIsPrimarilyVertical = Math.abs(e.translationY) > Math.abs(e.translationX)\n      const canDismissWhileZoomed = atVerticalBoundry && panDirectionIsPrimarilyVertical\n\n      if (atDefaultScale || canDismissWhileZoomed) {\n        const panDistance = Math.abs(e.translationY)\n        const fadeProgress = panDistance / DISMISS_PAN_THRESHOLD\n\n        opacity.value = Math.max(0, DEFAULT_OPACITY - fadeProgress)\n        dismissY.value = e.translationY\n      }\n    })\n    .onEnd(() => {\n      const exceededDismissThreshold = Math.abs(dismissY.value) > DISMISS_PAN_THRESHOLD\n\n      if (exceededDismissThreshold) {\n        runOnJS(handleCloseModal)()\n      } else {\n        runOnJS(resetDismissGestures)()\n      }\n    })\n\n  /* ==============================\n   IMPLEMENT GESTURES & ANIMATIONS\n  ================================= */\n  // Race between pinch and pan ensures only one is active at a time, preventing issues with zooming to focal point between fingers\n  const pinchOrPanGestures = Gesture.Race(pinchGesture, panGesture)\n\n  // Race between double-tap and pinch/pan ensures that pinch/pan can't interrupt double-tap\n  const transformImageGestures = Gesture.Race(doubleTapGesture, pinchOrPanGestures)\n\n  // Dismiss can work simultaneously with all gestures\n  const composedGesture = Gesture.Simultaneous(transformImageGestures, panToDismissModalGesture)\n\n  const animatedImageStyles = useAnimatedStyle(() => ({\n    transform: [\n      { translateX: translateX.value },\n      { translateY: translateY.value + dismissY.value },\n      { scale: scale.value },\n    ],\n    opacity: opacity.value,\n  }))\n\n  return (\n    <Modal visible={visible} transparent animationType=\"fade\" onRequestClose={handleCloseModal}>\n      <SafeAreaView style={styles.modal}>\n        <GestureHandlerRootView>\n          <GestureDetector gesture={composedGesture}>\n            <Image\n              source={{ uri }}\n              loadingBackgroundStyles={styles.lightboxImageLoading}\n              style={styles.lightboxImage}\n              animatedImageStyle={animatedImageStyles}\n              resizeMode=\"contain\"\n              animated={true}\n              alt=\"\"\n            />\n          </GestureDetector>\n          <View style={styles.actionToolbar} accessibilityRole=\"toolbar\">\n            <View style={styles.actionToolbarTextMeta}>\n              <Heading variant=\"h3\" style={styles.actionToolbarTitle} numberOfLines={1}>\n                {authorName}\n              </Heading>\n              <Text variant=\"tertiary\" style={styles.actionToolbarSubtitle}>\n                {formatDatePreview(createdAt)}\n              </Text>\n            </View>\n            <IconButton\n              onPress={handleOpenInBrowser}\n              name=\"general.newWindow\"\n              accessibilityRole=\"link\"\n              accessibilityLabel=\"Open image in browser\"\n              accessibilityHint=\"Image can be downloaded and shared through the browser.\"\n              style={styles.actionButton}\n              iconStyle={styles.actionButtonIcon}\n              size=\"lg\"\n            />\n            <IconButton\n              onPress={handleCloseModal}\n              name=\"general.x\"\n              accessibilityLabel=\"Close image\"\n              style={styles.actionButton}\n              iconStyle={styles.actionButtonIcon}\n            />\n          </View>\n        </GestureHandlerRootView>\n      </SafeAreaView>\n    </Modal>\n  )\n}\n\ninterface UseStylesProps {\n  imageWidth?: number\n  imageHeight?: number\n}\n\nconst useStyles = ({ imageWidth = 100, imageHeight = 100 }: UseStylesProps = {}) => {\n  const backgroundColor = tokens.colorNeutral7\n  const transparentBackgroundColor = useMemo(\n    () => colorFunction(backgroundColor).alpha(0.8).toString(),\n    [backgroundColor]\n  )\n\n  return StyleSheet.create({\n    container: {\n      maxWidth: '100%',\n    },\n    imageWrapper: {\n      width: '100%',\n      minWidth: 200,\n      aspectRatio: imageWidth / imageHeight,\n    },\n    image: {\n      borderRadius: 8,\n    },\n    modal: {\n      flex: 1,\n      backgroundColor,\n      justifyContent: 'center',\n      alignItems: 'center',\n    },\n    lightboxImage: {\n      height: '100%',\n      width: WINDOW_WIDTH,\n      backgroundColor,\n    },\n    lightboxImageLoading: {\n      backgroundColor,\n    },\n    actionToolbar: {\n      width: '100%',\n      position: 'absolute',\n      top: 0,\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 20,\n      paddingHorizontal: 16,\n      paddingTop: 16,\n      paddingBottom: 8,\n      backgroundColor: transparentBackgroundColor,\n    },\n    actionToolbarTextMeta: {\n      flex: 1,\n    },\n    actionToolbarTitle: {\n      marginRight: 'auto',\n      flexShrink: 1,\n      color: tokens.colorNeutral88,\n    },\n    actionToolbarSubtitle: {\n      color: tokens.colorNeutral68,\n    },\n    actionButton: {\n      backgroundColor,\n      height: 40,\n      width: 40,\n      borderRadius: 50,\n      borderWidth: 1,\n      borderColor: tokens.colorNeutral24,\n    },\n    actionButtonIcon: {\n      color: tokens.colorNeutral88,\n    },\n  })\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.11.0-rc.2",
+  "version": "3.11.0-rc.4",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -55,5 +55,5 @@
     "prettier": "^3.4.2",
     "typescript": "<5.6.0"
   },
-  "gitHead": "e3035cb2dfb6434b91ecc562f115158a5c2ed051"
+  "gitHead": "070a5b47b238e467d37ee3721fcf618e68bc3301"
 }

package/src/components/conversation/attachments/image_attachment.tsx

@@ -1,26 +1,8 @@
-import React, { useCallback, useMemo, useState } from 'react'
-import {
-  StyleSheet,
-  Modal,
-  useWindowDimensions,
-  SafeAreaView,
-  View,
-  Linking,
-  ImageStyle,
-} from 'react-native'
-import {
-  Gesture,
-  GestureDetector,
-  GestureHandlerRootView,
-  type PanGesture,
-} from 'react-native-gesture-handler'
-import {
-  runOnJS,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-  type AnimatedStyle,
-} from 'react-native-reanimated'
+import React, { useMemo, useState, Dispatch, SetStateAction } from 'react'
+import { StyleSheet, Modal, SafeAreaView, View, Linking, Dimensions } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
+import { runOnJS, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated'
 import { tokens } from '../../../vendor/tapestry/tokens'
 import { IconButton, Image, Heading, Text } from '../../display'
 import colorFunction from 'color'
@@ -29,7 +11,17 @@ import { DenormalizedMessageAttachmentResource } from '../../../types/resources/
 import { PlatformPressable } from '@react-navigation/elements'
 import { useTheme } from '../../../hooks'
 
-const PAN_THRESHOLD_PX = 300
+const { width: WINDOW_WIDTH, height: WINDOW_HEIGHT } = Dimensions.get('window')
+const DISMISS_PAN_THRESHOLD = 300
+const DEFAULT_OPACITY = 1
+const DEFAULT_SCALE = 1
+const MIN_SCALE = 0.5
+const MAX_SCALE = 5
+const DOUBLE_TAP_ZOOM_SCALE = 2
+const RESET_SPRING_CONFIG = {
+  damping: 20,
+  stiffness: 150,
+}
 
 export type MetaProps = {
   authorName: string
@@ -52,34 +44,6 @@ export function ImageAttachment({
   const styles = useStyles({ imageWidth: metadata.width, imageHeight: metadata.height })
   const [visible, setVisible] = useState(false)
 
-  // shared values run on the native UI thread and prevents clogging up the JS thread
-  const dismissY = useSharedValue(0)
-  const opacity = useSharedValue(1)
-
-  const resetAnimations = useCallback(() => {
-    dismissY.value = withTiming(0)
-    opacity.value = withTiming(1)
-  }, [dismissY, opacity])
-
-  const handleCloseModal = useCallback(() => {
-    setVisible(false)
-    resetAnimations()
-  }, [setVisible, resetAnimations])
-
-  const panGesture = Gesture.Pan()
-    .onUpdate(e => {
-      dismissY.value = e.translationY
-      opacity.value = 1 - Math.abs(e.translationY) / PAN_THRESHOLD_PX
-    })
-    .onEnd(() => {
-      runOnJS(handleCloseModal)() // Ensures we can call a JS function
-    })
-
-  const animatedImageStyle = useAnimatedStyle(() => ({
-    transform: [{ translateY: dismissY.value }],
-    opacity: opacity.value,
-  }))
-
   return (
     <>
       <PlatformPressable
@@ -98,11 +62,11 @@ export function ImageAttachment({
       </PlatformPressable>
       <LightboxModal
         visible={visible}
-        handleCloseModal={handleCloseModal}
+        setModalVisible={setVisible}
         uri={urlMedium || url}
         metaProps={metaProps}
-        panGesture={panGesture}
-        animatedImageStyle={animatedImageStyle}
+        imageWidth={metadata.width}
+        imageHeight={metadata.height}
       />
     </>
   )
@@ -110,39 +74,386 @@ export function ImageAttachment({
 
 interface LightboxModalProps {
   visible: boolean
-  handleCloseModal: () => void
+  setModalVisible: Dispatch<SetStateAction<boolean>>
   uri: string
   metaProps: MetaProps
-  panGesture: PanGesture
-  animatedImageStyle: AnimatedStyle<ImageStyle>
+  imageWidth?: number
+  imageHeight?: number
 }
 
 const LightboxModal = ({
   uri,
   visible,
-  handleCloseModal,
+  setModalVisible,
   metaProps,
-  panGesture,
-  animatedImageStyle,
+  imageWidth,
+  imageHeight,
 }: LightboxModalProps) => {
   const styles = useStyles()
+  const insets = useSafeAreaInsets()
 
   const { authorName, createdAt } = metaProps
 
+  // Calculate available space for image display
+  const availableWindowWidth = WINDOW_WIDTH
+  const availableWindowHeight = WINDOW_HEIGHT - insets.top - insets.bottom
+
+  /* ============================
+   ANIMATION VALUES
+  ============================ */
+  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 savedScale = useSharedValue(DEFAULT_SCALE) // previous zoom level
+  const savedTranslateX = useSharedValue(0) // previous horizontal position
+  const savedTranslateY = useSharedValue(0) // previous vertical position
+
+  /* ============================
+   HANDLERS
+  ============================ */
   const handleOpenInBrowser = () => {
     Linking.openURL(uri)
   }
 
+  const resetDismissGestures = () => {
+    dismissY.value = withSpring(0, RESET_SPRING_CONFIG)
+    opacity.value = withSpring(DEFAULT_OPACITY, RESET_SPRING_CONFIG)
+  }
+
+  const resetAllGestures = () => {
+    resetDismissGestures()
+    scale.value = withSpring(DEFAULT_SCALE, RESET_SPRING_CONFIG)
+    translateX.value = withSpring(0, RESET_SPRING_CONFIG)
+    translateY.value = withSpring(0, RESET_SPRING_CONFIG)
+    savedScale.value = DEFAULT_SCALE
+    savedTranslateX.value = 0
+    savedTranslateY.value = 0
+  }
+
+  const handleCloseModal = () => {
+    setModalVisible(false)
+    resetAllGestures()
+  }
+
+  /* ============================
+   UTILITY FUNCTIONS
+   'worklet' runs functions on the UI thread, instead of the JS thread for better performance
+  ============================ */
+  const getImageContainedToWindowDimensions = () => {
+    'worklet'
+
+    if (!imageWidth || !imageHeight) {
+      return { width: availableWindowWidth, height: availableWindowHeight }
+    }
+
+    const imageAspectRatio = imageWidth / imageHeight
+    const windowAspectRatio = availableWindowWidth / availableWindowHeight
+
+    // Constrain image width if its wider than window
+    if (imageAspectRatio > windowAspectRatio) {
+      return {
+        width: availableWindowWidth,
+        height: availableWindowWidth / imageAspectRatio,
+      }
+    }
+
+    // Constrain image height if its taller than window
+    return {
+      width: availableWindowHeight * imageAspectRatio,
+      height: availableWindowHeight,
+    }
+  }
+
+  const zoomToFocalPoint = ({
+    focalPointX,
+    focalPointY,
+    targetScale,
+    currentSavedScale,
+    currentSavedTranslateX,
+    currentSavedTranslateY,
+  }: {
+    focalPointX: number
+    focalPointY: number
+    targetScale: number
+    currentSavedScale: number
+    currentSavedTranslateX: number
+    currentSavedTranslateY: number
+  }) => {
+    'worklet'
+
+    // How far the focal point is from the center of the window
+    const windowCenterX = WINDOW_WIDTH / 2
+    const windowCenterY = WINDOW_HEIGHT / 2
+
+    // Position of focal point relative to current image position
+    const focalRelativeX = focalPointX - windowCenterX - currentSavedTranslateX
+    const focalRelativeY = focalPointY - windowCenterY - currentSavedTranslateY
+
+    // Calculate new translation to keep focal point under fingers
+    const scaleRatio = targetScale / currentSavedScale
+    const newTranslateX = currentSavedTranslateX + focalRelativeX * (1 - scaleRatio)
+    const newTranslateY = currentSavedTranslateY + focalRelativeY * (1 - scaleRatio)
+
+    return {
+      translateX: newTranslateX,
+      translateY: newTranslateY,
+    }
+  }
+
+  const clampTranslation = ({
+    x,
+    y,
+    currentScale,
+    allowGestureOvershoot = false,
+  }: {
+    x: number
+    y: number
+    currentScale: number
+    allowGestureOvershoot?: boolean
+  }) => {
+    'worklet'
+
+    const { width: containedImageWidth, height: containedImageHeight } =
+      getImageContainedToWindowDimensions()
+
+    // Image dimensions after scaling / zooming
+    const scaledWidth = containedImageWidth * currentScale
+    const scaledHeight = containedImageHeight * currentScale
+
+    // How much the scaled image exceeds the window container
+    const excessWidth = scaledWidth - availableWindowWidth
+    const excessHeight = scaledHeight - availableWindowHeight
+
+    // How far the image can move in each direction
+    const maxTranslateX = Math.max(0, excessWidth / 2)
+    const maxTranslateY = Math.max(0, excessHeight / 2)
+
+    if (allowGestureOvershoot) {
+      const overshoot = 20
+      return {
+        x: Math.min(maxTranslateX + overshoot, Math.max(-maxTranslateX - overshoot, x)),
+        y: Math.min(maxTranslateY + overshoot, Math.max(-maxTranslateY - overshoot, y)),
+      }
+    }
+
+    return {
+      x: Math.min(maxTranslateX, Math.max(-maxTranslateX, x)),
+      y: Math.min(maxTranslateY, Math.max(-maxTranslateY, y)),
+    }
+  }
+
+  const isImageAtVerticalBoundry = (currentScale: number) => {
+    'worklet'
+
+    const { height: containedImageHeight } = getImageContainedToWindowDimensions()
+
+    // 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 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
+  }
+
+  /* ============================
+   GESTURES
+  ============================ */
+  const doubleTapGesture = Gesture.Tap()
+    .numberOfTaps(2)
+    .onStart(e => {
+      const isZoomedIn = scale.value > DEFAULT_SCALE
+      if (isZoomedIn) {
+        runOnJS(resetAllGestures)()
+      } else {
+        // Zoom to 2x at tap location
+        const newTranslation = zoomToFocalPoint({
+          focalPointX: e.x,
+          focalPointY: e.y,
+          targetScale: DOUBLE_TAP_ZOOM_SCALE,
+          currentSavedScale: savedScale.value,
+          currentSavedTranslateX: savedTranslateX.value,
+          currentSavedTranslateY: savedTranslateY.value,
+        })
+
+        // Apply clamping to ensure image edges remain within window boundaries
+        const clampedTranslate = clampTranslation({
+          x: newTranslation.translateX,
+          y: newTranslation.translateY,
+          currentScale: DOUBLE_TAP_ZOOM_SCALE,
+        })
+
+        // Animate to new scale and translation
+        scale.value = withSpring(DOUBLE_TAP_ZOOM_SCALE, RESET_SPRING_CONFIG)
+        translateX.value = withSpring(clampedTranslate.x, RESET_SPRING_CONFIG)
+        translateY.value = withSpring(clampedTranslate.y, RESET_SPRING_CONFIG)
+
+        // Update saved state for next gesture
+        savedScale.value = DOUBLE_TAP_ZOOM_SCALE
+        savedTranslateX.value = clampedTranslate.x
+        savedTranslateY.value = clampedTranslate.y
+      }
+    })
+
+  const pinchGesture = Gesture.Pinch()
+    .onStart(e => {
+      focalX.value = e.focalX
+      focalY.value = e.focalY
+    })
+    .onUpdate(e => {
+      // Zoom image in/out within scale limits
+      const newScale = savedScale.value * e.scale
+      const newScaleClamped = Math.min(MAX_SCALE, Math.max(MIN_SCALE, newScale))
+      scale.value = newScaleClamped
+
+      // Calculate new translation to keep focal point under fingers
+      const newTranslation = zoomToFocalPoint({
+        focalPointX: focalX.value,
+        focalPointY: focalY.value,
+        targetScale: newScaleClamped,
+        currentSavedScale: savedScale.value,
+        currentSavedTranslateX: savedTranslateX.value,
+        currentSavedTranslateY: savedTranslateY.value,
+      })
+
+      // Apply translation without clamping to ensure focal point doesn't jump during gesture
+      translateX.value = newTranslation.translateX
+      translateY.value = newTranslation.translateY
+    })
+    .onEnd(() => {
+      const currentScale = scale.value
+
+      // Dismiss modal if fully zoomed out
+      if (currentScale <= MIN_SCALE) {
+        runOnJS(handleCloseModal)()
+        return
+      }
+
+      // Reset all gestures if image is near default scale
+      const isNearDefaultScale = currentScale <= DEFAULT_SCALE + 0.1
+      if (isNearDefaultScale) {
+        runOnJS(resetAllGestures)()
+        return
+      }
+
+      // Ensure image edges remain within window boundaries
+      const clampedTranslate = clampTranslation({
+        x: translateX.value,
+        y: translateY.value,
+        currentScale: currentScale,
+      })
+      translateX.value = withSpring(clampedTranslate.x, RESET_SPRING_CONFIG)
+      translateY.value = withSpring(clampedTranslate.y, RESET_SPRING_CONFIG)
+
+      // Save state for next gesture
+      savedScale.value = currentScale
+      savedTranslateX.value = clampedTranslate.x
+      savedTranslateY.value = clampedTranslate.y
+    })
+
+  const panGesture = Gesture.Pan()
+    .onUpdate(e => {
+      // Only pan if image is zoomed in
+      if (scale.value <= DEFAULT_SCALE) return
+
+      const newTranslateX = savedTranslateX.value + e.translationX
+      const newTranslateY = savedTranslateY.value + e.translationY
+
+      // Ensure image edges remain within window boundaries
+      const clampedTranslate = clampTranslation({
+        x: newTranslateX,
+        y: newTranslateY,
+        currentScale: scale.value,
+        allowGestureOvershoot: true,
+      })
+      translateX.value = clampedTranslate.x
+      translateY.value = clampedTranslate.y
+    })
+    .onEnd(() => {
+      // Prevents saving pan position if image is zoomed out while panning
+      if (scale.value <= DEFAULT_SCALE) return
+
+      // Spring image back to window boundaries if overshot
+      const clampedTranslate = clampTranslation({
+        x: translateX.value,
+        y: translateY.value,
+        currentScale: scale.value,
+      })
+      translateX.value = withSpring(clampedTranslate.x, RESET_SPRING_CONFIG)
+      translateY.value = withSpring(clampedTranslate.y, RESET_SPRING_CONFIG)
+
+      // Save the current position for the next gesture
+      savedTranslateX.value = clampedTranslate.x
+      savedTranslateY.value = clampedTranslate.y
+    })
+
+  const panToDismissModalGesture = Gesture.Pan()
+    .onUpdate(e => {
+      const atDefaultScale = scale.value === DEFAULT_SCALE
+
+      // Calculate zoom conditions for dismissing modal
+      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
+      }
+    })
+    .onEnd(() => {
+      const exceededDismissThreshold = Math.abs(dismissY.value) > DISMISS_PAN_THRESHOLD
+
+      if (exceededDismissThreshold) {
+        runOnJS(handleCloseModal)()
+      } else {
+        runOnJS(resetDismissGestures)()
+      }
+    })
+
+  /* ==============================
+   IMPLEMENT GESTURES & ANIMATIONS
+  ================================= */
+  // Race between pinch and pan ensures only one is active at a time, preventing issues with zooming to focal point between fingers
+  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)
+
+  // 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}>
       <SafeAreaView style={styles.modal}>
         <GestureHandlerRootView>
-          <GestureDetector gesture={panGesture}>
+          <GestureDetector gesture={composedGesture}>
             <Image
               source={{ uri }}
               loadingBackgroundStyles={styles.lightboxImageLoading}
               style={styles.lightboxImage}
-              animatedImageStyle={animatedImageStyle}
+              animatedImageStyle={animatedImageStyles}
               resizeMode="contain"
               animated={true}
               alt=""
@@ -187,7 +498,6 @@ interface UseStylesProps {
 }
 
 const useStyles = ({ imageWidth = 100, imageHeight = 100 }: UseStylesProps = {}) => {
-  const { width: windowWidth } = useWindowDimensions()
   const backgroundColor = tokens.colorNeutral7
   const transparentBackgroundColor = useMemo(
     () => colorFunction(backgroundColor).alpha(0.8).toString(),
@@ -214,7 +524,7 @@ const useStyles = ({ imageWidth = 100, imageHeight = 100 }: UseStylesProps = {})
     },
     lightboxImage: {
       height: '100%',
-      width: windowWidth,
+      width: WINDOW_WIDTH,
       backgroundColor,
     },
     lightboxImageLoading: {