shakebug-react-native 2.4.14 → 2.4.16

package/src/Componanats/Theme.js

@@ -0,0 +1,96 @@
+import { useColorScheme, Appearance } from 'react-native';
+
+/**
+ * Determines whether Shakebug should render in dark mode.
+ * Priority:
+ *  1. Explicit developer override (global.ShakebugTheme / global.ShakebugDarkMode)
+ *  2. Automatically inferred from application / device theme (useColorScheme / Appearance)
+ */
+export const isShakebugDark = (colorScheme) => {
+  if (global.ShakebugTheme === 'dark' || global.ShakebugDarkMode === true) {
+    return true;
+  }
+  if (global.ShakebugTheme === 'light' || global.ShakebugDarkMode === false) {
+    return false;
+  }
+
+  // Automatically take theme from the application / system
+  const scheme = (colorScheme !== undefined && colorScheme !== null)
+    ? colorScheme
+    : (Appearance && Appearance.getColorScheme ? Appearance.getColorScheme() : null);
+
+  return scheme === 'dark';
+};
+
+export const useTheme = (customHeaderColor) => {
+  // Automatically detects and follows application / system theme
+  const colorScheme = useColorScheme();
+  const isDark = isShakebugDark(colorScheme);
+
+  // Always respect the given Shakebug theme color, falling back to default
+  const brandColor = customHeaderColor || '#2E2E2E';
+
+  return {
+    isDark,
+    theme: isDark ? 'dark' : 'light',
+
+    // Primary Brand / Header Color
+    brandColor,
+    headerBg: brandColor,
+    headerText: '#ffffff',
+
+    // Screen backgrounds (clean white in light mode, dark charcoal in dark mode)
+    backgroundColor: isDark ? '#21252C' : '#ffffff',
+    detailsBg: isDark ? '#21252C' : '#ffffff',
+
+    // Card and surface backgrounds
+    cardBg: isDark ? '#21252C' : '#ffffff',
+    surfaceBg: isDark ? '#21252C' : '#ffffff',
+
+    // Bottom Sheet background
+    sheetBg: isDark ? '#313A46' : '#ffffff',
+    sheetHandle: isDark ? '#313A46' : '#d1d5db',
+
+    // Text colors
+    textColor: isDark ? '#ffffff' : '#0f172a',
+    textSecondary: isDark ? '#8e9db0' : '#64748b',
+    titleColor: isDark ? '#ffffff' : '#0f172a',
+
+    // Borders
+    borderColor: isDark ? '#2c323d' : '#e2e8f0',
+    inputBorder: isDark ? '#363b46' : '#e2e8f0',
+
+    // Inputs
+    inputBg: isDark ? '#2b2f38' : '#ffffff',
+    placeholderColor: isDark ? '#8e9db0' : '#94a3b8',
+
+    // Action buttons (Replace Image / Replace Video)
+    buttonBg: isDark ? '#363a44' : '#edf2f7',
+    buttonBorder: isDark ? '#444955' : '#cbd5e1',
+    buttonText: isDark ? '#8e9db0' : '#64748b',
+
+    // Send button in header
+    sendButtonBg: '#ffffff',
+    sendButtonText: brandColor,
+
+    // Bottom sheet buttons
+    sheetPrimaryBtnBg: brandColor,
+    sheetPrimaryBtnText: '#ffffff',
+    sheetButtonBg: isDark ? '#313A46' : '#ffffff',
+    sheetButtonBorder: isDark ? '#444b57' : '#e2e8f0',
+    sheetButtonText: isDark ? '#ebeef1' : '#0f172a',
+
+    // Floating annotation bar (always dark floating pill for contrast against screenshots)
+    floatingBarBg: '#242b35',
+    floatingBarBorder: 'transparent',
+
+    // Confirmation Modal
+    confirmModalBg: isDark ? '#2b2f38' : '#ffffff',
+    confirmModalText: isDark ? '#ffffff' : '#111827',
+    confirmButtonBg: isDark ? '#3a404c' : '#e2e8f0',
+    confirmCancelText: isDark ? '#ffffff' : '#111827',
+    confirmDisableText: '#ef4444',
+  };
+};
+
+export default useTheme;

package/src/Componanats/ZoomableImage.js

