QR code scanner does not work on QR codes with a black background

[WouterVanHecke]

Summary

Expected behaviour: The QR scanner can scan the QR code.
Actual behaviour: The onBarCodeScanned never gets fired.

When the QR code has a black background around it.
Even some phones can't handle a small white border around it, a bigger white border does work

Doesn't work:

Doesn't work for quite some phones

Does work:

Does work:

An other case is the Binance API management qr code key you can scan, in dark mode, the scanner doesn't work.
I hope this is enough info.

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 11.6.4
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.14.0 - /usr/local/bin/node
Yarn: 1.22.18 - /usr/local/bin/yarn
npm: 8.5.5 - /usr/local/bin/npm
Watchman: 2022.03.21.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
IDEs:
Android Studio: 4.2 AI-202.7660.26.42.7351085
Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
npmPackages:
expo: ^44.0.6 => 44.0.6
react: 17.0.2 => 17.0.2
react-native: 0.66.3 => 0.66.3
npmGlobalPackages:
expo-cli: 4.7.2
Expo Workflow: bare

Reproducible demo

import React, { useState } from 'react';
import { ActivityIndicator, View } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
import { Camera, PermissionStatus } from 'expo-camera';
import { useDidMount } from 'rooks';

const QRCodeScannerComponent: React.FC<Props> = () => {
  const [cameraPermission, setCameraPermission] = useState<PermissionStatus>(
    PermissionStatus.UNDETERMINED,
  );

  useDidMount(async () => {
    const { status } = await Camera.getCameraPermissionsAsync();

    setCameraPermission(status);

    if (status !== PermissionStatus.UNDETERMINED) {
      return;
    }

    const {
      status: requestStatus,
    } = await Camera.requestCameraPermissionsAsync();
    setCameraPermission(requestStatus);
  });

  /**
   * On code scan callback
   */
  const handleRead = (code) => {
      console.log(code.data);
  };

  if (cameraPermission === PermissionStatus.UNDETERMINED) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator color='gray' size="large" />
      </View>
    );
  }

  return (
    <View style={{flex: 1}}>
      <Camera
        onBarCodeScanned={handleRead}
        barCodeScannerSettings={{
          barCodeTypes: [BarCodeScanner.Constants.BarCodeType.qr],
        }}
      />
    </View>
  );
};

export default QRCodeScannerComponent;

[brentvatne]

this looks like it is an issue with google mobile vision, which is what the expo barcode scanner uses on android: googlesamples/android-vision#62

[github-actions]

This issue is stale because it has been open for 60 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[github-actions]

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.

[hakhov]

In the BarcodeScanningOptions set TryInverted https://github.com/Redth/ZXing.Net.Maui/blob/main/ZXing.Net.MAUI/BarcodeScannerOptions.cs#L10