@umituz/react-native-image 1.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2024 Ümit UZ
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,250 @@
+# @umituz/react-native-image
+
+Image manipulation and viewing for React Native apps - resize, crop, rotate, flip, compress, gallery viewer.
+
+## Features
+
+- ✅ **Image Manipulation** - Resize, crop, rotate, flip, compress
+- ✅ **Format Conversion** - JPEG, PNG, WEBP
+- ✅ **Thumbnail Generation** - Create small preview images
+- ✅ **Full-Screen Image Viewer** - Gallery viewer with zoom/swipe (react-native-image-viewing)
+- ✅ **Image Gallery Management** - Multiple images with navigation
+- ✅ **Filesystem Integration** - Save images to device using @umituz/react-native-filesystem
+- ✅ **Type-Safe** - Full TypeScript support
+
+## Installation
+
+```bash
+npm install @umituz/react-native-image
+```
+
+## Peer Dependencies
+
+```bash
+npm install expo-image-manipulator react-native-image-viewing @umituz/react-native-filesystem
+```
+
+## Usage
+
+### Image Manipulation
+
+```tsx
+import { useImage } from '@umituz/react-native-image';
+
+const MyScreen = () => {
+  const { resize, crop, rotate, compress, isProcessing } = useImage();
+
+  const handleResize = async () => {
+    const resized = await resize(imageUri, 800, 600);
+    if (resized) {
+      console.log('Resized:', resized.uri);
+    }
+  };
+
+  const handleCrop = async () => {
+    const cropped = await crop(imageUri, {
+      originX: 0,
+      originY: 0,
+      width: 500,
+      height: 500,
+    });
+  };
+
+  const handleCompress = async () => {
+    const compressed = await compress(imageUri, 0.7);
+  };
+
+  return (
+    <View>
+      <Button onPress={handleResize} disabled={isProcessing}>
+        Resize Image
+      </Button>
+    </View>
+  );
+};
+```
+
+### Image Gallery Viewer
+
+```tsx
+import { useImageGallery } from '@umituz/react-native-image';
+import ImageViewing from 'react-native-image-viewing';
+
+const MyScreen = () => {
+  const { visible, currentIndex, images, open, close, setIndex } = useImageGallery();
+
+  const handleOpenGallery = () => {
+    open(['uri1', 'uri2', 'uri3'], 0);
+  };
+
+  return (
+    <View>
+      <Button onPress={handleOpenGallery}>Open Gallery</Button>
+
+      <ImageViewing
+        images={images}
+        imageIndex={currentIndex}
+        visible={visible}
+        onRequestClose={close}
+        onIndexChange={setIndex}
+      />
+    </View>
+  );
+};
+```
+
+### Image Service (Direct Usage)
+
+```tsx
+import { ImageService } from '@umituz/react-native-image';
+
+// Resize image
+const resized = await ImageService.resize(uri, 800, 600);
+
+// Crop image
+const cropped = await ImageService.crop(uri, {
+  originX: 0,
+  originY: 0,
+  width: 500,
+  height: 500,
+});
+
+// Create thumbnail
+const thumbnail = await ImageService.createThumbnail(uri, 200);
+
+// Save image
+const savedUri = await ImageService.saveImage(uri, 'my-image.jpg');
+```
+
+### Image Utilities
+
+```tsx
+import { ImageUtils, ImageFormat } from '@umituz/react-native-image';
+
+// Get orientation
+const orientation = ImageUtils.getOrientation(1920, 1080);
+// Returns: ImageOrientation.LANDSCAPE
+
+// Calculate aspect ratio
+const ratio = ImageUtils.getAspectRatio(1920, 1080);
+// Returns: 1.777...
+
+// Fit to size
+const dimensions = ImageUtils.fitToSize(1920, 1080, 800, 600);
+// Returns: { width: 800, height: 450 }
+
+// Get format from URI
+const format = ImageUtils.getFormatFromUri('image.jpg');
+// Returns: ImageFormat.JPEG
+
+// Format file size
+const size = ImageUtils.formatFileSize(1024000);
+// Returns: "1000.0 KB"
+```
+
+## API Reference
+
+### `useImage()`
+
+React hook for image manipulation operations.
+
+**Returns:**
+- `resize(uri, width?, height?, options?)` - Resize image
+- `crop(uri, cropArea, options?)` - Crop image
+- `rotate(uri, degrees, options?)` - Rotate image
+- `flip(uri, flipOptions, options?)` - Flip image
+- `manipulate(uri, action, options?)` - Perform multiple manipulations
+- `compress(uri, quality?)` - Compress image
+- `resizeToFit(uri, maxWidth, maxHeight, options?)` - Resize to fit within max dimensions
+- `createThumbnail(uri, size?, options?)` - Create thumbnail
+- `cropToSquare(uri, width, height, options?)` - Crop to square (centered)
+- `convertFormat(uri, format, quality?)` - Convert image format
+- `saveImage(uri, filename?)` - Save image to device
+- `isProcessing` - Processing state
+- `error` - Error message
+
+### `useImageGallery()`
+
+React hook for image gallery and viewer.
+
+**Returns:**
+- `visible` - Gallery visibility state
+- `currentIndex` - Current image index
+- `images` - Image viewer items
+- `open(images, startIndex?, options?)` - Open gallery
+- `close()` - Close gallery
+- `setIndex(index)` - Set current image index
+- `options` - Gallery options
+
+### `ImageService`
+
+Service class for image manipulation.
+
+**Methods:**
+- `resize(uri, width?, height?, options?)` - Resize image
+- `crop(uri, cropArea, options?)` - Crop image
+- `rotate(uri, degrees, options?)` - Rotate image
+- `flip(uri, flip, options?)` - Flip image
+- `manipulate(uri, action, options?)` - Perform multiple manipulations
+- `compress(uri, quality?)` - Compress image
+- `resizeToFit(uri, maxWidth, maxHeight, options?)` - Resize to fit
+- `createThumbnail(uri, size?, options?)` - Create thumbnail
+- `cropToSquare(uri, width, height, options?)` - Crop to square
+- `convertFormat(uri, format, quality?)` - Convert format
+- `saveImage(uri, filename?)` - Save image
+
+### `ImageViewerService`
+
+Service class for image viewer configuration.
+
+**Methods:**
+- `prepareImages(uris)` - Prepare images for viewer
+- `prepareImagesWithMetadata(items)` - Prepare images with metadata
+- `createViewerConfig(images, startIndex?, onDismiss?, options?)` - Create viewer config
+- `getDefaultOptions()` - Get default gallery options
+
+### `ImageUtils`
+
+Utility class for image operations.
+
+**Methods:**
+- `getOrientation(width, height)` - Get image orientation
+- `getAspectRatio(width, height)` - Calculate aspect ratio
+- `fitToSize(width, height, maxWidth, maxHeight)` - Fit to size
+- `getThumbnailSize(width, height, thumbnailSize?)` - Get thumbnail size
+- `isValidImageUri(uri)` - Validate image URI
+- `getFormatFromUri(uri)` - Get format from URI
+- `getExtensionFromFormat(format)` - Get extension from format
+- `getSquareCrop(width, height)` - Get square crop dimensions
+- `formatFileSize(bytes)` - Format file size
+- `needsCompression(bytes, maxSizeMB?)` - Check if needs compression
+
+## Types
+
+- `ImageFormat` - JPEG | PNG | WEBP
+- `ImageOrientation` - PORTRAIT | LANDSCAPE | SQUARE
+- `SaveFormat` - 'jpeg' | 'png' | 'webp'
+- `ImageManipulateAction` - Image manipulation action
+- `ImageSaveOptions` - Image save options
+- `ImageManipulationResult` - Manipulation result
+- `ImageViewerItem` - Image viewer item
+- `ImageGalleryOptions` - Gallery options
+
+## Constants
+
+- `IMAGE_CONSTANTS` - Image constants (MAX_WIDTH, MAX_HEIGHT, DEFAULT_QUALITY, THUMBNAIL_SIZE, etc.)
+
+## Important Notes
+
+⚠️ **File Operations**: This package uses `@umituz/react-native-filesystem` for file operations. Make sure to install it as a peer dependency.
+
+⚠️ **Image Viewer**: This package provides hooks and services for `react-native-image-viewing`. You need to render the `ImageViewing` component yourself in your app.
+
+## License
+
+MIT
+
+## Author
+
+Ümit UZ <umit@umituz.com>
+

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@umituz/react-native-image",
+  "version": "1.1.0",
+  "description": "Image manipulation and viewing for React Native apps - resize, crop, rotate, flip, compress, gallery viewer",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit",
+    "version:minor": "npm version minor -m 'chore: release v%s'",
+    "version:major": "npm version major -m 'chore: release v%s'"
+  },
+  "keywords": [
+    "react-native",
+    "image",
+    "manipulation",
+    "resize",
+    "crop",
+    "rotate",
+    "flip",
+    "compress",
+    "gallery",
+    "viewer"
+  ],
+  "author": "Ümit UZ <umit@umituz.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umituz/react-native-image"
+  },
+  "peerDependencies": {
+    "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"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.45",
+    "@types/react-native": "^0.73.0",
+    "react": "^18.2.0",
+    "react-native": "^0.74.0",
+    "typescript": "^5.3.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ]
+}

