CODEWITHSUNDEEP
androidreact-nativeexpoqr-codeexpo-camera
shahid khan
shahid khan

Reputation: 1

Expo Camera Shows Black Screen in Development Build and APK While Scanning QR Codes

import { CameraView, CameraType, useCameraPermissions } from "expo-camera";
import { useState } from "react";
import { Button, StyleSheet, Text, TouchableOpacity, View } from "react-native";

export default function QRScan() {
  const [facing, setFacing] = useState<CameraType>("back");
  const [permission, requestPermission] = useCameraPermissions();

  if (!permission) {
    // Camera permissions are still loading.
    return <View />;
  }

  if (!permission.granted) {
    // Camera permissions are not granted yet.
    return (
      <View style={styles.container}>
        <Text style={styles.message}>
          We need your permission to show the camera
        </Text>
        <Button onPress={requestPermission} title="grant permission" />
      </View>
    );
  }

  function toggleCameraFacing() {
    setFacing((current) => (current === "back" ? "front" : "back"));
  }

  return (
    <View style={styles.container}>
      <CameraView style={styles.camera} facing={facing}>
        <View style={styles.buttonContainer}>
          <TouchableOpacity style={styles.button} onPress={toggleCameraFacing}>
            <Text style={styles.text}>Flip Camera</Text>
          </TouchableOpacity>
        </View>
      </CameraView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  },
  message: {
    textAlign: "center",
    paddingBottom: 10,
  },
  camera: {
    flex: 1,
  },
  buttonContainer: {
    flex: 1,
    flexDirection: "row",
    backgroundColor: "transparent",
    margin: 64,
  },
  button: {
    flex: 1,
    alignSelf: "flex-end",
    alignItems: "center",
  },
  text: {
    fontSize: 24,
    fontWeight: "bold",
    color: "white",
  },
});

Hello everyone! I am using expo-camera library in my app to scan qrcodes but I am facing the problem where the app scans the qrcodes and works fine in Expo Go app but as i build my app like .apk or a development build then it does not works and my screeen turns full black the code above is from the official expo docs.

below is the image when i open the app using expo-camera in my app image

Upvotes: 0

Views: 93

Answers (1)

Jacob Elbaz
Jacob Elbaz

Reputation: 1

For me downgrade expo-camera to version 16.0.10 worked. Also don't forget to adjust the android/build.gradle to add a new maven block after all other repositories as described below:

allprojects {
    repositories {

        // * Your other repositories here *

        // * Add a new maven block after other repositories / blocks *
        maven {
            // expo-camera bundles a custom com.google.android:cameraview
            url "$rootDir/../node_modules/expo-camera/android/maven"
        }
    }
}

For more info: https://github.com/expo/expo/tree/main/packages/expo-camera

Upvotes: 0

Related Questions