Capture view-shot and save to device - React Native

Question

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.

My code does not show error, but when I press the button (TouchableHighlight) I get the message:

Image saved to file: ///data/user/0/com.appcamerav4/cache/ReactNative-snapshot-image8525057299267209213.jpg through Remote JS Debugging .

I can not open this directory and need to save the image to the device.

I'm new to react-native.

Follow my code below:

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 = ()=>{
    alert("Zoo Mais");
    console.log("Zoom +");
  }
const btnZooMenos = ()=>{
    alert("Zoo Menos");
    console.log("Zoom +");
  }
const capitureScreen = ()=>{
    
    captureScreen({
        format: "jpg",
        quality: 0.8,
        }).then(
        uri => console.log("Image saved to", uri),
        error => console.error("Oops, snapshot failed", error)
        );
}
     
export default class Monitor extends Component {
    
    render() {
        return (  
          
            <View style={ style.viewPrincipal }>

                <StatusBar hidden />

                <View style={ style.viewImagem }  >                
                    <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}
                        />             
                </View>   
                
                <View style={ style.viewRodape }> 
                
                    <View style={style.viewMenu}>
                        <View >
                            <TouchableHighlight onPress={  btnZooMais }   >
                                <Image style={style.imgMenu} source={zooMais } />
                            </TouchableHighlight>
                        </View>  

                        <View>
                            <TouchableHighlight onPress={ capitureScreen }>
                                <Image style={style.imgMenu} source={ imgScreeshot } />
                            </TouchableHighlight >
                        </View>

                        <View>
                            <TouchableHighlight onPress={ btnZooMenos } >
                                <Image style={style.imgMenu} source={ zooMenos } />
                            </TouchableHighlight>
                        </View>

                    </View>
                </View>
            </View>
      
        
        );
        
    }
}

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
        }
});

What do you mean exactly with "saving to device" then? You'll have to expand on your precise use-case. Furthermore, here's what react-native-view-shot has documented on saving to a file: https://github.com/gre/react-native-view-shot#saving-to-a-file — Nelloverflow, Feb 08 '18 at 13:08
I am not able to find an image in the cache have you solved this please help — Sagar, Nov 12 '19 at 05:08

score 1 · Answer 1 · answered Jul 16 '20 at 00:53

import React, { useRef } from "react"; // import useRef hook on top

const cardRef = useRef(); // Use this hook inside your func. component *important

// Define a function like this
const saveAsImage = async () => {
    try {
      const result = await captureRef(cardRef, {
        result: "tmpfile",
        quality: 1,
        format: "png",
      });
      MediaLibrary.saveToLibraryAsync(result);
    } catch (e) {
      console.log(e);
    }
  };

Apply a prop eg. parentRef={cardRef} to your component, make sure the ref name matches which in this case is "cardRef".

Give any Button/TouchableOpacity

onPress={() => {saveAsImage();}}

score 0 · Answer 2 · answered Jun 11 '18 at 04:35

0

Make sure react-native-view-shot is correctly linked in XCode (might require a manual installation, refer to React Native doc).

answered Jun 11 '18 at 04:35

Asif vora

3,163
3
15
31

score 0 · Answer 3 · edited Dec 09 '20 at 09:33

0

To solve this problem you have to go on your App permission on your real mobile and allow for camera storage then you can easily save your ViewShot on Your Mobile.

go to App Permisssion in your App.info
allow Camera accesss storage

edited Dec 09 '20 at 09:33

Wai Ha Lee

8,598
83
57
92

answered Dec 09 '20 at 05:21

Piyush Agrawal

1

score -1 · Answer 4 · answered Mar 04 '18 at 00:08

-1

To save the screenshot to the camera roll, use this one: https://facebook.github.io/react-native/docs/cameraroll.html#savetocameraroll

More info: https://github.com/gre/react-native-view-shot Check the FAQ section

answered Mar 04 '18 at 00:08

Ton Nguyen

153
2
4

can you please check this https://stackoverflow.com/questions/58802180/not-able-to-find-image-in-cache-using-npm-react-native-view-shot – Sagar Nov 12 '19 at 05:09

Capture view-shot and save to device - React Native

4 Answers4