react-native-view-shot

Capture a React Native view to an image.

Install

yarn add react-native-view-shot

# In Expo

expo install react-native-view-shot

Make sure react-native-view-shot is correctly linked in Xcode (might require a manual installation, refer to React Native doc).

Before React Native 0.60.x you would have to:

react-native link react-native-view-shot

Since 0.60.x, autolink should just work, on iOS, you'll need to ensure the CocoaPods are installed with:

npx pod-install

High Level API

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

function ExampleCaptureOnMountManually {
  const ref = useRef();

  useEffect(() => {
    // on mount
    ref.current.capture().then(uri => {
      console.log("do something with ", uri);
    });
  }, []);

  return (
    
      
    
  );
}

// alternative
function ExampleCaptureOnMountSimpler {
  const ref = useRef();

  const onCapture = useCallback(uri => {
    console.log("do something with ", uri);
  }, []);

  return (
    
      
    
  );
}

// waiting an image

function ExampleWaitingCapture {
  const ref = useRef();

  const onImageLoad = useCallback(() => {
    ref.current.capture().then(uri => {
      console.log("do something with ", uri);
    })
  }, []);

  return (
    
      
      <img>
    
  );
}

// capture ScrollView content
// NB: you may need to go the "imperative way" to use snapshotContentContainer with the scrollview ref instead
function ExampleCaptureOnMountSimpler {
  const ref = useRef();

  const onCapture = useCallback(uri =&gt; {
    console.log("do something with ", uri);
  }, []);

  return (
    
      
        
      
    
  );
}

Props:

• children: the actual content to rasterize.
• options: the same options as in captureRef method.
• captureMode (string):
  • if not defined (default). the capture is not automatic and you need to use the ref and call capture() yourself.
  • "mount". Capture the view once at mount. (It is important to understand image loading won't be waited, in such case you want to use "none" with viewShotRef.capture() after Image#onLoad.)
  • "continuous" EXPERIMENTAL, this will capture A LOT of images continuously. For very specific use-cases.
  • "update" EXPERIMENTAL, this will capture images each time React redraw (on did update). For very specific use-cases.
• onCapture: when a captureMode is defined, this callback will be called with the capture result.
• onCaptureFailure: when a captureMode is defined, this callback will be called when a capture fails.

captureRef(view, options) lower level imperative API

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

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

Returns a Promise of the image URI.

• view is a reference to a React Native component.
• options may include:
  • fileName (string): (Android only) the file name of the file. Must be at least 3 characters long.
  • 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 or webm (Android). Defaults to png.
  • quality (number): the quality. 0.0 - 1.0 (default). (only available on lossy formats like jpg)
  • result (string), the method you want to use to save the snapshot, one of:
    • "tmpfile" (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.
  • snapshotContentContainer (bool): if true and when view is a ScrollView, the "content container" height will be evaluated instead of the container height.
  • [iOS] useRenderInContext (bool): change the iOS snapshot strategy to use method renderInContext instead of drawViewHierarchyInRect which may help for some use cases.

releaseCapture(uri)

This method release a previously captured uri. For tmpfile it will clean them out, for other result types it just won't do anything.

NB: the tmpfile captures are automatically cleaned out after the app closes, so you might not have to worry about this unless advanced usecases. The ViewShot component will use it each time you capture more than once (useful for continuous capture to not leak files).

captureScreen() Android and iOS Only

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

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

This method will capture the contents of the currently displayed screen as a native hardware screenshot. It does not require a ref input, as it does not work at the view level. This means that ScrollViews will not be captured in their entirety - only the portions currently visible to the user.

Returns a Promise of the image URI.

• options: the same options as in captureRef method.

Advanced Examples

Checkout react-native-view-shot-example

Interoperability Table

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

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

>

1. Only supported by wrapping a `