@umituz/react-native-image 1.1.0 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-image",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Image manipulation and viewing for React Native apps - resize, crop, rotate, flip, compress, gallery viewer",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -29,17 +29,23 @@
     "url": "https://github.com/umituz/react-native-image"
   },
   "peerDependencies": {
+    "@umituz/react-native-filesystem": "latest",
+    "expo-image-manipulator": ">=11.0.0",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
-    "expo-image-manipulator": ">=11.0.0",
-    "react-native-image-viewing": ">=0.2.0",
-    "@umituz/react-native-filesystem": "latest"
+    "react-native-image-viewing": ">=0.2.0"
   },
   "devDependencies": {
+    "@react-native/typescript-config": "^0.83.0",
     "@types/react": "^18.2.45",
     "@types/react-native": "^0.73.0",
+    "@umituz/react-native-design-system-theme": "^1.12.0",
+    "@umituz/react-native-filesystem": "^2.1.1",
+    "expo-file-system": "^19.0.21",
+    "expo-image-manipulator": "^14.0.8",
     "react": "^18.2.0",
     "react-native": "^0.74.0",
+    "react-native-image-viewing": "^0.2.2",
     "typescript": "^5.3.3"
   },
   "publishConfig": {

package/src/domain/entities/ImageConstants.ts

@@ -0,0 +1,21 @@
+/**
+ * Image Constants
+ */
+import { SaveFormat } from "./ImageTypes";
+
+export const IMAGE_CONSTANTS = {
+    MAX_WIDTH: 2048,
+    MAX_HEIGHT: 2048,
+    DEFAULT_QUALITY: 0.8,
+    THUMBNAIL_SIZE: 200,
+    COMPRESS_QUALITY: {
+        LOW: 0.5,
+        MEDIUM: 0.7,
+        HIGH: 0.9,
+    },
+    FORMAT: {
+        JPEG: 'jpeg' as SaveFormat,
+        PNG: 'png' as SaveFormat,
+        WEBP: 'webp' as SaveFormat,
+    },
+} as const;

package/src/domain/entities/ImageTypes.ts

@@ -0,0 +1,71 @@
+/**
+ * Image Type Definitions
+ */
+
+export enum ImageFormat {
+    JPEG = 'jpeg',
+    PNG = 'png',
+    WEBP = 'webp',
+}
+
+export type SaveFormat = 'jpeg' | 'png' | 'webp';
+
+export enum ImageOrientation {
+    PORTRAIT = 'portrait',
+    LANDSCAPE = 'landscape',
+    SQUARE = 'square',
+}
+
+export interface ImageManipulateAction {
+    resize?: { width?: number; height?: number };
+    crop?: { originX: number; originY: number; width: number; height: number };
+    rotate?: number;
+    flip?: { vertical?: boolean; horizontal?: boolean };
+}
+
+export interface ImageSaveOptions {
+    format?: SaveFormat;
+    compress?: number;
+    base64?: boolean;
+}
+
+export interface ImageManipulationResult {
+    uri: string;
+    width: number;
+    height: number;
+    base64?: string;
+}
+
+export interface ImageMetadata {
+    uri: string;
+    width: number;
+    height: number;
+    format?: ImageFormat;
+    size?: number;
+    orientation?: ImageOrientation;
+}
+
+export interface ImageViewerItem {
+    uri: string;
+    title?: string;
+    description?: string;
+    width?: number;
+    height?: number;
+}
+
+export interface ImageGalleryOptions {
+    index?: number;
+    backgroundColor?: string;
+    swipeToCloseEnabled?: boolean;
+    doubleTapToZoomEnabled?: boolean;
+    onDismiss?: () => void;
+    onIndexChange?: (index: number) => void;
+}
+
+export interface ImageOperationResult {
+    success: boolean;
+    uri?: string;
+    error?: string;
+    width?: number;
+    height?: number;
+}

package/src/domain/utils/ImageUtils.ts

@@ -0,0 +1,103 @@
+/**
+ * Image Utilities
+ */
+import { ImageFormat, ImageOrientation, ImageManipulateAction } from "../entities/ImageTypes";
+import { IMAGE_CONSTANTS } from "../entities/ImageConstants";
+
+export class ImageUtils {
+    static getOrientation(width: number, height: number): ImageOrientation {
+        if (width > height) return ImageOrientation.LANDSCAPE;
+        if (height > width) return ImageOrientation.PORTRAIT;
+        return ImageOrientation.SQUARE;
+    }
+
+    static getAspectRatio(width: number, height: number): number {
+        return width / height;
+    }
+
+    static fitToSize(
+        width: number,
+        height: number,
+        maxWidth: number,
+        maxHeight: number
+    ): { width: number; height: number } {
+        const aspectRatio = ImageUtils.getAspectRatio(width, height);
+        let newWidth = width;
+        let newHeight = height;
+
+        if (width > maxWidth) {
+            newWidth = maxWidth;
+            newHeight = newWidth / aspectRatio;
+        }
+
+        if (newHeight > maxHeight) {
+            newHeight = maxHeight;
+            newWidth = newHeight * aspectRatio;
+        }
+
+        return {
+            width: Math.round(newWidth),
+            height: Math.round(newHeight),
+        };
+    }
+
+    static getThumbnailSize(
+        width: number,
+        height: number,
+        thumbnailSize: number = IMAGE_CONSTANTS.THUMBNAIL_SIZE
+    ): { width: number; height: number } {
+        return ImageUtils.fitToSize(width, height, thumbnailSize, thumbnailSize);
+    }
+
+    static isValidImageUri(uri: string): boolean {
+        if (!uri) return false;
+        return (
+            uri.startsWith('file://') ||
+            uri.startsWith('content://') ||
+            uri.startsWith('http://') ||
+            uri.startsWith('https://') ||
+            uri.startsWith('data:image/')
+        );
+    }
+
+    static getFormatFromUri(uri: string): ImageFormat | null {
+        const lowerUri = uri.toLowerCase();
+        if (lowerUri.includes('.jpg') || lowerUri.includes('.jpeg')) return ImageFormat.JPEG;
+        if (lowerUri.includes('.png')) return ImageFormat.PNG;
+        if (lowerUri.includes('.webp')) return ImageFormat.WEBP;
+        return null;
+    }
+
+    static getExtensionFromFormat(format: ImageFormat): string {
+        switch (format) {
+            case ImageFormat.JPEG: return 'jpg';
+            case ImageFormat.PNG: return 'png';
+            case ImageFormat.WEBP: return 'webp';
+            default: return 'jpg';
+        }
+    }
+
+    static getSquareCrop(width: number, height: number): ImageManipulateAction['crop'] {
+        const size = Math.min(width, height);
+        const originX = (width - size) / 2;
+        const originY = (height - size) / 2;
+
+        return {
+            originX: Math.round(originX),
+            originY: Math.round(originY),
+            width: Math.round(size),
+            height: Math.round(size),
+        };
+    }
+
+    static formatFileSize(bytes: number): string {
+        if (bytes < 1024) return `${bytes} B`;
+        if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    }
+
+    static needsCompression(bytes: number, maxSizeMB: number = 2): boolean {
+        const maxBytes = maxSizeMB * 1024 * 1024;
+        return bytes > maxBytes;
+    }
+}

package/src/index.ts

@@ -5,7 +5,7 @@
  * Resize, crop, rotate, flip, compress, gallery viewer
  *
  * Usage:
- *   import { useImage, useImageGallery, ImageService, ImageUtils } from '@umituz/react-native-image';
+ *   import { useImage, ImageGallery, ImageService, ImageUtils } from '@umituz/react-native-image';
  */
 
 // =============================================================================
@@ -21,35 +21,41 @@ export type {
   ImageGalleryOptions,
   ImageOperationResult,
   SaveFormat,
-} from './domain/entities/Image';
+} from './domain/entities/ImageTypes';
 
 export {
   ImageFormat,
   ImageOrientation,
-  IMAGE_CONSTANTS,
-  ImageUtils,
-} from './domain/entities/Image';
+} from './domain/entities/ImageTypes';
+
+export { IMAGE_CONSTANTS } from './domain/entities/ImageConstants';
+export { ImageUtils } from './domain/utils/ImageUtils';
 
 // =============================================================================
 // INFRASTRUCTURE LAYER - Services
 // =============================================================================
 
