@umituz/react-native-image 1.1.0

package/src/presentation/hooks/useImage.ts

@@ -0,0 +1,393 @@
+/**
+ * Image Domain - useImage Hook
+ *
+ * React hook for image manipulation operations.
+ * Provides image resizing, cropping, rotating, and format conversion.
+ */
+
+import { useState, useCallback } from 'react';
+import { ImageService } from '../../infrastructure/services/ImageService';
+import type {
+  ImageManipulateAction,
+  ImageSaveOptions,
+  ImageManipulationResult,
+  SaveFormat,
+} from '../../domain/entities/Image';
+
+/**
+ * useImage hook for image manipulation
+ *
+ * USAGE:
+ * ```typescript
+ * const { resize, crop, rotate, compress, isProcessing } = useImage();
+ *
+ * // Resize image
+ * const resized = await resize(imageUri, 800, 600);
+ *
+ * // Crop image
+ * const cropped = await crop(imageUri, { originX: 0, originY: 0, width: 500, height: 500 });
+ *
+ * // Compress image
+ * const compressed = await compress(imageUri, 0.7);
+ * ```
+ */
+export const useImage = () => {
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  /**
+   * Resize image
+   */
+  const resize = useCallback(
+    async (
+      uri: string,
+      width?: number,
+      height?: number,
+      options?: ImageSaveOptions
+    ): Promise<ImageManipulationResult | null> => {
+      setIsProcessing(true);
+      setError(null);
+
+      try {
+        const result = await ImageService.resize(uri, width, height, options);
+
+        if (!result) {
+          setError('Failed to resize image');
+        }
+
+        return result;
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to resize image';
+        setError(errorMessage);
+        return null;
+      } finally {
+        setIsProcessing(false);
+      }
+    },
+    []
+  );
+
+  /**
+   * Crop image
+   */
+  const crop = useCallback(
+    async (
+      uri: string,
+      cropArea: { originX: number; originY: number; width: number; height: number },
+      options?: ImageSaveOptions
+    ): Promise<ImageManipulationResult | null> => {
+      setIsProcessing(true);
+      setError(null);
+
+      try {
+        const result = await ImageService.crop(uri, cropArea, options);
+
+        if (!result) {
+          setError('Failed to crop image');
+        }
+
+        return result;
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to crop image';
+        setError(errorMessage);
+        return null;
+      } finally {
+        setIsProcessing(false);
+      }
+    },
+    []
+  );
+
+  /**
+   * Rotate image
+   */
+  const rotate = useCallback(
+    async (
+      uri: string,
+      degrees: number,
+      options?: ImageSaveOptions
+    ): Promise<ImageManipulationResult | null> => {
+      setIsProcessing(true);
+      setError(null);
+
+      try {
+        const result = await ImageService.rotate(uri, degrees, options);
+
+        if (!result) {
+          setError('Failed to rotate image');
+        }
+
+        return result;
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to rotate image';
+        setError(errorMessage);
+        return null;
+      } finally {
+        setIsProcessing(false);
+      }
+    },
+    []
+  );
+
+  /**
+   * Flip image
+   */
+  const flip = useCallback(
+    async (
+      uri: string,
+      flipOptions: { horizontal?: boolean; vertical?: boolean },
+      saveOptions?: ImageSaveOptions
+    ): Promise<ImageManipulationResult | null> => {
+      setIsProcessing(true);
+      setError(null);
+
+      try {
+        const result = await ImageService.flip(uri, flipOptions, saveOptions);
+
+        if (!result) {
+          setError('Failed to flip image');
+        }
+
+        return result;
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to flip image';
+        setError(errorMessage);
+        return null;
+      } finally {
+        setIsProcessing(false);
+      }
+    },
+    []
+  );
+
+  /**
+   * Perform multiple manipulations
+   */
+  const manipulate = useCallback(
+    async (
+      uri: string,
+      action: ImageManipulateAction,
+      options?: ImageSaveOptions
+    ): Promise<ImageManipulationResult | null> => {
+      setIsProcessing(true);
+      setError(null);
+
+      try {
+        const result = await ImageService.manipulate(uri, action, options);
+
+        if (!result) {
+          setError('Failed to manipulate image');
+        }
+
+        return result;
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to manipulate image';
+        setError(errorMessage);
+        return null;
+      } finally {
+        setIsProcessing(false);
+      }
+    },
+    []
+  );
+
+  /**
+   * Compress image
+   */
+  const compress = useCallback(
+    async (uri: string, quality: number = 0.8): Promise<ImageManipulationResult | null> => {
+      setIsProcessing(true);
+      setError(null);
+
+      try {
+        const result = await ImageService.compress(uri, quality);
+
+        if (!result) {
+          setError('Failed to compress image');
+        }
+
+        return result;
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to compress image';
+        setError(errorMessage);
+        return null;
+      } finally {
+        setIsProcessing(false);
+      }
+    },
+    []
+  );
+
+  /**
+   * Resize to fit within max dimensions
+   */
+  const resizeToFit = useCallback(
+    async (
+      uri: string,
+      maxWidth: number,
+      maxHeight: number,
+      options?: ImageSaveOptions
+    ): Promise<ImageManipulationResult | null> => {
+      setIsProcessing(true);
+      setError(null);
+
+      try {
+        const result = await ImageService.resizeToFit(uri, maxWidth, maxHeight, options);
+
+        if (!result) {
+          setError('Failed to resize image to fit');
+        }
+
+        return result;
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to resize image to fit';
+        setError(errorMessage);
+        return null;
+      } finally {
+        setIsProcessing(false);
+      }
+    },
+    []
+  );
+
+  /**
+   * Create thumbnail
+   */
+  const createThumbnail = useCallback(
+    async (
+      uri: string,
+      size: number = 200,
+      options?: ImageSaveOptions
+    ): Promise<ImageManipulationResult | null> => {
+      setIsProcessing(true);
+      setError(null);
+
+      try {
+        const result = await ImageService.createThumbnail(uri, size, options);
+
+        if (!result) {
+          setError('Failed to create thumbnail');
+        }
+
+        return result;
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to create thumbnail';
+        setError(errorMessage);
+        return null;
+      } finally {
+        setIsProcessing(false);
+      }
+    },
+    []
+  );
+
+  /**
+   * Crop to square
+   */
+  const cropToSquare = useCallback(
+    async (
+      uri: string,
+      width: number,
+      height: number,
+      options?: ImageSaveOptions
+    ): Promise<ImageManipulationResult | null> => {
+      setIsProcessing(true);
+      setError(null);
+
+      try {
+        const result = await ImageService.cropToSquare(uri, width, height, options);
+
+        if (!result) {
+          setError('Failed to crop to square');
+        }
+
+        return result;
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to crop to square';
+        setError(errorMessage);
+        return null;
+      } finally {
+        setIsProcessing(false);
+      }
+    },
+    []
+  );
+
+  /**
+   * Convert image format
+   */
+  const convertFormat = useCallback(
+    async (
+      uri: string,
+      format: SaveFormat,
+      quality?: number
+    ): Promise<ImageManipulationResult | null> => {
+      setIsProcessing(true);
+      setError(null);
+
+      try {
+        const result = await ImageService.convertFormat(uri, format, quality);
+
+        if (!result) {
+          setError('Failed to convert image format');
+        }
+
+        return result;
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to convert image format';
+        setError(errorMessage);
+        return null;
+      } finally {
+        setIsProcessing(false);
+      }
+    },
+    []
+  );
+
+  /**
+   * Save image to device
+   */
+  const saveImage = useCallback(
+    async (uri: string, filename?: string): Promise<string | null> => {
+      setIsProcessing(true);
+      setError(null);
+
+      try {
+        const savedUri = await ImageService.saveImage(uri, filename);
+
+        if (!savedUri) {
+          setError('Failed to save image');
+        }
+
+        return savedUri;
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to save image';
+        setError(errorMessage);
+        return null;
+      } finally {
+        setIsProcessing(false);
+      }
+    },
+    []
+  );
+
+  return {
+    // Functions
+    resize,
+    crop,
+    rotate,
+    flip,
+    manipulate,
+    compress,
+    resizeToFit,
+    createThumbnail,
+    cropToSquare,
+    convertFormat,
+    saveImage,
+
+    // State
+    isProcessing,
+    error,
+  };
+};
+

