How to Capture and Share Screenshot in React Native

Photo by Mika Baumeister on Unsplash

In this short post, we will learn how to capture and share screenshots in React Native programmatically.

Capturing a screenshot in React Native is quite straightforward. All you need to do is use the react-native-view-shot library. This library provides a takeSnapshot function that takes a screenshot of the current view and saves it to the device’s photo library.

If you are looking to print a component as PDF in React, checkout this tutorial.

How to Print Functional React Component?

Let us get right into it and learn how to do it.

Step 1: Install the Required Packages

First, let us install the required NPM packages for capturing and sharing screenshots. You can use the following command to install packages using NPM.

npm i react-native-view-shot
npm i add react-native-share
npm i add react-native-fs

Or else, if you use yarn use the following command:

yarn add react-native-view-shot
yarn add react-native-share
yarn add react-native-fs