@webority-technologies/mobile 0.0.15 → 0.0.21

package/lib/module/components/FloatingActionButton/FloatingActionButton.js

@@ -6,7 +6,10 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
 import { usePressAnimation } from "../../hooks/usePressAnimation.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
-import { AppIcon } from "../AppIcon/index.js";
+
+// Local shape mirror — see types.ts FloatingActionButtonTokens for the canonical
+// definition. Declared here so the component can read tokens before types.ts is
+// regenerated; will collapse to a direct import once that lands.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const sizeMap = {
   sm: {
@@ -47,9 +50,6 @@ const toneForeground = (theme, tone) => {
   if (tone === 'neutral') return theme.colors.text.primary;
   return theme.colors.text.inverse;
 };
-const isIconConfig = value => {
-  return typeof value === 'object' && value !== null && ! /*#__PURE__*/React.isValidElement(value) && typeof value.name === 'string';
-};
 const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     icon,
@@ -65,6 +65,8 @@ const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
     accessibilityLabel,
     accessibilityHint,
     style,
+    containerStyle,
+    labelStyle,
     testID
   } = props;
   const theme = useTheme();
@@ -78,6 +80,10 @@ const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
   } = usePressAnimation({
     enabled: !disabled
   });
+  const fabTokens = theme.components.floatingActionButton;
+  const edgeOffset = fabTokens?.edgeOffset ?? 24;
+  const defaultBottomOffset = fabTokens?.bottomOffset ?? 24;
+  const pressHaptic = fabTokens?.pressHaptic ?? false;
   const hideAnim = useRef(createAnimatedValue(0)).current;
   useEffect(() => {
     if (!hideOnScroll) {
@@ -93,7 +99,7 @@ const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
   }, [hideOnScroll, isScrolling, hideAnim, theme.motion.duration.normal, theme.motion.easing.standard]);
   const hideTranslateY = hideAnim.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, sizeStyles.diameter + (bottomOffset ?? 24) + insets.bottom + 24]
+    outputRange: [0, sizeStyles.diameter + (bottomOffset ?? defaultBottomOffset) + insets.bottom + edgeOffset]
   });
   const hideOpacity = hideAnim.interpolate({
     inputRange: [0, 1],
@@ -101,27 +107,22 @@ const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const handlePress = _event => {
     if (disabled) return;
-    triggerHaptic('impactLight');
+    if (pressHaptic) triggerHaptic('impactLight');
     onPress();
   };
-  const renderedIcon = isIconConfig(icon) ? /*#__PURE__*/_jsx(AppIcon, {
-    name: icon.name,
-    family: icon.family ?? 'feather',
-    size: sizeStyles.iconSize,
-    color: toneForeground(theme, tone)
-  }) : icon;
+  const renderedIcon = icon;
   const isExtended = typeof label === 'string' && label.length > 0;
   const backgroundColor = disabled ? theme.colors.surface.disabled : toneBackground(theme, tone);
   const foregroundColor = disabled ? theme.colors.text.disabled : toneForeground(theme, tone);
   const positionStyle = useMemo(() => {
     if (!position) return null;
-    const bottom = (bottomOffset ?? 24) + insets.bottom;
+    const bottom = (bottomOffset ?? defaultBottomOffset) + insets.bottom;
     switch (position) {
       case 'bottomLeft':
         return {
           position: 'absolute',
           bottom,
-          left: 24
+          left: edgeOffset
         };
       case 'bottomCenter':
         return {
@@ -134,10 +135,10 @@ const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
         return {
           position: 'absolute',
           bottom,
-          right: 24
+          right: edgeOffset
         };
     }
-  }, [position, bottomOffset, insets.bottom]);
+  }, [position, bottomOffset, insets.bottom, defaultBottomOffset, edgeOffset]);
   return /*#__PURE__*/_jsx(Animated.View, {
     style: [positionStyle, {
       transform: [{
@@ -146,7 +147,7 @@ const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
         scale
       }],
       opacity: hideOpacity
-    }, style],
+    }, containerStyle, style],
     pointerEvents: hideOnScroll && isScrolling ? 'none' : 'auto',
     children: /*#__PURE__*/_jsxs(Pressable, {
       ref: ref,
@@ -183,7 +184,7 @@ const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
           fontSize: sizeStyles.fontSize,
           fontWeight: theme.typography.fontWeight.semibold,
           marginLeft: theme.spacing.sm
-        }],
+        }, labelStyle],
         numberOfLines: 1,
         children: label
       }) : null]
