This article was originally published on our official account: ReactNative development circle.

React Native screen capture component: The react-native view-shot is used to capture the current screen or the current page component. For example, if the current page has an image component or a view component, you can choose to capture the image component or view component. Supports iOS and Android.

Installation method

npm install react-native-view-shot
react-native link react-native-view-shot
Copy the code

Use the sample

CaptureScreen () screenshot method

Capture the current screen. The capture is the same as the screenshot provided by the system. Only the page content displayed on the current screen is captured. If it is a ScrollView, the unshown part will not be intercepted.

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)
);
Copy the code

CaptureRef (Options) is captured based on the component reference name

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

render() {
     return (
	 <ScrollView ref="full">
		  <View ref="Form1" > < / View > < View ref ="Form2 "> < / View > < / ScrollView >); } snapshot = refname => () => captureRef(refname, { format:"jpg"Quality: 0.8, the result:"tmpfile",
  snapshotContentContainer: true
})
.then(
  uri => console.log("Image saved to", uri),
  error => console.error("Oops, snapshot failed", error)
);
Copy the code

Specify the REF name of the component to intercept, and then pass that ref name to the Snapshot method to intercept the content of the specified component. To intercept a ScrollView, simply pass “full” to the snapshot method. Both captureRef and captureScreen can set options: Width/height: Specifies the width and height of the resulting image. Format: Specify the image format to be generated. PNG or JPG or webm (Android). The default is PNG. Quality: Image quality 0.0-1.0 (default). Result: The last generated type, which can be tmpFile, base64, or data-URI. SnapshotContentContainer: If set to True, the height of the component is dynamically calculated. In the case of a ScrollView component, the actual height of the entire ScrollView is captured.

Supported Components

The sample source code

Lot – forrest23 / ReactNativeComponents: the React of Native components

Component address

GitHub – gre/react-native-view-shot: Snapshot a React Native view and save it to an image

Follow my wechat public number: ReactNative development circle