Screen Shot in React Native (Android)

Question

I am using the React-Native-View-Shot Library to take a screenshot of the whole screen.

It is mentioned in the documentation that the method captureScreen():

captureScreen() will capture the contents of the currently displayed screen as a native hardware screenshot. It does not require a ref input, as it does not work at the view level. This means that ScrollViews will not be captured in their entirety - only the portions currently visible to the user.

However, the screenshot is not capturing any components other than the camera preview. All the components used are claimed to be supported as in the interoperability table of the documentation.

Code:

takeScreenshot() {
    captureScreen({
        format: "jpg",
        quality: 0.8
    }).then(
        uri => { savePath = uri; console.log("Image saved to", uri); CameraRoll.saveToCameraRoll(uri); ToastAndroid.show(uri + "", ToastAndroid.SHORT); },
        error => console.error("Oops, snapshot failed", error)
        );
}

render() {
    return (
        <View style={styles.container}>
            <Text style={{backgroundColor:"white"}}>Hello World</Text>
            <RNCamera style={styles.preview}
                ref={ref => {
                    this.camera = ref;
                }}
                type={RNCamera.Constants.Type.back}
                flashMode={RNCamera.Constants.FlashMode.on}
                permissionDialogTitle={'Permission to use camera'}
                permissionDialogMessage={'We need your permission to use your camera phone'}>
            </RNCamera>
            <Button title="Capture" onPress={()=>this.takeScreenshot()}/>
        </View>
    )
}

The RNCamera is the camera component from react-native-camera

Expected Result

Obtained Result

Referred Question had no answer as well

What could be the issue? Why are the components covered with camera preview too?

score -1 · Answer 1 · answered Sep 28 '18 at 15:31

import ViewShot from "react-native-view-shot";

<ViewShot ref="viewShot" options={{ format: "jpg", quality: 0.9 
     }}>
<View style={styles.container} ref='snapViewPic'>
     <RNCamera style={styles.preview}
            ref={ref => {
                this.camera = ref;
            }}
            type={RNCamera.Constants.Type.back}
            flashMode={RNCamera.Constants.FlashMode.on}
            permissionDialogTitle={'Permission to use camera'}
            permissionDialogMessage={'We need your permission to 
             use your camera phone'}>
        </RNCamera>
 </View>
</ViewShot>

takeScreenShot () {
    this.refs.viewShot.capture().then(uri => {
     console.log("do something with ", uri);
    });
}

Make Sure your 'Capture button' and 'hello world' must not be in view 'container'.

This works for me.

Screen Shot in React Native (Android)

1 Answers1