@@ -209,8 +210,6 @@ const buildStyles = _theme => StyleSheet.create({
 // so they remain smooth during JS thread work.
 // =====================================================================
 
-const SECONDARY_GAP = 16;
-const STAGGER_MS = 50;
 const FloatingActionButtonGroup = props => {
   const {
     primaryIcon,
@@ -223,28 +222,54 @@ const FloatingActionButtonGroup = props => {
     bottomOffset,
     size = 'md',
     accessibilityLabel = 'Quick actions',
+    containerStyle,
+    secondaryActionStyle,
+    labelPillStyle,
+    labelStyle,
     testID
   } = props;
   const theme = useTheme();
   const insets = useSafeAreaInsets();
   const sizeStyles = sizeMap[size];
   const styles = useMemo(() => buildGroupStyles(theme), [theme]);
+  const fabTokens = theme.components.floatingActionButton;
+  const edgeOffset = fabTokens?.edgeOffset ?? 24;
+  const defaultBottomOffset = fabTokens?.bottomOffset ?? 24;
+  const secondaryGap = fabTokens?.secondaryGap ?? 16;
+  const staggerMs = fabTokens?.staggerMs ?? 50;
+  const pressHaptic = fabTokens?.pressHaptic ?? false;
   const isControlled = typeof controlledOpen === 'boolean';
   const [internalOpen, setInternalOpen] = useState(defaultOpen);
   const isOpen = isControlled ? controlledOpen : internalOpen;
 
   // Animation drivers
   const progress = useRef(createAnimatedValue(isOpen ? 1 : 0)).current;
+  // Stable refs for per-item Animated.Values. Reconciled inside useEffect — never
+  // mutated during render — so re-renders don't recreate Animated.Value instances
+  // (previous implementation leaked one Animated.Value per re-render when the
+  // actions array length changed).
   const itemAnims = useRef([]);
-
-  // Resize per-item anim array if action count changes
-  if (itemAnims.current.length !== actions.length) {
-    const next = [];
-    for (let i = 0; i < actions.length; i += 1) {
-      next.push(itemAnims.current[i] ?? new Animated.Value(isOpen ? 1 : 0));
+  // Bump this when the underlying refs array is re-shaped so downstream effects
+  // and mapping reads see the new length.
+  const [itemAnimsVersion, setItemAnimsVersion] = useState(0);
+  useEffect(() => {
+    const current = itemAnims.current;
+    if (current.length === actions.length) return;
+    if (current.length < actions.length) {
+      const next = current.slice();
+      for (let i = current.length; i < actions.length; i += 1) {
+        next.push(new Animated.Value(isOpen ? 1 : 0));
+      }
+      itemAnims.current = next;
+    } else {
+      // Drop stale refs when actions array shrinks.
+      itemAnims.current = current.slice(0, actions.length);
     }
-    itemAnims.current = next;
-  }
+    setItemAnimsVersion(v => v + 1);
+    // isOpen intentionally not in deps — only used to seed brand-new values; the
+    // open/close effect below will animate them to the correct target anyway.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [actions.length]);
   useEffect(() => {
     Animated.timing(progress, {
       toValue: isOpen ? 1 : 0,
@@ -260,34 +285,34 @@ const FloatingActionButtonGroup = props => {
     }));
     // Reverse stagger order on close so items closest to primary collapse last
     const ordered = isOpen ? animations : [...animations].reverse();
-    Animated.stagger(STAGGER_MS, ordered).start();
-  }, [isOpen, progress, theme.motion.duration.normal, theme.motion.easing.standard, actions.length]);
+    Animated.stagger(staggerMs, ordered).start();
+  }, [isOpen, progress, theme.motion.duration.normal, theme.motion.easing.standard, actions.length, itemAnimsVersion, staggerMs]);
   const setOpen = useCallback(next => {
-    triggerHaptic('impactLight');
+    if (pressHaptic) triggerHaptic('impactLight');
     if (!isControlled) setInternalOpen(next);
     onOpenChange?.(next);
-  }, [isControlled, onOpenChange]);
+  }, [isControlled, onOpenChange, pressHaptic]);
   const handlePrimaryPress = useCallback(() => {
     setOpen(!isOpen);
   }, [isOpen, setOpen]);
   const handleActionPress = useCallback(action => {
-    triggerHaptic('selection');
+    if (pressHaptic) triggerHaptic('selection');
     action.onPress();
     // Close after action runs
     if (!isControlled) setInternalOpen(false);
     onOpenChange?.(false);
-  }, [isControlled, onOpenChange]);
+  }, [isControlled, onOpenChange, pressHaptic]);
   const handleBackdropPress = useCallback(() => {
     if (isOpen) setOpen(false);
   }, [isOpen, setOpen]);
   const positionStyle = useMemo(() => {
-    const bottom = (bottomOffset ?? 24) + insets.bottom;
+    const bottom = (bottomOffset ?? defaultBottomOffset) + insets.bottom;
     switch (position) {
       case 'bottomLeft':
         return {
           position: 'absolute',
           bottom,
-          left: 24,
+          left: edgeOffset,
           alignItems: 'flex-start'
         };
       case 'bottomCenter':
@@ -302,14 +327,14 @@ const FloatingActionButtonGroup = props => {
         return {
           position: 'absolute',
           bottom,
-          right: 24,
+          right: edgeOffset,
           alignItems: 'flex-end'
         };
     }
-  }, [position, bottomOffset, insets.bottom]);
+  }, [position, bottomOffset, insets.bottom, defaultBottomOffset, edgeOffset]);
 
   // Vertical slot offset per index: secondary at index i sits (diameter + gap) * (i + 1) above primary