package/src/domain/entities/Image.ts

@@ -0,0 +1,273 @@
+/**
+ * Image Domain - Core Entities
+ *
+ * This file defines core types and interfaces for image manipulation and viewing.
+ * Handles image operations using expo-image-manipulator and react-native-image-viewing.
+ */
+
+/**
+ * Image format types
+ */
+export enum ImageFormat {
+  JPEG = 'jpeg',
+  PNG = 'png',
+  WEBP = 'webp',
+}
+
+/**
+ * Image save format for expo-image-manipulator
+ */
+export type SaveFormat = 'jpeg' | 'png' | 'webp';
+
+/**
+ * Image manipulation action types
+ */
+export interface ImageManipulateAction {
+  resize?: { width?: number; height?: number };
+  crop?: { originX: number; originY: number; width: number; height: number };
+  rotate?: number; // degrees
+  flip?: { vertical?: boolean; horizontal?: boolean };
+}
+
+/**
+ * Image save options
+ */
+export interface ImageSaveOptions {
+  format?: SaveFormat;
+  compress?: number; // 0-1
+  base64?: boolean;
+}
+
+/**
+ * Image manipulation result
+ */
+export interface ImageManipulationResult {
+  uri: string;
+  width: number;
+  height: number;
+  base64?: string;
+}
+
+/**
+ * Image metadata
+ */
+export interface ImageMetadata {
+  uri: string;
+  width: number;
+  height: number;
+  format?: ImageFormat;
+  size?: number; // bytes
+  orientation?: ImageOrientation;
+}
+
+/**
+ * Image orientation
+ */
+export enum ImageOrientation {
+  PORTRAIT = 'portrait',
+  LANDSCAPE = 'landscape',
+  SQUARE = 'square',
+}
+
+/**
+ * Image viewer item
+ */
+export interface ImageViewerItem {
+  uri: string;
+  title?: string;
+  description?: string;
+  width?: number;
+  height?: number;
+}
+
+/**
+ * Image gallery options
+ */
+export interface ImageGalleryOptions {
+  index?: number; // Starting index
+  backgroundColor?: string;
+  swipeToCloseEnabled?: boolean;
+  doubleTapToZoomEnabled?: boolean;
+  onDismiss?: () => void;
+  onIndexChange?: (index: number) => void;
+}
+
+/**
+ * Image operation result
+ */
+export interface ImageOperationResult {
+  success: boolean;
+  uri?: string;
+  error?: string;
+  width?: number;
+  height?: number;
+}
+
+/**
+ * Image constants
+ */
+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;
+
+/**
+ * Image utilities
+ */
+export class ImageUtils {
+  /**
+   * Get image orientation from dimensions
+   */
+  static getOrientation(width: number, height: number): ImageOrientation {
+    if (width > height) return ImageOrientation.LANDSCAPE;
+    if (height > width) return ImageOrientation.PORTRAIT;
+    return ImageOrientation.SQUARE;
+  }
+
+  /**
+   * Calculate aspect ratio
+   */
+  static getAspectRatio(width: number, height: number): number {
+    return width / height;
+  }
+
+  /**
+   * Calculate dimensions to fit within max size while preserving aspect ratio
+   */
+  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),
+    };
+  }
+
+  /**
+   * Calculate thumbnail dimensions (maintains aspect ratio)
+   */
+  static getThumbnailSize(
+    width: number,
+    height: number,
+    thumbnailSize: number = IMAGE_CONSTANTS.THUMBNAIL_SIZE
+  ): { width: number; height: number } {
+    return ImageUtils.fitToSize(width, height, thumbnailSize, thumbnailSize);
+  }
+
+  /**
+   * Validate image URI
+   */
+  static isValidImageUri(uri: string): boolean {
+    if (!uri) return false;
+
+    // Check if it's a valid URI format
+    return (
+      uri.startsWith('file://') ||
+      uri.startsWith('content://') ||
+      uri.startsWith('http://') ||
+      uri.startsWith('https://') ||
+      uri.startsWith('data:image/')
+    );
+  }
+
+  /**
+   * Get image format from URI
+   */
+  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;
+  }
+
+  /**
+   * Get file extension from format
+   */
+  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';
+    }
+  }
+
+  /**
+   * Calculate crop dimensions for square crop (centered)
+   */
+  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),
+    };
+  }
+
+  /**
+   * Format file size to human-readable string
+   */
+  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`;
+  }
+
+  /**
+   * Check if image needs compression based on size
+   */
+  static needsCompression(bytes: number, maxSizeMB: number = 2): boolean {
+    const maxBytes = maxSizeMB * 1024 * 1024;
+    return bytes > maxBytes;
+  }
+}
+

package/src/index.ts

@@ -0,0 +1,55 @@
+/**
+ * @umituz/react-native-image - Public API
+ *
+ * Image manipulation and viewing for React Native apps
+ * Resize, crop, rotate, flip, compress, gallery viewer
+ *
+ * Usage:
+ *   import { useImage, useImageGallery, ImageService, ImageUtils } from '@umituz/react-native-image';
+ */
+
+// =============================================================================
+// DOMAIN LAYER - Entities
+// =============================================================================
+
+export type {
+  ImageManipulateAction,
+  ImageSaveOptions,
+  ImageManipulationResult,
+  ImageMetadata,
+  ImageViewerItem,
+  ImageGalleryOptions,
+  ImageOperationResult,
+  SaveFormat,
+} from './domain/entities/Image';
+
+export {
+  ImageFormat,
+  ImageOrientation,
+  IMAGE_CONSTANTS,
+  ImageUtils,
+} from './domain/entities/Image';
+
+// =============================================================================
+// INFRASTRUCTURE LAYER - Services
+// =============================================================================
+
+export { ImageService } from './infrastructure/services/ImageService';
+export {
+  ImageViewerService,
+  type ImageViewerConfig,
+} from './infrastructure/services/ImageViewerService';
+
+// =============================================================================
+// PRESENTATION LAYER - Hooks
+// =============================================================================
+
+export {
+  useImage,
+} from './presentation/hooks/useImage';
+
+export {
+  useImageGallery,
+  type UseImageGalleryReturn,
+} from './presentation/hooks/useImageGallery';
+