@tuofeng/react-native-view-shot

1.5.5 • Public • Published

react-native-view-shot

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

Usage

import RNViewShot from "react-native-view-shot";

RNViewShot.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

RNViewShot.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 image to capture.
  • 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.
  • filename (string): the name of the generated file if any (Android only). Defaults to ReactNative_snapshot_image_${timestamp}.

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 remains untested.
  • 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. Otherwise that view won't reflect any UI View. (found by @gaguirre)
  • if you want to share out the screenshoted file, you will have to copy it somewhere first so it's accessible to an Intent, see comment: https://github.com/gre/react-native-view-shot/issues/11#issuecomment-251080804 .
  • 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 you can give it to Image.getSize for instance.

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 LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-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 PhasesLink 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
  1. 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')
    
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
     compile project(':react-native-view-shot')
    

Windows

No support yet. Feel free to PR.

Thanks

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.5.5
    0
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 1.5.5
    0
  • 1.5.4
    0
  • 1.5.3
    0

Package Sidebar

Install

npm i @tuofeng/react-native-view-shot

Weekly Downloads

0

Version

1.5.5

License

MIT

Unpacked Size

42 kB

Total Files

17

Last publish

Collaborators

  • iwater