Hey, I’m building a small camera app that temporarily blacks out the screen when the user takes a picture.
I’m doing this like so:
takePicture = () => {
if (this.camera) {
this.setState(
{
showBlackout: true
},
async () => {
await new Promise(res => setTimeout(res, 500));
this.camera.takePictureAsync().then(data => {
FileSystem.moveAsync({
from: data.uri,
to: `${FileSystem.documentDirectory}photos/Photo_1.jpg`
}).then(() => {
Vibration.vibrate();
this.setState({
showBlackout: false,
showPreview: true
});
});
});
}
);
}
};
The code above works, however, the resulting image only contains a blacked out screen (showBlackout
being true
) around 30% of the time. It feels like a React Native/async race condition, however, I’m not too sure what else to try. Any ideas where/what could be going wrong?
Thanks!
The app is live on Expo if anyone wants to play around: Expo