react-native-view-shot/README.md

react-native-view-shot

Snapshot a React Native view and save it to an image.

For React Native version between 0.30.x and 0.39.x, you should use react-native-view-shot@1.5.1.

Usage

import { takeSnapshot } from "react-native-view-shot";

takeSnapshot(viewRef, {
  format: "jpeg",
  quality: 0.8
})
.then(
  uri => console.log("Image saved to", uri),
  error => console.error("Oops, snapshot failed", error)
);

Example

Checkout react-native-view-shot-example

Full API

takeSnapshot(view, options)

Returns a Promise of the image URI.

• view is a reference to a React Native component.
• options may include:
  • width / height (number): the width and height of the final image (resized from the View bound. don’t provide it if you want the original pixel size).
  • format (string): either png or jpg/jpeg or webm (Android). Defaults to png.
  • quality (number): the quality. 0.0 - 1.0 (default). (only available on lossy formats like jpeg)
  • result (string), the method you want to use to save the snapshot, one of:
  • "file" (default): save to a temporary file (that will only exist for as long as the app is running).
  • "base64": encode as base64 and returns the raw string. Use only with small images as this may result of lags (the string is sent over the bridge). N.B. This is not a data uri, use data-uri instead.
  • "data-uri": same as base64 but also includes the Data URI scheme header.
  • path (string): The absolute path where the file get generated. See dirs constants for more information.
  • snapshotContentContainer (bool): if true and when view is a ScrollView, the “content container” height will be evaluated instead of the container height.

dirs constants

By default, takeSnapshot will export in a temporary folder and the snapshot file will be deleted as soon as the app leaves. If you use the path option, you make the snapshot file more permanent and at a specific file location. To make file location more ‘universal’, the library exports some classic directory constants:

import { takeSnapshot, dirs } from "react-native-view-shot";
// cross platform dirs:
const { CacheDir, DocumentDir, MainBundleDir, MovieDir, MusicDir, PictureDir } = dirs;
// only available Android:
const { DCIMDir, DownloadDir, RingtoneDir, SDCardDir } = dirs;

takeSnapshot(viewRef, { path: PictureDir+"/foo.png" })
.then(
  uri => console.log("Image saved to", uri),
  error => console.error("Oops, snapshot failed", error)
);

Supported views

Model tested: iPhone 6 (iOS), Nexus 5 (Android).

System	iOS	Android
View,Text,Image,..	YES	YES
WebView	YES	YES1
gl-react v2	YES	NO2
react-native-video	NO	NO
react-native-maps	YES	NO

1. Only supported by wrapping a <View collapsable={false}> parent and snapshotting it.
2. It returns an empty image (not a failure Promise).

Caveats

Snapshots are not guaranteed to be pixel perfect. It also depends on the platform. Here is some difference we have noticed and how to workaround.

• Support of special components like Video / GL views is not guaranteed to work. In case of failure, the takeSnapshot promise gets rejected (the library won’t crash).
• It’s preferable to use a background color on the view you rasterize to avoid transparent pixels and potential weirdness that some border appear around texts.

specific to Android implementation

• you need to make sure collapsable is set to false if you want to snapshot a View. Some content might even need to be wrapped into such <View collapsable={false}> to actually make them snapshotable! Otherwise that view won’t reflect any UI View. (found by @gaguirre)
• if you implement a third party library and want to get back a File, you must first resolve the Uri. (the file result returns an Uri so it’s consistent with iOS and can be given to APIs like Image.getSize)

Getting started

npm install --save react-native-view-shot

Mostly automatic installation

react-native link react-native-view-shot

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-view-shot and add RNViewShot.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNViewShot.a to your project’s Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java
   • Add import fr.greweb.reactnativeviewshot.RNViewShotPackage; to the imports at the top of the file
   • Add new RNViewShotPackage() to the list returned by the getPackages() method
2. Append the following lines to android/settings.gradle: include ':react-native-view-shot' project(':react-native-view-shot').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-view-shot/android')
3. Insert the following lines inside the dependencies block in android/app/build.gradle: compile project(':react-native-view-shot')

Windows

Stay tuned, https://github.com/gre/react-native-view-shot/pull/45 will be merged soon!

Thanks

• To initial iOS work done by @jsierles in https://github.com/jsierles/react-native-view-snapshot
• To React Native implementation of takeSnapshot in iOS by @nicklockwood