diff --git a/android/app/build.gradle b/android/app/build.gradle
index 55101a2390..f2f96fc5a4 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -90,7 +90,7 @@ android {
         applicationId "com.arkhamcards"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 4195457
+        versionCode 4195458
         versionName "4.8.7"
         manifestPlaceholders = [
             appAuthRedirectScheme: 'arkhamcards'
diff --git a/package.json b/package.json
index e8d4acdcb5..f65fb8437c 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "@invertase/react-native-apple-authentication": "2.2.2",
     "@miblanchard/react-native-slider": "^2.3.1",
     "@op-engineering/op-sqlite": "9.1.2",
+    "@openspacelabs/react-native-zoomable-view": "^2.3.1",
     "@react-hook/debounce": "4.0.0",
     "@react-hook/throttle": "2.2.0",
     "@react-native-async-storage/async-storage": "1.24.0",
diff --git a/src/components/card/CardDetailView/CardDetailComponent.tsx b/src/components/card/CardDetailView/CardDetailComponent.tsx
index 1fb81b4f9e..c036430364 100644
--- a/src/components/card/CardDetailView/CardDetailComponent.tsx
+++ b/src/components/card/CardDetailView/CardDetailComponent.tsx
@@ -26,9 +26,10 @@ interface Props {
   tabooSetId?: number | undefined;
   toggleShowSpoilers?: (code: string) => void;
   showInvestigatorCards?: (code: string) => void;
+  toggleImageMode?: () => void;
 }
 
-function InvestigatorInfoComponent({ componentId, card, width, simple, showInvestigatorCards }: Props) {
+function InvestigatorInfoComponent({ componentId, card, width, simple, toggleImageMode, showInvestigatorCards }: Props) {
   const { colors, typography } = useContext(StyleContext);
   const [parallelInvestigators] = useParallelInvestigators(card.type_code === 'investigator' ? card.code : undefined);
   const showInvestigatorCardsPressed = useCallback(() => {
@@ -81,6 +82,7 @@ function InvestigatorInfoComponent({ componentId, card, width, simple, showInves
               card={parallel}
               width={width}
               simple={!!simple}
+              toggleImageMode={toggleImageMode}
             />
           )) }
         </>
@@ -152,7 +154,7 @@ function SpoilersComponent({ componentId, card, width, toggleShowSpoilers }: Pro
 
 export default function CardDetailComponent({
   componentId, card, backCard, width, showSpoilers, tabooSetId, simple, noImage,
-  toggleShowSpoilers, showInvestigatorCards,
+  toggleShowSpoilers, showInvestigatorCards, toggleImageMode,
 }: Props) {
   const { backgroundStyle } = useContext(StyleContext);
   const shouldBlur = !showSpoilers && !!(card && card.mythos_card);
@@ -181,6 +183,7 @@ export default function CardDetailComponent({
           width={width}
           simple={!!simple}
           noImage={noImage}
+          toggleImageMode={toggleImageMode}
         />
         { !simple && (
           <BondedCardsComponent
diff --git a/src/components/card/CardDetailView/PlayerCardImage.tsx b/src/components/card/CardDetailView/PlayerCardImage.tsx
index cb7d375561..de33a3766b 100644
--- a/src/components/card/CardDetailView/PlayerCardImage.tsx
+++ b/src/components/card/CardDetailView/PlayerCardImage.tsx
@@ -21,6 +21,7 @@ interface Props {
   componentId?: string;
   card: Card;
   size?: 'tiny';
+  onPress?: () => void;
 }
 
 function imageStyle(card: Card) {
@@ -126,7 +127,7 @@ function ImageContent({ card }: { card: Card }) {
   );
 }
 
-export default function PlayerCardImage({ componentId, card }: Props) {
+export default function PlayerCardImage({ componentId, card, ...props }: Props) {
   const { colors } = useContext(StyleContext);
   const onPress = useCallback(() => {
     if (componentId) {
@@ -144,7 +145,7 @@ export default function PlayerCardImage({ componentId, card }: Props) {
 
   if (componentId) {
     return (
-      <TouchableOpacity onPress={onPress}>
+      <TouchableOpacity onPress={props.onPress ?? onPress}>
         <ImageContent card={card} />
       </TouchableOpacity>
     );
diff --git a/src/components/card/CardDetailView/TwoSidedCardComponent/index.tsx b/src/components/card/CardDetailView/TwoSidedCardComponent/index.tsx
index 2cc7be8b5c..b91266e6f6 100644
--- a/src/components/card/CardDetailView/TwoSidedCardComponent/index.tsx
+++ b/src/components/card/CardDetailView/TwoSidedCardComponent/index.tsx
@@ -66,10 +66,11 @@ interface Props {
   width: number;
   noImage?: boolean;
   showBack?: boolean;
+  toggleImageMode?: () => void;
 }
 
 export default function TwoSidedCardComponent(props: Props) {
-  const { componentId, card, backCard, linked, notFirst, simple, width } = props;
+  const { componentId, card, backCard, linked, notFirst, simple, width, toggleImageMode } = props;
   const custom = card.custom();
   const { backgroundStyle, fontScale, shadow, colors, typography } = useContext(StyleContext);
   const [showBack, toggleShowBack] = useFlag(props.showBack ?? false);
@@ -286,6 +287,7 @@ export default function TwoSidedCardComponent(props: Props) {
             width={width}
             simple={simple}
             showBack={props.showBack}
+            toggleImageMode={toggleImageMode}
             key="linked"
           />
         </View>
@@ -367,7 +369,7 @@ export default function TwoSidedCardComponent(props: Props) {
     );
   }, [props.showBack, backCard, card, componentId, simple, width, linked, shadow.large,
     colors, backgroundStyle, typography, showBack, typeLine, cardFooter, flavorFirst,
-    toggleShowBack, showTaboo, showFaq]);
+    toggleImageMode, toggleShowBack, showTaboo, showFaq]);
 
   const image = useMemo(() => {
     if (card.type_code === 'story' || card.type_code === 'scenario' || props.noImage) {
@@ -377,17 +379,23 @@ export default function TwoSidedCardComponent(props: Props) {
       <View style={styles.column}>
         <View style={styles.playerImage}>
           { card.type_code === 'investigator' ? (
-            <InvestigatorImage card={card} componentId={componentId} imageLink />
+            <InvestigatorImage
+              card={card}
+              componentId={componentId}
+              imageLink
+              onPress={toggleImageMode}
+            />
           ) : (
             <PlayerCardImage
               card={card}
               componentId={componentId}
+              onPress={toggleImageMode}
             />
           ) }
         </View>
       </View>
     );
-  }, [card, componentId, props.noImage]);
+  }, [card, componentId, props.noImage, toggleImageMode]);
 
   const cardText = useMemo(() => {
     return (
diff --git a/src/components/card/CardImageView.tsx b/src/components/card/CardImageView.tsx
index 62eeb115ca..3d284d6e23 100644
--- a/src/components/card/CardImageView.tsx
+++ b/src/components/card/CardImageView.tsx
@@ -1,10 +1,12 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useCallback, useContext, useEffect } from 'react';
 import {
+  GestureResponderEvent,
+  PanResponderGestureState,
   StyleSheet,
   View,
 } from 'react-native';
 import { Image as FastImage } from 'expo-image';
-import ViewControl from 'react-native-zoom-view';
+import { ReactNativeZoomableView, ZoomableViewEvent } from '@openspacelabs/react-native-zoomable-view';
 import { Navigation } from 'react-native-navigation';
 import { t } from 'ttag';
 
@@ -18,6 +20,7 @@ import useSingleCard from './useSingleCard';
 
 export interface CardImageProps {
   id: string;
+  embedded?: boolean;
 }
 
 type Props = CardImageProps & NavigationProps;
@@ -32,18 +35,36 @@ function CardImageDetail({ card, flipped }: CardImageDetailProps) {
   const cardRatio = 68 / 95;
   const cardHeight = (height - HEADER_HEIGHT) * cardRatio;
   const cardWidth = width - 16;
+  const onShouldBlockNativeResponderHandler = useCallback((
+    event: GestureResponderEvent,
+    gestureState: PanResponderGestureState,
+    zoomableViewEventObject: ZoomableViewEvent
+  ): boolean => {
+    if (zoomableViewEventObject.zoomLevel === 1) {
+      return false;
+    }
+    return true;
+  }, []);
   if (!card) {
     return null;
   }
   if (card.double_sided || (card.linked_card && card.linked_card.hasImage())) {
     if (!flipped) {
       return (
-        <ViewControl
-          cropWidth={width}
-          cropHeight={height - HEADER_HEIGHT}
-          imageWidth={cardWidth}
-          imageHeight={cardHeight}
-          style={[styles.container, backgroundStyle]}
+        <ReactNativeZoomableView
+          maxZoom={3}
+          minZoom={1}
+          initialZoom={1}
+          style={{
+            width,
+            height: height - HEADER_HEIGHT,
+          }}
+          // contentWidth={cardWidth}
+          // contentHeight={cardHeight}
+          onShouldBlockNativeResponder={onShouldBlockNativeResponderHandler}
+          disablePanOnInitialZoom
+          panBoundaryPadding={10}
+          // style={[styles.container, backgroundStyle]}
         >
           <FastImage
             style={{ height: cardHeight, width: cardWidth }}
@@ -52,16 +73,26 @@ function CardImageDetail({ card, flipped }: CardImageDetailProps) {
             }}
             resizeMode="contain"
           />
-        </ViewControl>
+        </ReactNativeZoomableView>
       );
     }
     return (
-      <ViewControl
-        cropWidth={width}
-        cropHeight={height - HEADER_HEIGHT}
-        imageWidth={cardWidth}
-        imageHeight={cardHeight}
-        style={[styles.container, backgroundStyle]}
+      <ReactNativeZoomableView
+        maxZoom={3}
+        minZoom={1}
+        initialZoom={1}
+        // cropWidth={width}
+        // cropHeight={height - HEADER_HEIGHT}
+        contentWidth={cardWidth}
+        contentHeight={cardHeight}
+        disablePanOnInitialZoom
+        panBoundaryPadding={10}
+        onShouldBlockNativeResponder={onShouldBlockNativeResponderHandler}
+        style={{
+          width,
+          height: height - HEADER_HEIGHT,
+        }}
+        // style={[styles.container, backgroundStyle]}
       >
         <FastImage
           style={{ height: cardHeight, width: cardWidth }}
@@ -70,16 +101,26 @@ function CardImageDetail({ card, flipped }: CardImageDetailProps) {
           }}
           resizeMode="contain"
         />
-      </ViewControl>
+      </ReactNativeZoomableView>
     );
   }
   return (
-    <ViewControl
-      cropWidth={width}
-      cropHeight={height - HEADER_HEIGHT}
-      imageWidth={cardWidth}
-      imageHeight={cardHeight}
-      style={[styles.container, backgroundStyle]}
+    <ReactNativeZoomableView
+      maxZoom={3}
+      minZoom={1}
+      initialZoom={1}
+      // cropWidth={width}
+      // cropHeight={height - HEADER_HEIGHT}
+      contentWidth={cardWidth}
+      contentHeight={cardHeight}
+      disablePanOnInitialZoom
+      onShouldBlockNativeResponder={onShouldBlockNativeResponderHandler}
+      panBoundaryPadding={10}
+      style={{
+        width,
+        height: height - HEADER_HEIGHT,
+      }}
+      // style={[styles.container, backgroundStyle]}
     >
       <FastImage
         style={{ height: cardHeight, width: cardWidth }}
@@ -88,11 +129,11 @@ function CardImageDetail({ card, flipped }: CardImageDetailProps) {
         }}
         resizeMode="contain"
       />
-    </ViewControl>
+    </ReactNativeZoomableView>
   );
 }
 
-export default function CardImageView({ componentId, id }: Props) {
+export default function CardImageView({ componentId, id, embedded }: Props) {
   const { backgroundStyle } = useContext(StyleContext);
   const [flipped, toggleFlipped] = useFlag(false);
   useNavigationButtonPressed(({ buttonId }) => {
@@ -102,7 +143,7 @@ export default function CardImageView({ componentId, id }: Props) {
   }, componentId, [toggleFlipped]);
   const [card] = useSingleCard(id, 'encounter');
   useEffect(() => {
-    if (!card) {
+    if (!card || embedded) {
       return;
     }
     const doubleCard: boolean = card.double_sided || !!(card.linked_card && card.linked_card.hasImage());
@@ -116,7 +157,7 @@ export default function CardImageView({ componentId, id }: Props) {
         }] : [],
       },
     });
-  }, [card, componentId]);
+  }, [card, embedded, componentId]);
   return (
     <View style={[styles.container, backgroundStyle]}>
       <CardImageDetail
diff --git a/src/components/card/DbCardDetailSwipeView.tsx b/src/components/card/DbCardDetailSwipeView.tsx
index 220f3f173f..792071fae5 100644
--- a/src/components/card/DbCardDetailSwipeView.tsx
+++ b/src/components/card/DbCardDetailSwipeView.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useReducer, useState } from 'react';
 import {
   ActivityIndicator,
   Linking,
@@ -10,7 +10,7 @@ import {
 import { Navigation } from 'react-native-navigation';
 import { ScrollView } from 'react-native-gesture-handler';
 import SnapCarousel from 'react-native-snap-carousel';
-import Animated from 'react-native-reanimated';
+import Animated, { SlideInRight, SlideOutLeft } from 'react-native-reanimated';
 import { useSelector } from 'react-redux';
 import { msgid, ngettext, t } from 'ttag';
 import { find, filter, map, slice, sortBy, sumBy } from 'lodash';
@@ -24,7 +24,7 @@ import { NavigationProps } from '@components/nav/types';
 import Card from '@data/types/Card';
 import COLORS from '@styles/colors';
 import StyleContext from '@styles/StyleContext';
-import { useToggles, useComponentDidAppear, useNavigationButtonPressed, useCards, useSettingValue } from '@components/core/hooks';
+import { useToggles, useComponentDidAppear, useNavigationButtonPressed, useCards, useSettingValue, useBackButton } from '@components/core/hooks';
 import DatabaseContext from '@data/sqlite/DatabaseContext';
 import { where } from '@data/sqlite/query';
 import { FOOTER_HEIGHT, PreLoadedDeckNavFooter } from '@components/deck/DeckNavFooter';
@@ -38,12 +38,13 @@ import { CustomizationChoice } from '@data/types/CustomizationOption';
 import LanguageContext from '@lib/i18n/LanguageContext';
 import { getArkhamDbDomain } from '@lib/i18n/LanguageProvider';
 import { getSystemLanguage } from '@lib/i18n';
-import { useAttachableCards, useDeckAttachments } from '@components/deck/useParsedDeckComponent';
+import { useAttachableCards } from '@components/deck/useParsedDeckComponent';
 import RoundedFactionBlock from '@components/core/RoundedFactionBlock';
 import RoundedFactionHeader from '@components/core/RoundedFactionHeader';
 import space, { s } from '@styles/space';
 import CardSearchResult from '@components/cardlist/CardSearchResult';
 import { DeckEditContext, ParsedDeckContextProvider, useAllCardCustomizations, useCardCustomizations, useDeckAttachmentSlots } from '@components/deck/DeckEditContext';
+import CardImageView from './CardImageView';
 
 export interface CardDetailSwipeProps {
   cardCodes: string[];
@@ -66,6 +67,8 @@ const options = (passProps: CardDetailSwipeProps) => {
   return {
     topBar: {
       backButton: {
+        id: 'back',
+        popStackOnPress: false,
         title: t`Back`,
         color: passProps.whiteNav ? 'white' : COLORS.M,
       },
@@ -164,14 +167,16 @@ function ScrollableCard(props: {
   showCardSpoiler: (card: Card) => boolean;
   toggleShowSpoilers: (code: string) => void;
   showInvestigatorCards: (code: string) => void;
+  toggleImageMode: () => void;
   attachment?: AttachableDefinition;
   attachmentCards: Card[];
+  imageMode: boolean;
 }) {
   const {
     componentId, customizationsEditable, card, tabooSetId,
     width, height, customizations, deckCount,
-    attachment, attachmentCards,
-    setChoice, toggleShowSpoilers, showInvestigatorCards, showCardSpoiler,
+    attachment, attachmentCards, imageMode,
+    setChoice, toggleShowSpoilers, showInvestigatorCards, showCardSpoiler, toggleImageMode,
   } = props;
   const { deckId } = useContext(DeckEditContext);
   const { backgroundStyle, colors } = useContext(StyleContext);
@@ -187,43 +192,53 @@ function ScrollableCard(props: {
       </View>
     );
   }
+  if (imageMode && card) {
+    return (
+      <Animated.View entering={SlideInRight} exiting={SlideOutLeft} style={{ width, height }}>
+        <CardImageView componentId={componentId} id={card.code} embedded />
+      </Animated.View>
+    );
+  }
   return (
-    <ScrollView
-      overScrollMode="never"
-      showsVerticalScrollIndicator={false}
-      bounces={false}
-      contentContainerStyle={backgroundStyle}
-    >
-      <CardDetailComponent
-        componentId={componentId}
-        card={customizedCard}
-        showSpoilers={showCardSpoiler(customizedCard)}
-        toggleShowSpoilers={toggleShowSpoilers}
-        showInvestigatorCards={showInvestigatorCards}
-        width={width}
-        tabooSetId={tabooSetId}
-      />
-      { !!customizedCard.customization_options && !!card && (
-        <CardCustomizationOptions
+    <Animated.View exiting={SlideOutLeft}>
+      <ScrollView
+        overScrollMode="never"
+        showsVerticalScrollIndicator={false}
+        bounces={false}
+        contentContainerStyle={backgroundStyle}
+      >
+        <CardDetailComponent
           componentId={componentId}
-          card={card}
-          customizationOptions={customizedCard.customization_options}
-          customizationChoices={customizationChoices}
-          width={width}
-          editable={!!customizationsEditable && !!deckCount}
-          setChoice={setChoice}
-        />
-      ) }
-      { !!card && !!deckId && !!attachment && (
-        <AttachmentSection
-          card={card}
+          card={customizedCard}
+          showSpoilers={showCardSpoiler(customizedCard)}
+          toggleShowSpoilers={toggleShowSpoilers}
+          toggleImageMode={toggleImageMode}
+          showInvestigatorCards={showInvestigatorCards}
           width={width}
-          attachment={attachment}
-          attachmentCards={attachmentCards}
+          tabooSetId={tabooSetId}
         />
-      )}
-      { deckId !== undefined && <View style={{ width, height: FOOTER_HEIGHT }} /> }
-    </ScrollView>
+        { !!customizedCard.customization_options && !!card && (
+          <CardCustomizationOptions
+            componentId={componentId}
+            card={card}
+            customizationOptions={customizedCard.customization_options}
+            customizationChoices={customizationChoices}
+            width={width}
+            editable={!!customizationsEditable && !!deckCount}
+            setChoice={setChoice}
+          />
+        ) }
+        { !!card && !!deckId && !!attachment && (
+          <AttachmentSection
+            card={card}
+            width={width}
+            attachment={attachment}
+            attachmentCards={attachmentCards}
+          />
+        )}
+        { deckId !== undefined && <View style={{ width, height: FOOTER_HEIGHT }} /> }
+      </ScrollView>
+    </Animated.View>
   );
 }
 
@@ -244,6 +259,7 @@ function DbCardDetailSwipeView(props: Props) {
   const [spoilers, toggleShowSpoilers] = useToggles({});
   const [index, setIndex] = useState(initialIndex);
   const [cards, updateCards] = useCards('code', initialCards);
+  const [imageMode, toggleImageMode] = useReducer((value) => !value, false);
   const [currentCode, currentControl] = useMemo(() => {
     return [
       cardCodes[index],
@@ -327,13 +343,21 @@ function DbCardDetailSwipeView(props: Props) {
     });
   }, [componentId]);
   const backPressed = useCallback(() => {
-    Navigation.pop(componentId);
-  }, [componentId]);
+    if (imageMode) {
+      toggleImageMode();
+    } else {
+      Navigation.pop(componentId);
+    }
+  }, [componentId, imageMode, toggleImageMode]);
   useComponentDidAppear(() => {
     Navigation.mergeOptions(componentId, options(props));
   }, componentId, [componentId]);
+
   useNavigationButtonPressed(({ buttonId }) => {
-    if (currentCard) {
+    console.log('BUTTON PRESS!', buttonId)
+    if (buttonId === 'RNN.back') {
+      backPressed();
+    } else if (currentCard) {
       if (buttonId === 'share') {
         const arkhamDbDomain = getArkhamDbDomain(getSystemLanguage());
         Linking.openURL(`${arkhamDbDomain}/card/${currentCard.code}#reviews-header`);
@@ -360,11 +384,9 @@ function DbCardDetailSwipeView(props: Props) {
         });
       } else if (buttonId === 'investigator') {
         showInvestigators(currentCard.code);
-      } else if (buttonId === 'back') {
-        Navigation.pop(componentId);
       }
     }
-  }, componentId, [currentCard, showInvestigators, showInvestigatorCards]);
+  }, componentId, [currentCard, imageMode, backPressed, toggleImageMode, showInvestigators, showInvestigatorCards]);
 
   const showCardSpoiler = useCallback((card: Card) => {
     return !!(showAllSpoilers || showSpoilers[card.pack_code] || spoilers[card.code]);
@@ -390,6 +412,8 @@ function DbCardDetailSwipeView(props: Props) {
       <ScrollableCard
         key={itemIndex}
         card={card}
+        toggleImageMode={toggleImageMode}
+        imageMode={imageMode}
         width={width}
         height={height}
         tabooSetId={tabooSetId}
@@ -405,7 +429,11 @@ function DbCardDetailSwipeView(props: Props) {
         attachmentCards={attachmentCards}
       />
     );
-  }, [attachableCards, data, slots, customizationsEditable, tabooSetId, editable, customizations, componentId, width, height, setChoice, showCardSpoiler, toggleShowSpoilers, showInvestigatorCards]);
+  }, [
+    imageMode, attachableCards, data, slots, customizationsEditable, tabooSetId,
+    editable, customizations, componentId, width, height,
+    setChoice, showCardSpoiler, toggleShowSpoilers, showInvestigatorCards, toggleImageMode,
+  ]);
   return (
     <ParsedDeckContextProvider parsedDeckObj={parsedDeck}>
       <View
diff --git a/src/components/chaos/EditChaosBagDialog/index.tsx b/src/components/chaos/EditChaosBagDialog/index.tsx
index ca95e17f9f..e7d79be6ac 100644
--- a/src/components/chaos/EditChaosBagDialog/index.tsx
+++ b/src/components/chaos/EditChaosBagDialog/index.tsx
@@ -265,7 +265,6 @@ function EditChaosBagDialog({ chaosBag: originalChaosBag, updateChaosBag, trackD
     return true;
   }, [componentId, visible, hasPendingEdits, saveChanges, showAlert]);
 
-
   useBackButton(handleBackPress);
   useNavigationButtonPressed(({ buttonId }) => {
     if (buttonId === 'save') {
diff --git a/src/components/core/InvestigatorImage.tsx b/src/components/core/InvestigatorImage.tsx
index e275d24ae8..afc9ed0fe2 100644
--- a/src/components/core/InvestigatorImage.tsx
+++ b/src/components/core/InvestigatorImage.tsx
@@ -35,6 +35,7 @@ interface Props {
   arkhamCardsImg?: string;
   imageOffset?: 'right' | 'left';
   round?: boolean;
+  onPress?: () => void;
 }
 
 const IMAGE_SIZE = {
@@ -166,6 +167,7 @@ function InvestigatorImage({
   imageOffset,
   round,
   image,
+  ...props
 }: Props) {
   const { colors, fontScale, shadow } = useContext(StyleContext);
 
@@ -353,7 +355,7 @@ function InvestigatorImage({
 
   if (componentId && card) {
     return (
-      <TouchableOpacity onPress={onPress}>
+      <TouchableOpacity onPress={props?.onPress ?? onPress}>
         { imageNode }
       </TouchableOpacity>
     );
diff --git a/yarn.lock b/yarn.lock
index e126e970ab..d59192cd6b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4987,6 +4987,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@openspacelabs/react-native-zoomable-view@npm:^2.3.1":
+  version: 2.3.1
+  resolution: "@openspacelabs/react-native-zoomable-view@npm:2.3.1"
+  dependencies:
+    prop-types: "npm:^15.7.2"
+  peerDependencies:
+    react: ">=16.8.0"
+    react-native: ">=0.54.0"
+  checksum: 10c0/17b37543d8cadc78d4ee09168eed94e5e40e09be3f4bace7fd4bd0e24a51035015bb69fbb31b6ca86bd17dc8dea2c18244a2eeb37e0286b452a420eec483ac3c
+  languageName: node
+  linkType: hard
+
 "@peculiar/asn1-schema@npm:^2.3.6":
   version: 2.3.6
   resolution: "@peculiar/asn1-schema@npm:2.3.6"
@@ -7143,6 +7155,7 @@ __metadata:
     "@invertase/react-native-apple-authentication": "npm:2.2.2"
     "@miblanchard/react-native-slider": "npm:^2.3.1"
     "@op-engineering/op-sqlite": "npm:9.1.2"
+    "@openspacelabs/react-native-zoomable-view": "npm:^2.3.1"
     "@react-hook/debounce": "npm:4.0.0"
     "@react-hook/throttle": "npm:2.2.0"
     "@react-native-async-storage/async-storage": "npm:1.24.0"