React Native Take Screenshot of App Programmatically in iOS Android

Screenshot is the graphics file that stored the current opening application on screen into a JPG or PNG format media image file, It will capture the screen and anything that display on the screen at the moment. Taking snapshots is a very important procedure for online ticket booking, online hotel booking, online movie ticket booking applications, where developer needs to store the booked ticket as a snapshot into mobile phone. So in this tutorial we would going to Take Screenshot of App Programmatically on button click in iOS Android react native application using react-native-view-shot NPM library. I am using this library because currently react native itself dose not give us any method to do this type of functionality, but thanks to react-native-view-shot library we can do this in both Android and iOS applications.

Contents in this project Take Screenshot of App Programmatically in iOS Android react native app on button click:

1. Open your react native project folder inside Command Prompt / Terminal and execute below command to install react-native-view-shot NPM library.

Screenshot of CMD :

2. Screenshot of CMD after successfully installing this library.

3. After successfully installed this library we need to execute below command in order to compile and index the current library into our project.

Screenshot after executing above command:

4. Import StyleSheet, Text, View, Image, Button and Platform component in your project.

5. Import captureScreen module from react-native-view-shot library.

6. Create constructor() in your project class file, Now we would make a State named as imageURI. This state is used to Hold the image URI we will get after taking the image screenshot.

7. Create a function named as captureScreenFunction() and define the captureScreen() default inbuilt method of library inside this function. We would also update the imageURI state using stored screenshot URI.

8. Creating a Root View in render’s return block. Now we would make a Button and Image component inside the View, We would set the Image URI as image source in image component. So when user takes the screenshot it will update the image source and display the stored image source in Image component.

9. Creating Style.

10. Complete source code for App.js File :

Screenshot in Android device:

Take Screenshot of App Programmatically

Screenshot in iOS device:

12 Comments

  1. Where does it gets saved in the device?

  2. Thanks for sharing. Your article helpful me…

  3. How to Share in Screen shot in Social App

  4. hii i problem it return black background color of screen shot how to resolved?? please help me

  5. hii, its a great article about screenshot in react native, can you help me? i want to save the screenshot to the CameraRoll, how to do it? i’m newbie in react native.. thanks

Leave a Reply

Your email address will not be published.