@@ -0,0 +1,350 @@
+import React, { useRef, useEffect } from 'react';
+import {
+  View,
+  Image,
+  PanResponder,
+  Animated,
+  StyleSheet,
+  Dimensions,
+  Platform,
+} from 'react-native';
+
+const ZoomableImage = ({ uri, style, resizeMode = 'contain' }) => {
+  const scale = useRef(new Animated.Value(1)).current;
+  const pan = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
+
+  // Track values synchronously for smooth gesture calculations
+  const currentScaleRef = useRef(1);
+  const currentPanRef = useRef({ x: 0, y: 0 });
+
+  const isPinchingRef = useRef(false);
+  const isPanningRef = useRef(false);
+  const initialDistanceRef = useRef(0);
+  const baseScaleRef = useRef(1);
+  const initialCenterRef = useRef({ x: 0, y: 0 });
+  const basePanRef = useRef({ x: 0, y: 0 });
+  const panStartTouchRef = useRef({ x: 0, y: 0 });
+  const lastTapRef = useRef(0);
+
+  const windowDim = Dimensions.get('window');
+  const layoutSizeRef = useRef({
+    width: windowDim.width,
+    height: 300,
+  });
+
+  useEffect(() => {
+    const scaleId = scale.addListener(({ value }) => {
+      currentScaleRef.current = value;
+    });
+    const panId = pan.addListener(({ x, y }) => {
+      currentPanRef.current = { x, y };
+    });
+    return () => {
+      if (typeof scale.removeListener === 'function') {
+        scale.removeListener(scaleId);
+      }
+      if (typeof pan.removeListener === 'function') {
+        pan.removeListener(panId);
+      }
+    };
+  }, [scale, pan]);
+
+  const onLayout = (e) => {
+    const { width, height } = e.nativeEvent.layout;
+    if (width > 0 && height > 0) {
+      layoutSizeRef.current = { width, height };
+    }
+  };
+
+  const getDistance = (touches) => {
+    if (!touches || touches.length < 2) return 0;
+    const dx = touches[0].pageX - touches[1].pageX;
+    const dy = touches[0].pageY - touches[1].pageY;
+    return Math.sqrt(dx * dx + dy * dy);
+  };
+
+  const getCenter = (touches) => {
+    if (!touches || touches.length < 2) return { x: 0, y: 0 };
+    return {
+      x: (touches[0].pageX + touches[1].pageX) / 2,
+      y: (touches[0].pageY + touches[1].pageY) / 2,
+    };
+  };
+
+  const handleRelease = () => {
+    isPinchingRef.current = false;
+    isPanningRef.current = false;
+    initialDistanceRef.current = 0;
+
+    if (currentScaleRef.current < 1.1) {
+      // Smoothly spring back to 1x and center (0, 0)
+      Animated.parallel([
+        Animated.spring(scale, {
+          toValue: 1,
+          friction: 7,
+          tension: 50,
+          useNativeDriver: true,
+        }),
+        Animated.spring(pan, {
+          toValue: { x: 0, y: 0 },
+          friction: 7,
+          tension: 50,
+          useNativeDriver: true,
+        }),
+      ]).start();
+      currentScaleRef.current = 1;
+      currentPanRef.current = { x: 0, y: 0 };
+    } else {
+      // Clamping within bounds
+      const { width, height } = layoutSizeRef.current;
+      const effectiveScale = Math.min(currentScaleRef.current, 4.5);
+      const maxX = Math.max(0, ((effectiveScale - 1) * width) / 2);
+      const maxY = Math.max(0, ((effectiveScale - 1) * height) / 2);
+
+      const boundedX = Math.max(-maxX, Math.min(maxX, currentPanRef.current.x));
+      const boundedY = Math.max(-maxY, Math.min(maxY, currentPanRef.current.y));
+
+      const animations = [];
+
+      if (currentScaleRef.current > 4.5) {
+        animations.push(
+          Animated.spring(scale, {
+            toValue: 4.0,
+            friction: 7,
+            tension: 50,
+            useNativeDriver: true,
+          })
+        );
+        currentScaleRef.current = 4.0;
+      }
+
+      if (
+        Math.abs(boundedX - currentPanRef.current.x) > 0.5 ||
+        Math.abs(boundedY - currentPanRef.current.y) > 0.5
+      ) {
+        animations.push(
+          Animated.spring(pan, {
+            toValue: { x: boundedX, y: boundedY },
+            friction: 7,
+            tension: 50,
+            useNativeDriver: true,
+          })
+        );
+        currentPanRef.current = { x: boundedX, y: boundedY };
+      }
+
+      if (animations.length > 0) {
+        Animated.parallel(animations).start();
+      }
+    }
+  };
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onStartShouldSetPanResponderCapture: (evt) => {
+        return evt.nativeEvent.touches && evt.nativeEvent.touches.length > 1;
+      },
+      onMoveShouldSetPanResponder: (evt, gestureState) => {
+        const touches = evt.nativeEvent.touches;
+        return (
+          (touches && touches.length > 1) ||
+          (currentScaleRef.current > 1.05 &&
+            (Math.abs(gestureState.dx) > 2 || Math.abs(gestureState.dy) > 2))
+        );
+      },
+      onMoveShouldSetPanResponderCapture: (evt) => {
+        return evt.nativeEvent.touches && evt.nativeEvent.touches.length > 1;
+      },
+      onPanResponderTerminationRequest: (evt) => {
+        // Never allow parent ScrollViews to steal active multi-touch pinch or zoomed-in pan
+        if (
+          (evt.nativeEvent.touches && evt.nativeEvent.touches.length > 1) ||
+          currentScaleRef.current > 1.05
+        ) {
+          return false;
+        }
+        return true;
+      },
+      onShouldBlockNativeResponder: () => true,
+
+      onPanResponderGrant: (evt) => {
+        const touches = evt.nativeEvent.touches;
+        const now = Date.now();
+
+        if (touches && touches.length >= 2) {
+          isPinchingRef.current = true;
+          isPanningRef.current = false;
+          initialDistanceRef.current = getDistance(touches);
+          baseScaleRef.current = currentScaleRef.current;
+          initialCenterRef.current = getCenter(touches);
+          basePanRef.current = { ...currentPanRef.current };
+        } else {
+          isPinchingRef.current = false;
+          isPanningRef.current = true;
+          if (touches && touches.length === 1) {
+            panStartTouchRef.current = {
+              x: touches[0].pageX,
+              y: touches[0].pageY,
+            };
+          }
+          basePanRef.current = { ...currentPanRef.current };
+
+          // Double tap toggle: 1x <-> 2.2x
+          if (now - lastTapRef.current < 300) {
+            lastTapRef.current = 0;
+            if (currentScaleRef.current > 1.2) {
+              Animated.parallel([
+                Animated.spring(scale, {
+                  toValue: 1,
+                  friction: 7,
+                  tension: 50,
+                  useNativeDriver: true,
+                }),
+                Animated.spring(pan, {
+                  toValue: { x: 0, y: 0 },
+                  friction: 7,
+                  tension: 50,
+                  useNativeDriver: true,
+                }),
+              ]).start();
+              currentScaleRef.current = 1;
+              currentPanRef.current = { x: 0, y: 0 };
+            } else {
+              Animated.spring(scale, {
+                toValue: 2.2,
+                friction: 7,
+                tension: 50,
+                useNativeDriver: true,
+              }).start();
+              currentScaleRef.current = 2.2;
+            }
+          } else {
+            lastTapRef.current = now;
+          }
+        }
+      },
+
+      onPanResponderMove: (evt) => {
+        const touches = evt.nativeEvent.touches;
+        if (touches && touches.length >= 2) {
+          const currentDist = getDistance(touches);
+          const currentCenter = getCenter(touches);
+
+          if (!isPinchingRef.current || !initialDistanceRef.current) {
+            isPinchingRef.current = true;
+            isPanningRef.current = false;
+            initialDistanceRef.current = currentDist;
+            baseScaleRef.current = currentScaleRef.current;
+            initialCenterRef.current = currentCenter;
+            basePanRef.current = { ...currentPanRef.current };
+            return;
+          }
+
+          if (initialDistanceRef.current > 0) {
+            const factor = currentDist / initialDistanceRef.current;
+            const targetScale = Math.max(
+              0.85,
+              Math.min(5.0, baseScaleRef.current * factor)
+            );
+            scale.setValue(targetScale);
+            currentScaleRef.current = targetScale;
+
+            const deltaX = currentCenter.x - initialCenterRef.current.x;
+            const deltaY = currentCenter.y - initialCenterRef.current.y;
+            const targetPanX = basePanRef.current.x + deltaX;
+            const targetPanY = basePanRef.current.y + deltaY;
+            pan.setValue({ x: targetPanX, y: targetPanY });
+            currentPanRef.current = { x: targetPanX, y: targetPanY };
+          }
+        } else if (touches && touches.length === 1) {
+          if (isPinchingRef.current) {
+            isPinchingRef.current = false;
+            isPanningRef.current = true;
+            initialDistanceRef.current = 0;
+            panStartTouchRef.current = {
+              x: touches[0].pageX,
+              y: touches[0].pageY,
+            };
+            basePanRef.current = { ...currentPanRef.current };
+          } else if (isPanningRef.current && currentScaleRef.current > 1.05) {
+            const deltaX = touches[0].pageX - panStartTouchRef.current.x;
+            const deltaY = touches[0].pageY - panStartTouchRef.current.y;
+            const targetPanX = basePanRef.current.x + deltaX;
+            const targetPanY = basePanRef.current.y + deltaY;
+            pan.setValue({ x: targetPanX, y: targetPanY });
+            currentPanRef.current = { x: targetPanX, y: targetPanY };
+          }
+        }
+      },
+
+      onPanResponderRelease: handleRelease,
+      onPanResponderTerminate: handleRelease,
+    })
+  ).current;
+
+  return (
+    <View
+      style={[styles.container, style]}
+      onLayout={onLayout}
+      collapsable={false}
+    >
+      <Animated.View
+        {...panResponder.panHandlers}
+        style={[
+          styles.imageWrapper,
+          {
+            transform: [
+              { translateX: pan.x },
+              { translateY: pan.y },
+              { scale },
+            ],
+          },
+        ]}
+        collapsable={false}
+      >
+        {uri ? (
+          <Image
+            source={{
+              uri:
+                Platform.OS === 'android' &&
+                typeof uri === 'string' &&
+                !uri.startsWith('file://') &&
+                !uri.startsWith('content://') &&
+                !uri.startsWith('http')
+                  ? `file://${uri}`
+                  : uri,
+            }}
+            style={styles.image}
+            resizeMode={resizeMode}
+          />
+        ) : null}
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+  },
+  imageWrapper: {
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+});
+
+export default ZoomableImage;