Expo React Native TakeSnapShot Async Returning Black Screen - react-native

Question

I'm new to React Native and am trying to create an app that will use Expo's Camera and Takesnapshot Async to take a picture and save it to Cameraroll.
I'm probably doing something really dumb, but right now (even though the view is showing the camera before I press the snapshot button), my code is saving a black image when I click the button instead of the image captured by the camera to the camera roll.
Here is my code for the CameraScreen (I'm using code from https://docs.expo.io/versions/latest/sdk/camera to open the camera and code from https://snack.expo.io/SJRvlSxvb to save a snapshot):
class CameraScreen extends React.Component {
state = {
hasCameraPermission: null,
type: Camera.Constants.Type.back,
cameraRollUri: null,
};
async componentWillMount() {
const { status } = await Permissions.askAsync(Permissions.CAMERA);
this.setState({ hasCameraPermission: status === 'granted' });
}
render() {
const { hasCameraPermission } = this.state;
if (hasCameraPermission === null) {
return <View />;
} else if (hasCameraPermission === false) {
return <Text>No access to camera</Text>;
} else {
return (
<View style={{ flex: 1 }} >
<Camera style={{ flex: 1 }}
type={this.state.type}
collapsable={false}
ref={view => {
this._container = view;
}} >
<View
style={{
flex: 1,
backgroundColor: 'transparent',
flexDirection: 'row',
}} >
{this.state.cameraRollUri &&
<Image
source={{ uri: this.state.cameraRollUri }}
style={{ width: 200, height: 200 }
}
/>}
<TouchableOpacity style={styles.gridItem} onPress={this._saveToCameraRollAsync}>
</TouchableOpacity>
<TouchableOpacity
style={{
flex: 0.1,
alignSelf: 'flex-end',
alignItems: 'center',
}}
onPress={() => {
this.setState({
type: this.state.type === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back,
});
}}>
<Text
style={{ fontSize: 18, marginBottom: 10, color: 'white' }}>
{' '}Flip{' '}
</Text>
</TouchableOpacity>
</View>
</Camera>
</View>
);
}
}
_saveToCameraRollAsync = async () => {
let result = await takeSnapshotAsync(this._container, {
format: 'png',
result: 'file',
});
let saveResult = await CameraRoll.saveToCameraRoll(result, 'photo');
this.setState({ cameraRollUri: saveResult });
};
}
I first thought that the view saved to this._components wasn't the right view, but I tried attaching the code
ref={view => {
this._container = view;
}
to different views in the class but nothing seems to be changing.
Thanks in advance for any help - I've been struggling for this for a pretty long time now :(
PS: This is my first stack overflow post; I apologize in advance if there anything wrong with my post.

Answer 1

Expo Camera doesn’t support snapshot instead you can use the method takePictureAsync from Camera which return an image object.
const image = await this._container.takePictureAsync();

Answer 2

Camera component from Expo doesn't support takeSnapshotAsync.
Otherwise if you are using any Expo-pixi component, this code can be helpful:
const { uri } = await this.sketch.takeSnapshotAsync();
//save sketch/signature/doodles in DCIM folder.
let saveResult = await CameraRoll.saveToCameraRoll(uri, 'photo');