or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

context-management.mdindex.mdlegacy-api.mdoutput.mdtransformations.md
tile.json

index.mddocs/

Expo Image Manipulator

Expo Image Manipulator provides comprehensive image manipulation capabilities for React Native and Expo applications, enabling developers to perform essential image transformations including resizing, cropping, rotating, and flipping operations on local file system images. It offers both a legacy async API and a modern contextual object-oriented API for flexible integration patterns.

Package Information

  • Package Name: expo-image-manipulator
  • Package Type: npm
  • Language: TypeScript
  • Installation: npx expo install expo-image-manipulator

Core Imports

import { ImageManipulator, manipulateAsync, useImageManipulator, SaveFormat, FlipType } from "expo-image-manipulator";
import type { ImageResult, SaveOptions, ImageRef, ImageManipulatorContext } from "expo-image-manipulator";

For CommonJS:

const { ImageManipulator, manipulateAsync, useImageManipulator, SaveFormat, FlipType } = require("expo-image-manipulator");

Basic Usage

Modern Contextual API (Recommended)

import { ImageManipulator, SaveFormat } from "expo-image-manipulator";

// Create manipulation context and chain operations
const context = ImageManipulator.manipulate('file:///path/to/image.jpg');
const manipulated = await context
  .resize({ width: 300 })
  .crop({ originX: 50, originY: 50, width: 200, height: 200 })
  .rotate(90)
  .renderAsync();

// Save the result
const result = await manipulated.saveAsync({
  format: SaveFormat.PNG,
  compress: 0.8,
  base64: true
});

console.log(`Saved to: ${result.uri}`);
console.log(`Size: ${result.width}x${result.height}`);

// Clean up memory
context.release();
manipulated.release();

React Hook Usage

import { useImageManipulator, SaveFormat, FlipType } from "expo-image-manipulator";

function ImageEditor() {
  const context = useImageManipulator('file:///path/to/image.jpg');
  
  const processImage = async () => {
    const image = await context
      .resize({ width: 400 })
      .flip(FlipType.Horizontal)
      .renderAsync();
    
    const result = await image.saveAsync({ format: SaveFormat.JPEG });
    return result;
  };
  
  // Context is automatically cleaned up when component unmounts
}

Legacy API (Deprecated)

import { manipulateAsync, FlipType, SaveFormat } from "expo-image-manipulator";

const result = await manipulateAsync(
  'file:///path/to/image.jpg',
  [
    { resize: { width: 300 } },
    { rotate: 90 },
    { flip: FlipType.Horizontal },
    { crop: { originX: 10, originY: 10, width: 200, height: 200 } }
  ],
  {
    format: SaveFormat.PNG,
    compress: 0.7,
    base64: false
  }
);

Architecture

Expo Image Manipulator is built around several key components:

  • ImageManipulator Class: Main entry point providing the manipulate() method to create manipulation contexts
  • ImageManipulatorContext: Chainable context object that queues transformation operations for lazy execution
  • ImageRef: Reference to native image instances with properties and save capabilities
  • React Hook Integration: useImageManipulator hook with automatic memory management for React components
  • Legacy API: Backward-compatible manipulateAsync function for simple one-shot operations
  • Native Module Bridge: Platform-specific implementations (iOS, Android, Web) accessed through unified API

Capabilities

Image Context Management

Modern contextual API for creating and managing image manipulation contexts with chainable operations and manual memory management.

class ImageManipulator {
  static manipulate(source: string | SharedRef<'image'>): ImageManipulatorContext;
}

function useImageManipulator(source: string | SharedRef<'image'>): ImageManipulatorContext;

Context Management

Image Transformations

Core transformation operations including resize, rotate, flip, crop, and extent modifications. All operations support method chaining for complex transformation pipelines.

class ImageManipulatorContext {
  resize(size: { width?: number | null; height?: number | null }): ImageManipulatorContext;
  rotate(degrees: number): ImageManipulatorContext;
  flip(flipType: FlipType): ImageManipulatorContext;
  crop(rect: { originX: number; originY: number; width: number; height: number }): ImageManipulatorContext;
  extent(options: { backgroundColor?: string | null; originX?: number; originY?: number; width: number; height: number }): ImageManipulatorContext;
  reset(): ImageManipulatorContext;
  renderAsync(): Promise<ImageRef>;
}

Image Transformations

Image Output and Saving

Image output management with format options, compression settings, and base64 encoding capabilities.

class ImageRef {
  readonly width: number;
  readonly height: number;
  saveAsync(options?: SaveOptions): Promise<ImageResult>;
}

interface SaveOptions {
  base64?: boolean;
  compress?: number;
  format?: SaveFormat;
}

interface ImageResult {
  uri: string;
  width: number;
  height: number;
  base64?: string;
}

Image Output

Legacy API (Deprecated)

Backward-compatible async function for simple image manipulation operations. Deprecated as of SDK 52 in favor of the contextual API.

function manipulateAsync(
  uri: string,
  actions?: Action[],
  saveOptions?: SaveOptions
): Promise<ImageResult>;

type Action = ActionResize | ActionRotate | ActionFlip | ActionCrop | ActionExtent;

Legacy API

Types and Enums

enum SaveFormat {
  JPEG = 'jpeg',
  PNG = 'png',
  WEBP = 'webp'
}

enum FlipType {
  Vertical = 'vertical',
  Horizontal = 'horizontal'
}