captureRef
will essentially screenshot that view and return an image for you. This is very useful for things like signature pads, where the user draws something and then you want to save an image from it.Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
expo install react-native-view-shot
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
import { captureRef } from 'react-native-view-shot';
ref
or reactTag
(also known as node handle) for the view to snapshot."png" | "jpg" | "webm"
, defaults to "png"
, "webm"
supported only on Android.1
'tmpfile'
-- (default) Return a temporary file uri.
- 'base64'
-- base64 encoded image.
- 'data-uri'
-- base64 encoded image with data-uri prefix.PixelRatio
into account. When you work with pixel values in a UI, most of the time those units are "logical pixels" or "device-independent pixels". With images like PNG files, you often work with "physical pixels". You can get the PixelRatio
of the device using the React Native API: PixelRatio.get()
1080x1080
, you would do something like this:const targetPixelCount = 1080; // If you want full HD pictures const pixelRatio = PixelRatio.get(); // The pixel ratio of the device // pixels * pixelratio = targetPixelCount, so pixels = targetPixelCount / pixelRatio const pixels = targetPixelCount / pixelRatio; const result = await captureRef(this.imageContainer, { result: 'tmpfile', height: pixels, width: pixels, quality: 1, format: 'png', });