package/src/presentation/hooks/useImageGallery.ts

@@ -0,0 +1,149 @@
+/**
+ * Image Domain - useImageGallery Hook
+ *
+ * React hook for image gallery and viewer using react-native-image-viewing.
+ * Provides full-screen image viewer with zoom, swipe, and gallery features.
+ */
+
+import { useState, useCallback, useMemo } from 'react';
+import { ImageViewerService } from '../../infrastructure/services/ImageViewerService';
+import type {
+  ImageViewerItem,
+  ImageGalleryOptions,
+} from '../../domain/entities/Image';
+
+/**
+ * useImageGallery hook return type
+ */
+export interface UseImageGalleryReturn {
+  // State
+  visible: boolean;
+  currentIndex: number;
+  images: ImageViewerItem[];
+
+  // Actions
+  open: (images: ImageViewerItem[] | string[], startIndex?: number, options?: ImageGalleryOptions) => void;
+  close: () => void;
+  setIndex: (index: number) => void;
+
+  // Gallery options
+  options: ImageGalleryOptions;
+}
+
+/**
+ * useImageGallery hook for full-screen image viewer
+ *
+ * USAGE:
+ * ```typescript
+ * const { visible, currentIndex, images, open, close, options } = useImageGallery();
+ *
+ * // Open gallery with image URIs
+ * open(['uri1', 'uri2', 'uri3']);
+ *
+ * // Open gallery with metadata
+ * open([
+ *   { uri: 'uri1', title: 'Photo 1' },
+ *   { uri: 'uri2', title: 'Photo 2' },
+ * ], 0, { backgroundColor: '#000000' });
+ *
+ * // Render ImageViewing component
+ * <ImageViewing
+ *   images={images}
+ *   imageIndex={currentIndex}
+ *   visible={visible}
+ *   onRequestClose={close}
+ *   onIndexChange={setIndex}
+ *   {...options}
+ * />
+ * ```
+ */
+export const useImageGallery = (
+  defaultOptions?: ImageGalleryOptions
+): UseImageGalleryReturn => {
+  const [visible, setVisible] = useState(false);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [images, setImages] = useState<ImageViewerItem[]>([]);
+  const [galleryOptions, setGalleryOptions] = useState<ImageGalleryOptions>(
+    defaultOptions || ImageViewerService.getDefaultOptions()
+  );
+
+  /**
+   * Open gallery with images
+   */
+  const open = useCallback(
+    (
+      imageData: ImageViewerItem[] | string[],
+      startIndex: number = 0,
+      options?: ImageGalleryOptions
+    ) => {
+      // Prepare images based on input type
+      const preparedImages =
+        typeof imageData[0] === 'string'
+          ? ImageViewerService.prepareImages(imageData as string[])
+          : ImageViewerService.prepareImagesWithMetadata(imageData as ImageViewerItem[]);
+
+      setImages(preparedImages);
+      setCurrentIndex(options?.index ?? startIndex);
+
+      // Merge options with defaults
+      if (options) {
+        setGalleryOptions({
+          ...galleryOptions,
+          ...options,
+        });
+      }
+
+      setVisible(true);
+    },
+    [galleryOptions]
+  );
+
+  /**
+   * Close gallery
+   */
+  const close = useCallback(() => {
+    setVisible(false);
+
+    // Call onDismiss if provided
+    if (galleryOptions.onDismiss) {
+      galleryOptions.onDismiss();
+    }
+  }, [galleryOptions]);
+
+  /**
+   * Set current image index
+   */
+  const setIndex = useCallback((index: number) => {
+    setCurrentIndex(index);
+
+    // Call onIndexChange if provided
+    if (galleryOptions.onIndexChange) {
+      galleryOptions.onIndexChange(index);
+    }
+  }, [galleryOptions]);
+
+  /**
+   * Memoized options for ImageViewing component
+   */
+  const options = useMemo(() => ({
+    backgroundColor: galleryOptions.backgroundColor || '#000000',
+    swipeToCloseEnabled: galleryOptions.swipeToCloseEnabled ?? true,
+    doubleTapToZoomEnabled: galleryOptions.doubleTapToZoomEnabled ?? true,
+  }), [galleryOptions]);
+
+  return {
+    // State
+    visible,
+    currentIndex,
+    images,
+
+    // Actions
+    open,
+    close,
+    setIndex,
+
+    // Gallery options
+    options,
+  };
+};
+