Barcode scanner not working after navigation event

[erikemg]

Minimal reproducible example

import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
import { useNavigation, useIsFocused } from '@react-navigation/native';

const CodeScanner = ({ route }) => {
  const { setBarcode } = route.params;
  const { navigate } = useNavigation();
  const isFocused = useIsFocused();

  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);

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

    getBarCodeScannerPermissions();
  }, []);

  useEffect(() => {
    if (!isFocused) {
      setScanned(false);
    }
  }, [isFocused]);

  const handleBarCodeScanned = ({ data }) => {
    setBarcode(data);
    navigate('InfoScreen', { barcode: data });
  };

  if (hasPermission === null) {
    return (
      <View style={styles.container}>
        <Text>Requesting camera permission...</Text>
      </View>
    );
  }

  if (hasPermission === false) {
    return (
      <View style={styles.container}>
        <Text>You need to give the app access to your camera to use this feature.</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <BarCodeScanner
        onBarCodeScanned={handleBarCodeScanned}
        style={StyleSheet.absoluteFillObject}
      />
      {!scanned && <Text style={styles.centerText}>Position Barcode in the Center</Text>}
    </View>
  );
};

export default CodeScanner;

Summary

When I try to navigate back to the screen where I have the barcode scanner in a react native stack navigator the barcode scanner seizes to work, It no longer registers when a barcode is scanned.

Environment

System:
  OS: Windows 10 10.0.22621
Binaries:
  Node: 18.16.0 - C:\Program Files\nodejs\node.EXE
  npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
IDEs:
  Android Studio: AI-222.4459.24.2221.10121639
npmPackages:
  expo: ~48.0.18 => 48.0.20
  react: 18.2.0 => 18.2.0
  react-native: 0.71.8 => 0.71.8
Expo Workflow: bare

[expo-bot]

Hi there! It looks like your issue requires a minimal reproducible example, but it is invalid or absent. Please prepare such an example and share it in a new issue.

The best way to get attention to your issue is to provide a clean and easy way for a developer to reproduce the issue on their own machine. Please do not provide your entire project, or a project with more code than is necessary to reproduce the issue.

A side benefit of going through the process of narrowing down the minimal amount of code needed to reproduce the issue is that you may get lucky and discover that the bug is due to a mistake in your application code that you can quickly fix on your own.

Resources

• "How to create a Minimal, Reproducible Example"

• "How to narrow down the source of an error"

  Common concerns

  "I've only been able to reproduce it in private, proprietary code"

  You may not have spent enough time narrowing down the root cause of the issue. Try out the techniques discussed in this manual debugging guide to learn how to isolate the problem from the rest of your codebase.

  "I didn't have time to create one"

  That's understandable, it can take some time to prepare. We ask that you hold off on filing an issue until you are able to fully complete the required fields in the issue template.

  "You can reproduce it by yourself by creating a project and following these steps"

  This is useful knowledge, but it's still valuable to have the resulting project that is produced from running the steps, where you have verified you can reproduce the issue.