-export { ImageService } from './infrastructure/services/ImageService';
+export { ImageTransformService } from './infrastructure/services/ImageTransformService';
+export { ImageConversionService } from './infrastructure/services/ImageConversionService';
+export { ImageStorageService } from './infrastructure/services/ImageStorageService';
 export {
   ImageViewerService,
   type ImageViewerConfig,
 } from './infrastructure/services/ImageViewerService';
 
 // =============================================================================
-// PRESENTATION LAYER - Hooks
+// PRESENTATION LAYER - Components & Hooks
 // =============================================================================
 
-export {
-  useImage,
-} from './presentation/hooks/useImage';
+export { ImageGallery, type ImageGalleryProps } from './presentation/components/ImageGallery';
+
+export { useImage } from './presentation/hooks/useImage';
+export { useImageTransform } from './presentation/hooks/useImageTransform';
+export { useImageConversion } from './presentation/hooks/useImageConversion';
 
 export {
   useImageGallery,
   type UseImageGalleryReturn,
 } from './presentation/hooks/useImageGallery';
 
+

package/src/infrastructure/services/ImageConversionService.ts

@@ -0,0 +1,66 @@
+/**
+ * Image Conversion Service
+ * 
+ * Handles format conversion, compression, and thumbnail generation.
+ * (Thumbnail is treated as a specialized compression/resize)
+ */
+
+import * as ImageManipulator from 'expo-image-manipulator';
+import type {
+    ImageSaveOptions,
+    ImageManipulationResult,
+    SaveFormat,
+} from '../../domain/entities/ImageTypes';
+import { IMAGE_CONSTANTS } from '../../domain/entities/ImageConstants';
+import { ImageTransformService } from './ImageTransformService';
+
+export class ImageConversionService {
+    static async compress(
+        uri: string,
+        quality: number = IMAGE_CONSTANTS.DEFAULT_QUALITY
+    ): Promise<ImageManipulationResult | null> {
+        try {
+            return await ImageManipulator.manipulateAsync(
+                uri,
+                [],
+                { compress: quality }
+            );
+        } catch {
+            return null;
+        }
+    }
+
+    static async convertFormat(
+        uri: string,
+        format: SaveFormat,
+        quality?: number
+    ): Promise<ImageManipulationResult | null> {
+        try {
+            return await ImageManipulator.manipulateAsync(
+                uri,
+                [],
+                {
+                    compress: quality || IMAGE_CONSTANTS.DEFAULT_QUALITY,
+                    format: ImageTransformService.mapFormat(format),
+                }
+            );
+        } catch {
+            return null;
+        }
+    }
+
+    static async createThumbnail(
+        uri: string,
+        size: number = IMAGE_CONSTANTS.THUMBNAIL_SIZE,
+        options?: ImageSaveOptions
+    ): Promise<ImageManipulationResult | null> {
+        try {
+            return ImageTransformService.resizeToFit(uri, size, size, {
+                ...options,
+                compress: options?.compress || IMAGE_CONSTANTS.COMPRESS_QUALITY.MEDIUM,
+            });
+        } catch {
+            return null;
+        }
+    }
+}

