Expo ImageManipulatorA library that provides an API for image manipulation on the local file system.
expo-image-manipulator provides an API to modify images stored on the local file system.
Platform Compatibility
| Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
|---|---|---|---|---|
Installation
- npx expo install expo-image-manipulatorIf 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.
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>
);
}
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)
| Name | Type | Description |
|---|---|---|
| uri | string | 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
Promise which fulfils with ImageResult object.
Types
Action
Literal Type: multiple types
Acceptable values are: ActionResize | ActionRotate | ActionFlip | ActionCrop | ActionExtent
ActionCrop
| Name | Type | Description |
|---|---|---|
| crop | {
height: number,
originX: number,
originY: number,
width: number
} | Fields specify top-left corner and dimensions of a crop rectangle. |
ActionExtent
| Name | Type | Description |
|---|---|---|
| extent | {
backgroundColor: string | null,
height: number,
originX: number,
originY: number,
width: number
} | Only for: Web Set the image size and offset. If the image is enlarged, unfilled areas are set to the |
ActionFlip
| Name | Type | Description |
|---|---|---|
| flip | FlipType | An 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
| Name | Type | Description |
|---|---|---|
| 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
| Name | Type | Description |
|---|---|---|
| rotate | number | Degrees to rotate the image. Rotation is clockwise when the value is positive and counter-clockwise when negative. |
ImageResult
| Name | Type | Description |
|---|---|---|
| base64 (optional) | string | It is included if the |
| height | number | Height of the image or video. |
| uri | string | An URI to the modified image (usable as the source for an |
| width | number | Width of the image or video. |
SaveOptions
A map defining how modified image should be saved.
| Name | Type | Description |
|---|---|---|
| base64 (optional) | boolean | Whether to also include the image data in Base64 format. |
| compress (optional) | number | A value in range |
| format (optional) | SaveFormat | Specifies what type of compression should be used and what is the result file extension.
|
Enums
FlipType
FlipType Values
Horizontal
FlipType.Horizontal ＝ "horizontal"Vertical
FlipType.Vertical ＝ "vertical"