Camera doesn't stop working, using BarCodeScanner

Expo SDK
1

SDK Version: 45.0.0
Platform: Android

Hi,
i’m using a Pixel 6 with Android 13 with expo app for testing, when i use the camera for scan the qr code it never stops, even if i change navigation screen or hide it, i’ve seen an old discussion about this, but even if the barcodescanner is removed to the screen the notification of camera use doesn’t disappear and the device after a while became hot because is still using the camera. The only way to stop it is to remove the application from backgrounds process or remove the camera permissions from the settings.
This is the code:

import React, { useState, useEffect, useRef } from "react";
import {
  Text,
  View,
  StyleSheet,
  Button,
  TouchableOpacity,
  Platform,
  Linking,
  Animated,
  Easing,
} from "react-native";
import { BarCodeScanner } from "expo-barcode-scanner";
import { contrast, primaryColor } from "../../../Costants";

const Scanner = ({ navigation }) => {
  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);
  const [showScanner, setShowScanner] = useState(true);

  var linePosition = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    scanAnimation();
    const getBarCodeScannerPermissions = async () => {
      const { status } = await BarCodeScanner.requestPermissionsAsync();
      setHasPermission(status === "granted");
    };

    getBarCodeScannerPermissions();
    return () => {
      setHasPermission(false);
    };
  }, []);

  const handleBarCodeScanned = ({ type, data }) => {
    setScanned(true);
    setShowScanner(false);
    //navigation.navigate("DeviceStatus", { code: data });
  };

  function scanAnimation() {
    Animated.loop(
      Animated.sequence([
        Animated.timing(linePosition, {
          toValue: 400,
          useNativeDriver: true,
          duration: 1500,
          easing: Easing.linear,
        }),
        Animated.timing(linePosition, {
          toValue: 0,
          useNativeDriver: true,
          duration: 1500,
          easing: Easing.linear,
        }),
      ])
    ).start();
  }

  function goToSettings() {
    if (Platform.OS == "ios") {
      Linking.openURL("app-settings:");
    } else {
      Linking.openSettings();
    }
  }

  if (hasPermission === null) {
    return (
      <View style={styles.container}>
        <Text>Requesting for camera permission</Text>
      </View>
    );
  }
  if (hasPermission === false) {
    return (
      <View style={styles.container}>
        <Text>No access to camera</Text>
        <Text>
          If you want to abilitate it you have to go and do it manually
        </Text>
        <Text>Press the button below to go on settings</Text>
        <TouchableOpacity style={styles.buttonContainer}>
          <Text style={styles.buttonText} onPress={() => goToSettings()}>
            Go to settings
          </Text>
        </TouchableOpacity>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      {showScanner && (
        <View>
          <Animated.View
            style={[styles.line, { transform: [{ translateY: linePosition }] }]}
          />
          <BarCodeScanner
            onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
            style={styles.scanner}
          />
          {scanned && (
            <Button
              title={"Tap to Scan Again"}
              onPress={() => setScanned(false)}
            />
          )}
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: contrast,
  },
  buttonText: {
    padding: 15,
    color: contrast,
    fontWeight: "bold",
  },
  buttonContainer: {
    position: "relative",
    height: 50,
    width: 150,
    backgroundColor: primaryColor,
    elevation: 5,
    shadowRadius: 2,
    shadowOffset: {
      width: 1,
      height: 1,
    },
    shadowColor: "grey",
    shadowOpacity: 0.5,
    borderRadius: 5,
    alignSelf: "center",
    alignItems: "center",
    marginTop: 30,
    marginBottom: 30,
  },
  line: {
    width: 300,
    height: 4,
    backgroundColor: primaryColor,
    position: "relative",
    elevation: 5,
    zIndex: 1,
  },
  scanner: {
    width: 300,
    height: 400,
    alignSelf: "center",
  },
});

export { Scanner };
2

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