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.

<br />
npm install react-native-view-shot

1	npm install react–native–view–shot

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.

<br />
react-native link react-native-view-shot

1	react–native link react–native–view–shot

Screenshot after executing above command:

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

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, Text, View, Image, Button, Platform } from ‘react-native’;

import React, { Component } from ‘react’;

import { StyleSheet, Text, View, Image, Button, Platform } from ‘react-native’;

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

<br />
import { captureScreen } from “react-native-view-shot”;

1	import { captureScreen } from “react-native-view-shot”;

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.

<br />
constructor(){</p>
<p>    super();</p>
<p>    this.state={</p>
<p>      imageURI : ‘/wp-content/uploads/2018/02/motorcycle.jpg’</p>
<p>    }<br />
  }

constructor(){

super();

this.state={

imageURI : ‘/wp-content/uploads/2018/02/motorcycle.jpg’

}

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.

<br />
captureScreenFunction=()=>{</p>
<p>    captureScreen({<br />
      format: “jpg”,<br />
      quality: 0.8<br />
    })<br />
    .then(<br />
      uri => this.setState({ imageURI : uri }),<br />
      error => console.error(“Oops, Something Went Wrong”, error)<br />
    );</p>
<p>  }

captureScreenFunction=()=>{

captureScreen({

format: “jpg”,

quality: 0.8

})

.then(

uri => this.setState({ imageURI : uri }),

error => console.error(“Oops, Something Went Wrong”, error)

);

}

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.

<br />
render() {</p>
<p>    return (</p>
<p>      <View style={styles.MainContainer}></p>
<p>       <Button title=”Capture Device Screenshot” onPress={this.captureScreenFunction} /></p>
<p>       <Image source={{uri : this.state.imageURI}} style={{width: 200, height: 300, resizeMode: ‘contain’, marginTop: 5}} /></p>
<p>      </View></p>
<p>  );<br />
  }

render() {

return (

</View>

);

}

9. Creating Style.

<br />
const styles = StyleSheet.create({<br />
  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
    backgroundColor: ‘#fff’,<br />
    borderWidth: 1,<br />
    borderColor: ‘#000’,<br />
    marginTop: (Platform.OS) === ‘ios’ ? 20 : 0,<br />
  }<br />
});

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’,

backgroundColor: ‘#fff’,

borderWidth: 1,

borderColor: ‘#000’,

marginTop: (Platform.OS) === ‘ios’ ? 20 : 0,

}

});

10. Complete source code for App.js File :

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, Text, View, Image, Button, Platform } from ‘react-native’;</p>
<p>import { captureScreen } from “react-native-view-shot”;</p>
<p>export default class App extends Component {</p>
<p>  constructor(){</p>
<p>    super();</p>
<p>    this.state={</p>
<p>      imageURI : ‘/wp-content/uploads/2018/02/motorcycle.jpg’</p>
<p>    }<br />
  }</p>
<p>  captureScreenFunction=()=>{</p>
<p>    captureScreen({<br />
      format: “jpg”,<br />
      quality: 0.8<br />
    })<br />
    .then(<br />
      uri => this.setState({ imageURI : uri }),<br />
      error => console.error(“Oops, Something Went Wrong”, error)<br />
    );</p>
<p>  }</p>
<p>  render() {</p>
<p>    return (</p>
<p>      <View style={styles.MainContainer}></p>
<p>       <Button title=”Capture Device Screenshot” onPress={this.captureScreenFunction} /></p>
<p>       <Image source={{uri : this.state.imageURI}} style={{width: 200, height: 300, resizeMode: ‘contain’, marginTop: 5}} /></p>
<p>      </View></p>
<p>  );<br />
  }<br />
}</p>
<p>const styles = StyleSheet.create({<br />
  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
    backgroundColor: ‘#fff’,<br />
    borderWidth: 1,<br />
    borderColor: ‘#000’,<br />
    marginTop: (Platform.OS) === ‘ios’ ? 20 : 0,<br />
  }<br />
});