This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 51).
A 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.
-
npx expo install expo-image-manipulator
If you are installing this in an existing React Native app (bare workflow), start by installing expo
in your project. Then, follow the additional instructions as mentioned by library's README under "Installation in bare React Native projects" section.
This will first rotate the image 90 degrees clockwise, then flip the rotated image vertically and save it as a PNG.
import { 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',
},
});
import * as ImageManipulator from 'expo-image-manipulator';
Context
Type: Class extends SharedObject
A context for an image manipulation. It provides synchronous, chainable functions that schedule transformations on the original image to the background thread.
Use an asynchronous renderAsync
to await for all transformations to finish and access the final image.
Context Methods
crop(rect)
Name | Type | Description |
---|---|---|
rect | {
height: number,
originX: number,
originY: number,
width: number
} | Fields specify top-left corner and dimensions of a crop rectangle. |
Crops the image to the given rectangle's origin and size.
extent(options)
Name | Type |
---|---|
options | {
backgroundColor: null | string,
height: number,
originX: number,
originY: number,
width: number
} |
Set the image size and offset. If the image is enlarged, unfilled areas are set to the backgroundColor
.
To position the image, use originX
and originY
.
flip(flipType)
Name | Type | Description |
---|---|---|
flipType | 'vertical' | 'horizontal' | 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. |
Flips the image vertically or horizontally.
renderAsync()
Awaits for all manipulation tasks to finish and resolves with a reference to the resulted native image.
resize(size)
Name | Type | Description |
---|---|---|
size | {
height: null | number,
width: null | number
} | Values correspond to the result image dimensions. If you specify only one value, the other will be calculated automatically to preserve image ratio. |
Resizes the image to the given size.
rotate(degrees)
Name | Type | Description |
---|---|---|
degrees | number | Degrees to rotate the image. Rotation is clockwise when the value is positive and counter-clockwise when negative. |
Rotates the image by the given number of degrees.
ImageManipulator
Type: Class extends _default
ImageManipulator Properties
ImageManipulator Methods
manipulate(uri)
Name | Type |
---|---|
uri | string |
Loads an image from the given URI and creates a new image manipulation context.
ImageRef
Type: Class extends SharedObject
A reference to a native instance of the image.
ImageRef Properties
ImageRef Methods
saveAsync(options)
Name | Type | Description |
---|---|---|
options (optional) | SaveOptions | A map defining how modified image should be saved. |
Saves the image to the file system in the cache directory.
Deprecated It has been replaced by the new, contextual and object-oriented API. Use
ImageManipulator.manipulate
oruseImageManipulator
instead.
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.
Promise which fulfils with ImageResult
object.
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.
|
Horizontal
FlipType.Horizontal = "horizontal"
Vertical
FlipType.Vertical = "vertical"