Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ExpoBarcodeScanner: camera won't change direction on Android

See original GitHub issue

Summary

The camera direction (front/back) switching is not working on Android. The iOS version of the app works correctly, so it must be something Android-specific.

expo-env-info didn’t output these but here are other relevant packages and versions:

"expo-barcode-scanner": "11.3.0"
"expo-camera": "12.2.0",
"expo-constants": "~13.0.1",
"expo-device": "~4.1.0",
"expo-intent-launcher": "~10.1.0",
"expo-linking": "~3.0.0",
"expo-modules-core": "~0.6.4",
"expo-permissions": "~13.1.0",

Managed or bare workflow? If you have `ios/` or `android/` directories in your project, the answer is bare!

bare

What platform(s) does this occur on?

Android

SDK Version (managed workflow only)

No response

Environment

expo-env-info 1.0.3 environment info: System: OS: macOS 12.3.1 Shell: 5.8 - /bin/zsh Binaries: Node: 14.17.5 - ~/.nvm/versions/node/v14.17.5/bin/node Yarn: 1.22.17 - ~/.nvm/versions/node/v14.17.5/bin/yarn npm: 6.14.15 - ~/.nvm/versions/node/v14.17.5/bin/npm Watchman: 2022.03.21.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.2 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5 Android SDK: API Levels: 29, 30, 31 Build Tools: 28.0.3, 29.0.3, 30.0.0, 30.0.2, 30.0.3, 31.0.0 System Images: android-30 | Google APIs Intel x86 Atom, android-31 | Google APIs Intel x86 Atom_64, android-31 | Google Play Intel x86 Atom_64 IDEs: Android Studio: 2021.1 AI-211.7628.21.2111.8309675 Xcode: 13.3.1/13E500a - /usr/bin/xcodebuild npmPackages: @expo/webpack-config: ~0.16.2 => 0.16.20 babel-preset-expo: 9.0.2 => 9.0.2 expo: ^44.0.0 => 44.0.6 react: 17.0.1 => 17.0.1 react-dom: 17.0.1 => 17.0.1 react-native: 0.64.3 => 0.64.3 react-native-web: 0.17.1 => 0.17.1 Expo Workflow: bare

Reproducible demo

The component that wraps the scanner:

import { BarCodeScanner as ExpoBarCodeScanner } from 'expo-barcode-scanner';
import { StyleSheet } from 'react-native';

const BarcodeScanner = ({ cameraDirection, onBarCodeScanned }) => {
  return (
    <ExpoBarCodeScanner
      type={cameraDirection}
      onBarCodeScanned={onBarCodeScanned}
      style={StyleSheet.absoluteFillObject}
    />
  );
};

Then, we use it like this:

import { Constants } from 'expo-barcode-scanner';
import { Camera } from 'expo-camera';

const BarcodeScannerController = ({ onBarCodeScanned }) => {
  const [cameraDirection, setCameraDirection] = useState(Constants.Type.front);
  const [hasCameraPermission, setHasCameraPermission] = useState(null);

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasCameraPermission(status === 'granted');
    })();
  }, []);

  const onChangeCameraDirection = () => {
    if (cameraDirection === Constants.Type.front) {
      setCameraDirection(Constants.Type.back);
    } else {
      setCameraDirection(Constants.Type.front);
    }
  };

  return (
    <>
      <BarcodeScannerPermission hasCameraPermission={hasCameraPermission}>
        <CameraDirectionButton
          onChangeCameraDirection={onChangeCameraDirection}
        />

        <BarcodeScanner
          onBarCodeScanned={onBarCodeScanned}
          cameraDirection={cameraDirection}
        />
      </BarcodeScannerPermission>
      <DevButtons onBarCodeScanned={onBarCodeScanned} />
    </>
  );
};

CameraDirectionButton just renders a button and calls that function whenever clicked.

One interesting thing to note, is that if I change the initial state of cameraDirection, the app uses the right camera. The issue occurs when trying to switch between them without reloading the app.