🐛 Black screen flashes for a second before camera appears

[vladimir-vasilev]

What were you trying to do?

I want to use back Camera

Reproduceable Code

const [hasPermission, setHasPermission] = useState(false);
  const devices = useCameraDevices();
  const device = devices.back;

  useEffect(() => {
    (async () => {
      const status = await Camera.requestCameraPermission();
      setHasPermission(status === 'authorized');
    })();
  }, []);

  return device && hasPermission
    ? <Camera style={StyleSheet.absoluteFill} device={device} isActive={true} />
    : null;

What happened instead?

Black screen flashes for a second before camera appears. Reproduces on many devices and simulators, on iOS and android.

"react-native": "0.68.2"

Relevant log output

No response

Device

iPhone 11 (iOS 15.0), Samsung Galaxy S20 FE (Android 12)

VisionCamera Version

2.13.0

Additional information

• [ ] I am using Expo
• [X] I have read the Troubleshooting Guide
• [X] I agree to follow this project's Code of Conduct
• [X] I searched for similar issues in this repository and found none.

[mrousavy]

I don't understand, where exactly is the problem here?

[vladimir-vasilev]

when the camera appears, the first thing I see is the black screen. I expect to see the camera image at once, not the black screen

[thomas-coldwell]

You are rendering null and the request for camera permission is in a useEffect so it will render initially without displaying the camera component and then (if it has the permission) render the camera component. A simple way to get around this would be to check the permission before navigating to the screen where you have the camera in the first place or just display a permission place holder rather than null?

[vladimir-vasilev]

yes, but I see the issue in Camera component, when it's rendered. I tried with different screen as well.

[rmyr]

Having the same issue, short flickers (two) of black that actually also overflow the parent container, which looks kinda ugly (even if the camera is given props for dimensions like 100px that are easily within the bounds of the parent containerl).

After the actual camera image is rendered everything looks as expected.

Edit: It seems like calling VisionCamera.requestCameraPermission() onLayout causes one of the two flickers, even when nothing is done with the result of the promise (so no state update). Not sure if that helps.

[mssoliveira]

This is happening because the status of hasPermission when opening the screen is false, it is still querying the permission request.

I'm having the same problem and I'm trying to solve for the permission to be accessed when the app starts.

[kashandanish]

I faced the same issue and resolved it by checking the permission status before asking permission.

if (await Camera.getCameraPermissionStatus() !== 'authorized') {
    if (await Camera.requestCameraPermission() === 'denied') {
        setSettingsModalOpen(true)
    }
}

[mrousavy]

Closing as this is a stale issue - this might have been fixed with the full rewrite in VisionCamera V3 (🥳) - if not, please create a new issue.