Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to programmatically take a screenshot in react-native

How can I take a screenshot in ReactNative. I need a screenshot and put it in Image component. How could I do?

like image 974
CoderLim Avatar asked Aug 30 '16 02:08

CoderLim


People also ask

How do I take a screenshot in react-native?

captureScreen() Android and iOS Onlyimport { captureScreen } from "react-native-view-shot"; captureScreen({ format: "jpg", quality: 0.8, }). then( (uri) => console. log("Image saved to", uri), (error) => console.


2 Answers

There is a library to do just that: React Native View Shot

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)
);
like image 160
damusnet Avatar answered Sep 16 '22 14:09

damusnet


For a capture of the currently displayed screen use captureScreen():

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.

You can find more about the react-native-view-shot library here

like image 34
Sarantis Tofas Avatar answered Sep 16 '22 14:09

Sarantis Tofas