zzorba · zzorba · Feb 17, 2025
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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