react-native-view-shot

Capture a React Native view to an image.

New Architecture Support

This library fully supports React Native's new architecture (Fabric + TurboModules) from version 4.0+.

Requirements:

• React Native >= 0.80.0
• Node.js >= 20.19.4

Both old and new architectures are supported for seamless migration.

Install

npm install react-native-view-shot

# or with Yarn
yarn add react-native-view-shot

# In Expo
npx expo install react-native-view-shot

Since React Native 0.60+, autolink handles the linking automatically. On iOS, install the CocoaPods dependencies:

npx pod-install

Web

On web (react-native-web, Expo web), captures are rendered with html2canvas-pro. It is an optional peer dependency, so it is not installed on native-only projects — add it yourself when targeting the web:

npm install html2canvas-pro

It is loaded lazily on the first capture. If it is missing, your bundler (webpack, Metro) fails at build time with Can't resolve 'html2canvas-pro'; in environments that resolve modules at runtime, captureRef rejects with an explicit install hint instead.

react-native is also an optional peer dependency, so a web-only project can install react-native-web without pulling react-native (alias react-native to react-native-web in your bundler as usual).

The library reads the __DEV__ global, as React Native code does. Metro and Expo define it for you; with a custom webpack/esbuild setup you must define it yourself, otherwise the page throws ReferenceError: __DEV__ is not defined:

// webpack.config.js
new webpack.DefinePlugin({ __DEV__: JSON.stringify(process.env.NODE_ENV !== "production") })
// esbuild
--define:__DEV__=false

High Level API

import React, {useCallback, useEffect, useRef} from "react";
import {Image, ScrollView, Text} from "react-native";
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);
      })
      .catch(console.error);
  }, []);

  return (
    <ViewShot
      ref={ref}
      options={{fileName: "Your-File-Name", format: "jpg", quality: 0.9}}
    >
      <Text>...Something to rasterize...</Text>
    </ViewShot>
  );
}

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

  return (
    <ViewShot onCapture={onCapture} captureMode="mount">
      <Text>...Something to rasterize...</Text>
    </ViewShot>
  );
}

// waiting an image

function ExampleWaitingCapture({imageSource}) {
  const ref = useRef();

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

  return (
    <ViewShot ref={ref}>
      <Text>...Something to rasterize...</Text>
      <Image source={imageSource} onLoad={onImageLoad} />
    </ViewShot>
  );
}

// capture ScrollView content
// NB: you may need to go the "imperative way" to use snapshotContentContainer with the scrollview ref instead
function ExampleCaptureScrollContent() {
  const onCapture = useCallback(uri => {
    console.log("do something with ", uri);
  }, []);

  return (
    <ScrollView>
      <ViewShot onCapture={onCapture} captureMode="mount">
        <Text>...The Scroll View Content Goes Here...</Text>
      </ViewShot>
    </ScrollView>
  );
}

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. Image loading is not awaited; omit captureMode and call viewShotRef.current.capture() after Image#onLoad when needed.
  • "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.
• onLayout: forwarded to the inner View.
• style: style of the inner View.

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.

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