Inconsistent results from `takePictureAsync`

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

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.