Guides
Plan-enterprise-icon
Expo Application Services
API Reference

ImageManipulator

expo-image-manipulator provides an API to modify images stored on the local file system.

Platform Compatibility

Android DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb
Status-success-iconStatus-success-iconStatus-success-iconStatus-success-iconStatus-success-icon

Installation

Terminal
→ npx expo install expo-image-manipulator

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.

Usage

This will first rotate the image 90 degrees clockwise, then flip the rotated image vertically and save it as a PNG.
Basic ImageManipulator usage
import React, { useState, useEffect } from 'react';
import { Button, Image, StyleSheet, View } from 'react-native';
import { Asset } from 'expo-asset';
import { manipulateAsync, FlipType, SaveFormat } from 'expo-image-manipulator';

export default function App() {
  const [ready, setReady] = useState(false);
  const [image, setImage] = useState(null);

  useEffect(() => {
    (async () => {
      const image = Asset.fromModule(require('./assets/snack-icon.png'));
      await image.downloadAsync();
      setImage(image);
      setReady(true);
    })();
  }, []);

  const _rotate90andFlip = async () => {
    const manipResult = await manipulateAsync(
      image.localUri || image.uri,
      [{ rotate: 90 }, { flip: FlipType.Vertical }],
      { compress: 1, format: SaveFormat.PNG }
    );
    setImage(manipResult);
  };

  const _renderImage = () => (
    <View style={styles.imageContainer}>
      <Image source={{ uri: image.localUri || image.uri }} style={styles.image} />
    </View>
  );

  return (
    <View style={styles.container}>
      {ready && image && _renderImage()}
      <Button title="Rotate and Flip" onPress={_rotate90andFlip} />
    </View>
  );
}

%%placeholder-start%%const styles = StyleSheet.create({ ... }); %%placeholder-end%%const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  imageContainer: {
    marginVertical: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: 300,
    height: 300,
    resizeMode: 'contain',
  },
});

API

import * as ImageManipulator from 'expo-image-manipulator';

Methods

ImageManipulator.manipulateAsync(uri, actions, saveOptions)

NameTypeDescription
uristring

URI of the file to manipulate. Should be on the local file system or a base64 data URI.

actions
(optional)
Action[]

An array of objects representing manipulation options. Each object should have only one of the keys that corresponds to specific transformation.

Default: []
saveOptions
(optional)
SaveOptions

A map defining how modified image should be saved.

Default: {}

Manipulate the image provided via uri. Available modifications are rotating, flipping (mirroring), resizing and cropping. Each invocation results in a new file. With one invocation you can provide a set of actions to perform over the image. Overwriting the source file would not have an effect in displaying the result as images are cached.

Returns

  • Undo-iconPromise<ImageResult>

Promise which fulfils with ImageResult object.

Types

ActionCrop

NameTypeDescription
crop{ height: number, originX: number, originY: number, width: number }Fields specify top-left corner and dimensions of a crop rectangle.

ActionFlip

NameTypeDescription
flipFlipTypeAn axis on which image will be flipped. Only one flip per transformation is available. If you want to flip according to both axes then provide two separate transformations.

ActionResize

NameTypeDescription
resize{ height: number, width: number }Values correspond to the result image dimensions. If you specify only one value, the other will be calculated automatically to preserve image ratio.

ActionRotate

NameTypeDescription
rotatenumberDegrees to rotate the image. Rotation is clockwise when the value is positive and counter-clockwise when negative.

ImageResult

NameTypeDescription
base64
(optional)
stringIt is included if the base64 save option was truthy, and is a string containing the JPEG/PNG (depending on format) data of the image in Base64. Prepend that with 'data:image/xxx;base64,' to get a data URI, which you can use as the source for an Image element for example (where xxx is jpeg or png).
heightnumberHeight of the image or video.
uristringAn URI to the modified image (usable as the source for an Image or Video element).
widthnumberWidth of the image or video.

SaveOptions

A map defining how modified image should be saved.

NameTypeDescription
base64
(optional)
booleanWhether to also include the image data in Base64 format.
compress
(optional)
numberA value in range 0.0 - 1.0 specifying compression level of the result image. 1 means no compression (highest quality) and 0 the highest compression (lowest quality).
format
(optional)
SaveFormatSpecifies what type of compression should be used and what is the result file extension. SaveFormat.PNG compression is lossless but slower, SaveFormat.JPEG is faster but the image has visible artifacts. Defaults to SaveFormat.JPEG

Enums

FlipType

FlipType.Horizontal = "horizontal"
FlipType.Vertical = "vertical"

SaveFormat

SaveFormat.JPEG = "jpeg"
SaveFormat.PNG = "png"
Only for:
At-sign-iconWeb

SaveFormat.WEBP = "webp"
  • Message-iconAsk a question on the forums about ImageManipulator
  • Github-iconView open bug reports for ImageManipulator
  • Code-iconView source code for ImageManipulator
  • Build-iconView package in npm Registry
  • Edit-iconEdit this page

Was this doc helpful?