-  const slotOffset = index => -((sizeStyles.diameter + SECONDARY_GAP) * (index + 1));
+  const slotOffset = index => -((sizeStyles.diameter + secondaryGap) * (index + 1));
   const backdropOpacity = progress.interpolate({
     inputRange: [0, 1],
     outputRange: [0, 0.4]
@@ -333,7 +358,7 @@ const FloatingActionButtonGroup = props => {
         testID: testID ? `${testID}-backdrop` : undefined
       })
     }) : null, /*#__PURE__*/_jsxs(View, {
-      style: positionStyle,
+      style: [positionStyle, containerStyle],
       accessibilityRole: 'menu',
       testID: testID,
       children: [actions.map((action, index) => {
@@ -369,13 +394,13 @@ const FloatingActionButtonGroup = props => {
               paddingVertical: theme.spacing.xs,
               borderRadius: theme.radius.sm,
               marginRight: theme.spacing.sm
-            }],
+            }, labelPillStyle],
             children: /*#__PURE__*/_jsx(Text, {
-              style: {
+              style: [{
                 color: theme.colors.text.primary,
                 fontSize: theme.typography.fontSize.sm,
                 fontWeight: theme.typography.fontWeight.medium
-              },
+              }, labelStyle],
               numberOfLines: 1,
               children: action.label
             })
@@ -392,7 +417,7 @@ const FloatingActionButtonGroup = props => {
               height: secondaryDiameter,
               borderRadius: secondaryDiameter / 2,
               backgroundColor: itemBackground
-            }],
+            }, secondaryActionStyle],
             testID: testID ? `${testID}-action-${action.key}` : undefined,
             children: /*#__PURE__*/React.isValidElement(action.icon) ? action.icon : /*#__PURE__*/_jsx(Text, {
               style: {

package/lib/module/components/ForceUpdateDialog/ForceUpdateDialog.js

@@ -27,7 +27,10 @@ export const ForceUpdateDialog = ({
   title = 'Update available',
   message = 'A new version of the app is available. Please update to continue using the latest features and security improvements.',
   updateLabel = 'Update now',
-  laterLabel = 'Later'
+  laterLabel = 'Later',
+  containerStyle,
+  titleStyle,
+  messageStyle
 }) => {
   const [updating, setUpdating] = useState(false);
   const handleUpdate = useCallback(() => {
@@ -68,7 +71,10 @@ export const ForceUpdateDialog = ({
     message: message,
     variant: "info",
     actions: actions,
-    dismissOnAction: false
+    dismissOnAction: false,
+    containerStyle: containerStyle,
+    titleStyle: titleStyle,
+    messageStyle: messageStyle
   });
 };
 export default ForceUpdateDialog;

package/lib/module/components/FormField/FormField.js

@@ -16,6 +16,7 @@ const FormField = /*#__PURE__*/forwardRef((props, ref) => {
     helperStyle,
     errorStyle,
     containerStyle,
+    inputContainerStyle: inputContainerStyleProp,
     accessibilityLabel,
     testID
   } = props;
@@ -56,12 +57,12 @@ const FormField = /*#__PURE__*/forwardRef((props, ref) => {
     testID: testID,
     children: [layout === 'inline' ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [labelNode, /*#__PURE__*/_jsx(View, {
-        style: inputContainerStyle,
+        style: [inputContainerStyle, inputContainerStyleProp],
         children: children
       })]
     }) : /*#__PURE__*/_jsxs(_Fragment, {
       children: [labelNode, /*#__PURE__*/_jsx(View, {
-        style: inputContainerStyle,
+        style: [inputContainerStyle, inputContainerStyleProp],
         children: children
       })]
     }), showHelper ? /*#__PURE__*/_jsx(Text, {

package/lib/module/components/ImageGallery/ImageGallery.js

@@ -24,14 +24,15 @@ import { Dimensions, Image, Modal as RNModal, Pressable, StyleSheet, Text, View
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
 import { Carousel } from "../Carousel/index.js";
-import { AppIcon } from "../AppIcon/index.js";
-import { SkeletonContent } from "../Skeleton/index.js";
+import { Skeleton } from "../Skeleton/index.js";
 import { useTheme } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
+
+// Local shape mirror — see types.ts ImageGalleryTokens for the canonical definition.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const MAX_SCALE = 4;
-const MIN_SCALE = 1;
-const DOUBLE_TAP_SCALE = 2;
+const MAX_SCALE_FALLBACK = 4;
+const MIN_SCALE_FALLBACK = 1;
+const DOUBLE_TAP_SCALE_FALLBACK = 2;
 const SPRING_CONFIG = {
   damping: 18,
   stiffness: 220,
@@ -52,6 +53,8 @@ const ImageGallery = ({
 }) => {
   const theme = useTheme();
   const styles = useMemo(() => buildStyles(theme), [theme]);
+  const galleryTokens = theme.components.imageGallery;
+  const pressHaptic = galleryTokens?.pressHaptic ?? false;
   const [currentIndex, setCurrentIndex] = useState(clamp(initialIndex, 0, Math.max(0, images.length - 1)));
   const [lightboxOpen, setLightboxOpen] = useState(false);
   const handleIndexChange = useCallback(idx => {
@@ -60,13 +63,13 @@ const ImageGallery = ({
   }, [onIndexChange]);
   const openLightbox = useCallback(() => {
     if (!enableLightbox) return;
-    triggerHaptic('selection');
+    if (pressHaptic) triggerHaptic('selection');
     setLightboxOpen(true);
-  }, [enableLightbox]);
+  }, [enableLightbox, pressHaptic]);
   const closeLightbox = useCallback(() => {
-    triggerHaptic('selection');
+    if (pressHaptic) triggerHaptic('selection');
     setLightboxOpen(false);
-  }, []);
+  }, [pressHaptic]);
   const renderImage = useCallback((image, idx) => {
     const a11y = image.alt ?? `Image ${idx + 1} of ${images.length}`;
     return /*#__PURE__*/_jsx(Pressable, {
@@ -119,20 +122,86 @@ const ImageGallery = ({
       enablePinchZoom: enablePinchZoom,
       showCounter: showCounter,
       onClose: closeLightbox,
-      onIndexChange: handleIndexChange
+      onIndexChange: handleIndexChange,
+      pressHaptic: pressHaptic
     }) : null]
   });
   if (loading) {
-    return /*#__PURE__*/_jsx(SkeletonContent, {
-      loading: true,
-      mode: "auto",
-      children: rendered
+    return /*#__PURE__*/_jsx(ImageGallerySkeleton, {
+      images: images,
+      showThumbnails: showThumbnails,
+      showCounter: showCounter,
+      containerStyle: containerStyle,
+      testID: testID
     });
   }
   return rendered;
 };
 ImageGallery.displayName = 'ImageGallery';
 
+/**
+ * Placeholder shape for `<ImageGallery>`. Hero image block + optional
+ * counter pill + thumbnail strip. Heights are tuned to match the live
+ * component's defaults so the gallery doesn't reflow when ready.
+ */
+const ImageGallerySkeleton = ({
+  images,
+  showThumbnails = true,
+  showCounter = true,
+  containerStyle,
+  testID
+}) => {
+  const thumbCount = Math.min(images?.length || 4, 6);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      width: '100%'
+    }, containerStyle],
+    testID: testID,
+    accessibilityRole: "progressbar",
+    accessibilityState: {
+      busy: true
+    },
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        position: 'relative'
+      },
+      children: [/*#__PURE__*/_jsx(Skeleton, {
+        width: "100%",
+        height: 280,
+        radius: "lg"
+      }), showCounter ? /*#__PURE__*/_jsx(View, {
+        style: {
+          position: 'absolute',
+          top: 12,
+          right: 12
+        },
+        children: /*#__PURE__*/_jsx(Skeleton, {
+          width: 44,
+          height: 22,
+          radius: "full"
+        })
+      }) : null]
+    }), showThumbnails ? /*#__PURE__*/_jsx(View, {
+      style: {
+        flexDirection: 'row',
+        marginTop: 12
+      },
+      children: Array.from({
+        length: thumbCount
+      }).map((_, i) => /*#__PURE__*/_jsx(Skeleton, {
+        width: 64,
+        height: 64,
+        radius: "md",
+        style: {
+          marginRight: 8
+        }
+      }, `sk-thumb-${i}`))
+    }) : null]
+  });
+};
+ImageGallerySkeleton.displayName = 'ImageGallerySkeleton';
+ImageGallery.Skeleton = ImageGallerySkeleton;
+
 // ───────── Lightbox ─────────
 
 const Lightbox = ({
@@ -142,26 +211,35 @@ const Lightbox = ({
   enablePinchZoom,
   showCounter,
   onClose,
-  onIndexChange
+  onIndexChange,
+  pressHaptic
 }) => {
   const theme = useTheme();
   const styles = useMemo(() => buildLightboxStyles(theme), [theme]);
+  const galleryTokens = theme.components.imageGallery;
+  const maxScale = galleryTokens?.maxScale ?? MAX_SCALE_FALLBACK;
+  const minScale = galleryTokens?.minScale ?? MIN_SCALE_FALLBACK;
+  const doubleTapScale = galleryTokens?.doubleTapScale ?? DOUBLE_TAP_SCALE_FALLBACK;
   const carouselRef = useRef(null);
   const [activeIndex, setActiveIndex] = useState(initialIndex);
   const handleSwipe = useCallback(idx => {
     if (idx !== activeIndex) {
-      triggerHaptic('selection');
+      if (pressHaptic) triggerHaptic('selection');
       setActiveIndex(idx);
       onIndexChange(idx);
     }
-  }, [activeIndex, onIndexChange]);
+  }, [activeIndex, onIndexChange, pressHaptic]);
   const renderItem = useCallback((image, idx) => /*#__PURE__*/_jsx(ZoomableImage, {
     image: image,
     index: idx,
     total: images.length,
     active: idx === activeIndex,
-    enabled: enablePinchZoom
-  }), [activeIndex, enablePinchZoom, images.length]);
+    enabled: enablePinchZoom,
+    maxScale: maxScale,
+    minScale: minScale,
+    doubleTapScale: doubleTapScale,
+    pressHaptic: pressHaptic
+  }), [activeIndex, enablePinchZoom, images.length, maxScale, minScale, doubleTapScale, pressHaptic]);
   const caption = images[activeIndex]?.caption;
   return /*#__PURE__*/_jsx(RNModal, {
     visible: visible,
@@ -197,11 +275,15 @@ const Lightbox = ({
         accessibilityLabel: "Close gallery",
         style: styles.closeButton,
         hitSlop: 12,
-        children: /*#__PURE__*/_jsx(AppIcon, {
-          name: "x",
-          family: "feather",
-          size: "lg",
+        children: theme.icons?.close ? theme.icons.close({
+          size: 24,
           color: theme.colors.text.inverse
+        }) : /*#__PURE__*/_jsx(Text, {
+          style: {
+            fontSize: 24,
+            color: theme.colors.text.inverse
+          },
+          children: "\xD7"
         })
       }), caption ? /*#__PURE__*/_jsx(Animated.View, {
         style: styles.captionWrap,
@@ -224,7 +306,11 @@ const ZoomableImage = ({
   index,
   total,
   active,
-  enabled
+  enabled,
+  maxScale,
+  minScale,
+  doubleTapScale,
+  pressHaptic
 }) => {
   const screen = Dimensions.get('window');
   const scale = useSharedValue(1);
@@ -259,7 +345,9 @@ const ZoomableImage = ({
       savedTranslateY.value = 0;
     }
   }, [active, scale, translateX, translateY, savedScale, savedTranslateX, savedTranslateY]);
-  const triggerImpact = useCallback(() => triggerHaptic('impactLight'), []);
+  const triggerImpact = useCallback(() => {
+    if (pressHaptic) triggerHaptic('impactLight');
+  }, [pressHaptic]);
   const pinch = useMemo(() => Gesture.Pinch().enabled(enabled).onStart(() => {
     'worklet';
 
@@ -268,33 +356,33 @@ const ZoomableImage = ({
     'worklet';
 
     const next = savedScale.value * e.scale;
-    // Clamp 1..MAX_SCALE on the UI thread so pinch feels rubbery at limits.
-    if (next < MIN_SCALE) {
-      scale.value = MIN_SCALE + (next - MIN_SCALE) * 0.3;
-    } else if (next > MAX_SCALE) {
-      scale.value = MAX_SCALE + (next - MAX_SCALE) * 0.2;
+    // Clamp minScale..maxScale on the UI thread so pinch feels rubbery at limits.
+    if (next < minScale) {
+      scale.value = minScale + (next - minScale) * 0.3;
+    } else if (next > maxScale) {
+      scale.value = maxScale + (next - maxScale) * 0.2;
     } else {
       scale.value = next;
     }
   }).onEnd(() => {
     'worklet';
 
-    if (scale.value < MIN_SCALE) {
-      scale.value = withSpring(MIN_SCALE, SPRING_CONFIG);
+    if (scale.value < minScale) {
+      scale.value = withSpring(minScale, SPRING_CONFIG);
       translateX.value = withSpring(0, SPRING_CONFIG);
       translateY.value = withSpring(0, SPRING_CONFIG);
-      savedScale.value = MIN_SCALE;
+      savedScale.value = minScale;
       savedTranslateX.value = 0;
       savedTranslateY.value = 0;
       return;
     }
-    if (scale.value > MAX_SCALE) {
-      scale.value = withSpring(MAX_SCALE, SPRING_CONFIG);
-      savedScale.value = MAX_SCALE;
+    if (scale.value > maxScale) {
+      scale.value = withSpring(maxScale, SPRING_CONFIG);
+      savedScale.value = maxScale;
       return;
     }
     savedScale.value = scale.value;
-  }), [enabled, scale, savedScale, translateX, translateY, savedTranslateX, savedTranslateY]);
+  }), [enabled, scale, savedScale, translateX, translateY, savedTranslateX, savedTranslateY, minScale, maxScale]);
 
   // Pan only engages when zoomed in — otherwise the parent Carousel owns horizontal swipe.
   const pan = useMemo(() => Gesture.Pan().minPointers(1).maxPointers(1).onStart(() => {
@@ -326,10 +414,10 @@ const ZoomableImage = ({
       savedTranslateX.value = 0;
       savedTranslateY.value = 0;
     } else {
-      scale.value = withSpring(DOUBLE_TAP_SCALE, SPRING_CONFIG);
-      savedScale.value = DOUBLE_TAP_SCALE;
+      scale.value = withSpring(doubleTapScale, SPRING_CONFIG);
+      savedScale.value = doubleTapScale;
     }
-  }), [scale, savedScale, translateX, translateY, savedTranslateX, savedTranslateY, triggerImpact]);
+  }), [scale, savedScale, translateX, translateY, savedTranslateX, savedTranslateY, triggerImpact, doubleTapScale]);
 
   // Race the gestures so they coordinate cleanly: a tap won't be misread as a tiny pan,
   // and pan won't fire when the user actually starts a pinch.