package/src/infrastructure/services/ImageStorageService.ts

@@ -0,0 +1,22 @@
+/**
+ * Image Storage Service
+ * 
+ * Handles saving images to the device filesystem.
+ * Wraps @umituz/react-native-filesystem.
+ */
+
+import { FileSystemService } from '@umituz/react-native-filesystem';
+
+export class ImageStorageService {
+    static async saveImage(
+        uri: string,
+        filename?: string
+    ): Promise<string | null> {
+        try {
+            const result = await FileSystemService.copyToDocuments(uri, filename);
+            return result.success && result.uri ? result.uri : null;
+        } catch {
+            return null;
+        }
+    }
+}

package/src/infrastructure/services/ImageTransformService.ts

@@ -0,0 +1,172 @@
+/**
+ * Image Transform Service
+ * 
+ * Handles basic geometric transformations: resize, crop, rotate, flip.
+ * Also handles combined manipulations.
+ */
+
+import * as ImageManipulator from 'expo-image-manipulator';
+import type {
+    ImageManipulateAction,
+    ImageSaveOptions,
+    ImageManipulationResult,
+    SaveFormat,
+} from '../../domain/entities/ImageTypes';
+import { IMAGE_CONSTANTS } from '../../domain/entities/ImageConstants';
+import { ImageUtils } from '../../domain/utils/ImageUtils';
+
+export class ImageTransformService {
+    /**
+     * Helper to map SaveFormat to Manipulator format
+     */
+    static mapFormat(format?: SaveFormat): ImageManipulator.SaveFormat {
+        if (format === 'png') return ImageManipulator.SaveFormat.PNG;
+        if (format === 'webp') return ImageManipulator.SaveFormat.WEBP;
+        return ImageManipulator.SaveFormat.JPEG;
+    }
+
+    static async resize(
+        uri: string,
+        width?: number,
+        height?: number,
+        options?: ImageSaveOptions
+    ): Promise<ImageManipulationResult | null> {
+        try {
+            return await ImageManipulator.manipulateAsync(
+                uri,
+                [{ resize: { width, height } }],
+                {
+                    compress: options?.compress || IMAGE_CONSTANTS.DEFAULT_QUALITY,
+                    format: ImageTransformService.mapFormat(options?.format),
+                    base64: options?.base64,
+                }
+            );
+        } catch {
+            return null;
+        }
+    }
+
+    static async crop(
+        uri: string,
+        cropArea: { originX: number; originY: number; width: number; height: number },
+        options?: ImageSaveOptions
+    ): Promise<ImageManipulationResult | null> {
+        try {
+            return await ImageManipulator.manipulateAsync(
+                uri,
+                [{ crop: cropArea }],
+                {
+                    compress: options?.compress || IMAGE_CONSTANTS.DEFAULT_QUALITY,
+                    format: ImageTransformService.mapFormat(options?.format),
+                    base64: options?.base64,
+                }
+            );
+        } catch {
+            return null;
+        }
+    }
+
+    static async rotate(
+        uri: string,
+        degrees: number,
+        options?: ImageSaveOptions
+    ): Promise<ImageManipulationResult | null> {
+        try {
+            return await ImageManipulator.manipulateAsync(
+                uri,
+                [{ rotate: degrees }],
+                {
+                    compress: options?.compress || IMAGE_CONSTANTS.DEFAULT_QUALITY,
+                    format: ImageTransformService.mapFormat(options?.format),
+                    base64: options?.base64,
+                }
+            );
+        } catch {
+            return null;
+        }
+    }
+
+    static async flip(
+        uri: string,
+        flip: { horizontal?: boolean; vertical?: boolean },
+        options?: ImageSaveOptions
+    ): Promise<ImageManipulationResult | null> {
+        try {
+            const actions: ImageManipulator.Action[] = [];
+            if (flip.horizontal) actions.push({ flip: ImageManipulator.FlipType.Horizontal });
+            if (flip.vertical) actions.push({ flip: ImageManipulator.FlipType.Vertical });
+
+            return await ImageManipulator.manipulateAsync(
+                uri,
+                actions,
+                {
+                    compress: options?.compress || IMAGE_CONSTANTS.DEFAULT_QUALITY,
+                    format: ImageTransformService.mapFormat(options?.format),
+                    base64: options?.base64,
+                }
+            );
+        } catch {
+            return null;
+        }
+    }
+
+    static async manipulate(
+        uri: string,
+        action: ImageManipulateAction,
+        options?: ImageSaveOptions
+    ): Promise<ImageManipulationResult | null> {
+        try {
+            const actions: ImageManipulator.Action[] = [];
+            if (action.resize) actions.push({ resize: action.resize });
+            if (action.crop) {
+                // @ts-ignore - guarded by check above
+                actions.push({ crop: action.crop });
+            }
+            if (action.rotate) actions.push({ rotate: action.rotate });
+            if (action.flip) {
+                if (action.flip.horizontal) actions.push({ flip: ImageManipulator.FlipType.Horizontal });
+                if (action.flip.vertical) actions.push({ flip: ImageManipulator.FlipType.Vertical });
+            }
+
+            return await ImageManipulator.manipulateAsync(
+                uri,
+                actions,
+                {
+                    compress: options?.compress || IMAGE_CONSTANTS.DEFAULT_QUALITY,
+                    format: ImageTransformService.mapFormat(options?.format),
+                    base64: options?.base64,
+                }
+            );
+        } catch {
+            return null;
+        }
+    }
+
+    static async resizeToFit(
+        uri: string,
+        maxWidth: number,
+        maxHeight: number,
+        options?: ImageSaveOptions
+    ): Promise<ImageManipulationResult | null> {
+        try {
+            const dimensions = ImageUtils.fitToSize(maxWidth, maxHeight, maxWidth, maxHeight);
+            return ImageTransformService.resize(uri, dimensions.width, dimensions.height, options);
+        } catch {
+            return null;
+        }
+    }
+
+    static async cropToSquare(
+        uri: string,
+        width: number,
+        height: number,
+        options?: ImageSaveOptions
+    ): Promise<ImageManipulationResult | null> {
+        try {
+            const cropArea = ImageUtils.getSquareCrop(width, height);
+            return ImageTransformService.crop(uri, cropArea, options);
+        } catch {
+            return null;
+        }
+    }
+}

