expo-image-manipulator
provides an API to modify images stored on the local file system.Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
→
expo install expo-image-manipulator
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
import React, { useState, useEffect } from 'react'; import { Button, View, Image } from 'react-native'; import { Asset } from 'expo-asset'; import * as ImageManipulator 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 ImageManipulator.manipulateAsync( image.localUri || image.uri, [{ rotate: 90 }, { flip: ImageManipulator.FlipType.Vertical }], { compress: 1, format: ImageManipulator.SaveFormat.PNG } ); setImage(manipResult); }; const _renderImage = () => { return ( <View style={{ marginVertical: 20, alignItems: 'center', justifyContent: 'center', }}> <Image source={{ uri: image.localUri || image.uri }} style={{ width: 300, height: 300, resizeMode: 'contain' }} /> </View> ); }; return ( <View style={{ flex: 1, justifyContent: 'center' }}> {ready && image && _renderImage()} <Button title="Rotate and Flip" onPress={_rotate90andFlip} /> </View> ); }
import * as ImageManipulator from 'expo-image-manipulator';
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.{ width, height }
. Values correspond to the result image dimensions. If you specify only one value, the other will be calculated automatically to preserve image ratio.ImageManipulator.FlipType.{Vertical, Horizontal}
. Only one flip per transformation is available. If you want to flip according to both axes then provide two separate transformations.{ originX, originY, width, height }
. Fields specify top-left corner and dimensions of a crop rectangle.0.0
- 1.0
specifying compression level of the result image. 1
means no compression (highest quality) and 0
the highest compression (lowest quality).ImageManipulator.SaveFormat.{JPEG, PNG}
. Specifies 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
.{ uri, width, height }
where uri
is a URI to the modified image (useable as the source for an Image
/Video
element), width, height
specify the dimensions of the image. It can contain also base64
- it is included if the base64
saveOption 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').