A library that allows you to capture a React Native view and save it as an image.
GitHub
npm
This library is listed in the Expo SDK reference because it is included in Expo Go. You may use any library of your choice with development builds.
Given a view, 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.
If you're interested in taking snapshots from the GLView, we recommend you use GLView's takeSnapshotAsync instead.
-
npx expo install react-native-view-shot
If you are installing this in an existing React Native app, start by installing expo
in your project. Then, follow the additional instructions provided by the library's README or documentation.
import { captureRef } from 'react-native-view-shot';
captureRef(view, options)
Snapshots the given view.
view (number|ReactElement) -- The ref
or reactTag
(also known as node handle) for the view to snapshot.
options (object) --
An optional map of optional options
"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.An image of the format specified in the options parameter.
Remember to take the device 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()
For example, to save a 'FullHD' picture of 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',
});