Show black screen for first time run camera

[manhpv-1697]

Describe the bug Show black screen for first time run camera

Smartphone (please complete the following information):

• Device: All device
• OS: Android

Additional context Add any other context about the problem here.

[SohaibKtb]

+1

[agestaun]

Any update on this?

[arirusso]

ymmv but I was able to work around this with something like

const hasAndroidCameraPermission = async () => {
  const cameraPermission = await request(PERMISSIONS.ANDROID.CAMERA)
  return cameraPermission !== RESULTS.BLOCKED && cameraPermission !== RESULTS.DENIED
}

export const QRCodeScanner = (props) => {
  const [shouldLoad, setShouldLoad] = useState<boolean>(false)

  useEffect(() => {
    ;(async () => {
      setShouldLoad(Platform.OS !== "android" || (await hasAndroidCameraPermission()))
    })()
  }, [])

  if (!shouldLoad) {
    return <></>
  }
  return (
    <CameraScreen {...props} hideControls scanBarcode showFrame={false} />
  )
}

[agestaun]

ymmv but I was able to work around this with something like

const hasAndroidCameraPermission = async () => {
  const cameraPermission = await request(PERMISSIONS.ANDROID.CAMERA)
  return cameraPermission !== RESULTS.BLOCKED && cameraPermission !== RESULTS.DENIED
}

export const QRCodeScanner = (props) => {
  const [shouldLoad, setShouldLoad] = useState<boolean>(false)

  useEffect(() => {
    ;(async () => {
      setShouldLoad(Platform.OS !== "android" || (await hasAndroidCameraPermission()))
    })()
  }, [])

  if (!shouldLoad) {
    return <></>
  }
  return (
    <CameraScreen {...props} hideControls scanBarcode showFrame={false} />
  )
}

@arirusso I think you can probably return null instead.

return shouldLoad ? <CameraScreen {...props} hideControls scanBarcode showFrame={false} /> : null

[agestaun]

In the end, my issue was not related with this. I am using react native 0.71.6 and it works fine.

[scarlac]

CameraScreen component will be removed in v14. The black screen is usually caused by not checking permissions prior to showing the camera component. We recommend using https://github.com/zoontek/react-native-permissions to check - it's an excellent library, and permissions are surprisingly complicated to manage.

[arungirivasan]

Showing a blank screen on iOS devices, Android is working fine.

"react-native": "0.80.2" "react-native-camera-kit": "^15.1.0"

used 'react-native-permissions' for checking camera permission

camera preview is blank if i set ENV['RCT_NEW_ARCH_ENABLED'] = '1' in pod file. but no issue if i set ENV['RCT_NEW_ARCH_ENABLED'] = '0'.

import {
  Camera,
  CameraApi,
  CameraType,
  CaptureData,
  Orientation,
} from 'react-native-camera-kit';
import {
  check,
  PERMISSIONS,
  PermissionStatus,
  request,
  RESULTS,
} from 'react-native-permissions';


const CameraScreen =(props)=>{
const cameraRef = useRef<CameraApi>(null);

  const [currentFlashArrayPosition, setCurrentFlashArrayPosition] = useState(0);
  const [captureImage, setCaptureImage] = useState<CaptureData>();
  const [flashData, setFlashData] = useState(
    flashArray[currentFlashArrayPosition],
  );
  const [torchMode, setTorchMode] = useState(false);
  const [captured, setCaptured] = useState(false);
  const [cameraType, setCameraType] = useState(CameraType.Back);
  const [showImageUri, setShowImageUri] = useState<string>('');
  const [zoom, setZoom] = useState<number | undefined>();
  const [orientationAnim] = useState(new Animated.Value(3));
  const [resize, setResize] = useState<'contain' | 'cover'>('contain');
const [permissionGranted, setPermissionGranted] = useState(false);

useEffect(() => {
    if (!permissionGranted) {
      check(
        Platform.OS == 'ios'
          ? PERMISSIONS.IOS.CAMERA
          : PERMISSIONS.ANDROID.CAMERA,
      ).then((status: PermissionStatus) => {
        switch (status) {
          case RESULTS.UNAVAILABLE:
            console.log(
              'This feature is not available (on this device / in this context)',
            );
            break;
          case RESULTS.DENIED:
            console.log(
              'The permission has not been requested / is denied but requestable',
            );
            request(
              Platform.OS == 'ios'
                ? PERMISSIONS.IOS.CAMERA
                : PERMISSIONS.ANDROID.CAMERA,
            ).then((result: PermissionStatus) => {
              if (result == 'granted' || result == 'limited') {
                setPermissionGranted(true);
              }
            });
            break;
          case RESULTS.BLOCKED:
            console.log('The permission is denied and not requestable');
            break;
          case RESULTS.GRANTED:
            console.log('The permission is granted');
            setPermissionGranted(true);
            break;
          case RESULTS.LIMITED:
            console.log('The permission is granted but with limitations');
            break;
        }
      });
    }
  }, [permissionGranted]);


return (<View style={styles.cameraContainer}>
        {permissionGranted ? (
          showImageUri ? (
            <ScrollView
              maximumZoomScale={10}
              contentContainerStyle={{ flexGrow: 1 }}
            >
              <Image
                source={{ uri: showImageUri }}
                style={styles.cameraPreview}
              />
            </ScrollView>
          ) : (
            <Camera
              ref={cameraRef}
              style={styles.cameraPreview}
              cameraType={cameraType}
              flashMode={flashData?.mode}
              resizeMode={resize}
              resetFocusWhenMotionDetected
              zoom={zoom}
              maxZoom={10}
              onZoom={e => {
                console.log('zoom', e.nativeEvent.zoom);
                setZoom(e.nativeEvent.zoom);
              }}
              torchMode={torchMode ? 'on' : 'off'}
              shutterPhotoSound
              maxPhotoQualityPrioritization="speed"
              onCaptureButtonPressIn={() => {
                console.log('capture button pressed in');
              }}
              onCaptureButtonPressOut={() => {
                console.log('capture button released');
                onCaptureImagePressed();
              }}
              onOrientationChange={e => {
                // We recommend locking the camera UI to portrait (using a different library)
                // and rotating the UI elements counter to the orientation
                // However, we include onOrientationChange so you can match your UI to what the camera does
                switch (e.nativeEvent.orientation) {
                  case Orientation.PORTRAIT_UPSIDE_DOWN:
                    console.log('orientationChange', 'PORTRAIT_UPSIDE_DOWN');
                    rotateUiTo(1);
                    break;
                  case Orientation.LANDSCAPE_LEFT:
                    console.log('orientationChange', 'LANDSCAPE_LEFT');
                    rotateUiTo(2);
                    break;
                  case Orientation.PORTRAIT:
                    console.log('orientationChange', 'PORTRAIT');
                    rotateUiTo(3);
                    break;
                  case Orientation.LANDSCAPE_RIGHT:
                    console.log('orientationChange', 'LANDSCAPE_RIGHT');
                    rotateUiTo(4);
                    break;
                  default:
                    console.log('orientationChange', e.nativeEvent);
                    break;
                }
              }}
            />
          )
        ) : null}
      </View>)
}