title: Capture view-shot and save to device - React Native
body: <p>I am developing an application where I have a button (TouchableHighlight) when pressing this button it is necessary to capture a screeshot of the current screen and save the file in the device.</p>
  
  <p>My code does not show error, but when I press the button (TouchableHighlight) I get the message: </p>
  
  <p>Image saved to file: ///data/user/0/com.appcamerav4/cache/ReactNative-snapshot-image8525057299267209213.jpg <strong><em>through Remote JS Debugging</em></strong> .</p>
  
  <p>I can not open this directory and need to save the image to the device.</p>
  
  <p>I'm new to react-native.</p>
  
  <p>Follow my code below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { Text, View, Image, StyleSheet, TouchableHighlight, WebView, StatusBar, Button } from 'react-native';
  import { captureScreen } from "react-native-view-shot";
  
  const zooMais = require('../imgs/zooMais.png');
  const zooMenos = require('../imgs/zooMenos.png');
  const imgScreeshot = require('../imgs/screeshot.png');
  
  
  const btnZooMais = ()=&gt;{
      alert("Zoo Mais");
      console.log("Zoom +");
    }
  const btnZooMenos = ()=&gt;{
      alert("Zoo Menos");
      console.log("Zoom +");
    }
  const capitureScreen = ()=&gt;{
      
      captureScreen({
          format: "jpg",
          quality: 0.8,
          }).then(
          uri =&gt; console.log("Image saved to", uri),
          error =&gt; console.error("Oops, snapshot failed", error)
          );
  }
       
  export default class Monitor extends Component {
      
      render() {
          return (  
            
              &lt;View style={ style.viewPrincipal }&gt;
  
                  &lt;StatusBar hidden /&gt;
  
                  &lt;View style={ style.viewImagem }  &gt;                
                      &lt;WebView
                          style={style.video}
                          automaticallyAdjustContentInsets={true}
                          scalesPageToFit={true}
                          startInLoadingState={false}
                          contentInset={{top: 0, right: 0, left: 0, bottom: 0}}
                          scrollEnabled={true}
                          source={{uri: 'https://facebook.github.io/react/logo-og.png'}} 
                          onNavigationStateChange = {this.handleNavigationStateChange}
                          /&gt;             
                  &lt;/View&gt;   
                  
                  &lt;View style={ style.viewRodape }&gt; 
                  
                      &lt;View style={style.viewMenu}&gt;
                          &lt;View &gt;
                              &lt;TouchableHighlight onPress={  btnZooMais }   &gt;
                                  &lt;Image style={style.imgMenu} source={zooMais } /&gt;
                              &lt;/TouchableHighlight&gt;
                          &lt;/View&gt;  
  
                          &lt;View&gt;
                              &lt;TouchableHighlight onPress={ capitureScreen }&gt;
                                  &lt;Image style={style.imgMenu} source={ imgScreeshot } /&gt;
                              &lt;/TouchableHighlight &gt;
                          &lt;/View&gt;
  
                          &lt;View&gt;
                              &lt;TouchableHighlight onPress={ btnZooMenos } &gt;
                                  &lt;Image style={style.imgMenu} source={ zooMenos } /&gt;
                              &lt;/TouchableHighlight&gt;
                          &lt;/View&gt;
  
                      &lt;/View&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
        
          
          );
          
      }
  }
  
  const style = StyleSheet.create({
      viewPrincipal:{
          flex: 1    
      },
      viewImagem:{        
          flex:10,  
          justifyContent:'center',
          alignItems:'stretch'        
      },
      viewRodape:{   
      flex:1.3   
      },
      viewMenu:{
          flexDirection:'row',
          justifyContent: 'space-between'
      },  
      imgMenu:{
          margin: 0,
          marginBottom:0     
        },   
      video:{
          flex:1
          }
  });</code></pre>
  </div>
  </div>
  </p>