Image manipulation context management for creating, using, and cleaning up image manipulation contexts with the modern API.
Main entry point class that provides the static manipulate() method for creating image manipulation contexts.
/**
* Main image manipulator class providing context creation
*/
class ImageManipulator {
/**
* Creates a new image manipulation context for the given source
* @param source - Image URI (file://, data:, or asset URI)
* @returns ImageManipulatorContext for chaining operations
*/
static manipulate(source: string): ImageManipulatorContext;
}Usage Examples:
import { ImageManipulator } from "expo-image-manipulator";
// Create context from file URI
const context1 = ImageManipulator.manipulate('file:///path/to/image.jpg');
// Create context from asset
const context2 = ImageManipulator.manipulate('asset:///images/photo.png');
// Create context from base64 data URI
const context3 = ImageManipulator.manipulate('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ...');
// Or from another data URI format
const context4 = ImageManipulator.manipulate('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...');React hook that creates an image manipulation context with automatic cleanup when the component unmounts or the source changes.
/**
* React hook for image manipulation with automatic memory management
* @param source - Image URI (file://, data:, or asset URI)
* @returns ImageManipulatorContext that will be automatically cleaned up
*/
function useImageManipulator(source: string): ImageManipulatorContext;Usage Examples:
import { useImageManipulator, SaveFormat } from "expo-image-manipulator";
import { useState } from "react";
function ImageProcessor({ imageUri }: { imageUri: string }) {
const [result, setResult] = useState<string | null>(null);
const context = useImageManipulator(imageUri);
const processImage = async () => {
try {
const image = await context
.resize({ width: 300 })
.rotate(90)
.renderAsync();
const processed = await image.saveAsync({
format: SaveFormat.JPEG,
compress: 0.8
});
setResult(processed.uri);
// Clean up the rendered image (context cleanup is automatic)
image.release();
} catch (error) {
console.error('Image processing failed:', error);
}
};
// The context will be automatically cleaned up when:
// 1. Component unmounts
// 2. imageUri changes (new context will be created)
return (
<div>
<button onClick={processImage}>Process Image</button>
{result && <img src={result} alt="Processed" />}
</div>
);
}When using the manual ImageManipulator.manipulate() method, you must call release() on both the context and any rendered ImageRef objects to free native memory.
// Manual memory management (required with ImageManipulator.manipulate)
const context = ImageManipulator.manipulate(imageUri);
const image = await context.resize({ width: 200 }).renderAsync();
const result = await image.saveAsync();
// Required cleanup
context.release();
image.release();// Automatic memory management (with useImageManipulator hook)
function MyComponent({ imageUri }: { imageUri: string }) {
const context = useImageManipulator(imageUri);
const processImage = async () => {
const image = await context.resize({ width: 200 }).renderAsync();
const result = await image.saveAsync();
// Only need to clean up the rendered image
image.release();
// Context cleanup is automatic
};
// No need to manually release context
}