package/src/infrastructure/services/ImageViewerService.ts

@@ -8,7 +8,7 @@
 import type {
   ImageViewerItem,
   ImageGalleryOptions,
-} from '../../domain/entities/Image';
+} from '../../domain/entities/ImageTypes';
 
 /**
  * Image viewer configuration

package/src/presentation/components/ImageGallery.tsx

@@ -0,0 +1,54 @@
+/**
+ * Image Gallery Component
+ * 
+ * A wrapper around react-native-image-viewing that provides
+ * theme integration and standard configuration.
+ */
+
+import React from 'react';
+import ImageViewing from 'react-native-image-viewing';
+import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+import type { ImageViewerItem, ImageGalleryOptions } from '../../domain/entities/ImageTypes';
+
+export interface ImageGalleryProps extends ImageGalleryOptions {
+    images: ImageViewerItem[];
+    visible: boolean;
+    onDismiss: () => void;
+    index?: number;
+}
+
+export const ImageGallery: React.FC<ImageGalleryProps> = ({
+    images,
+    visible,
+    onDismiss,
+    index = 0,
+    backgroundColor,
+    swipeToCloseEnabled = true,
+    doubleTapToZoomEnabled = true,
+    onIndexChange,
+}) => {
+    const tokens = useAppDesignTokens();
+
+    // Use theme background if not provided
+    const bg = backgroundColor || tokens.colors.backgroundPrimary;
+
+    // Map images to structure expected by ImageViewing (uri object)
+    const viewerImages = React.useMemo(() =>
+        images.map(img => ({ uri: img.uri })),
+        [images]
+    );
+
+    return (
+        <ImageViewing
+            images={viewerImages}
+            imageIndex={index}
+            visible={visible}
+            onRequestClose={onDismiss}
+            onImageIndexChange={onIndexChange}
+            backgroundColor={bg}
+            swipeToCloseEnabled={swipeToCloseEnabled}
+            doubleTapToZoomEnabled={doubleTapToZoomEnabled}
+        // Can add custom Header/Footer here using theme tokens if needed
+        />
+    );
+};