🐛 Not able to scan QR code in some android device

[hardikpatelks]

What's happening?

QR code scanning fails on Samsung Galaxy A23 running Android 14. The camera initialises and renders correctly, but no QR codes are detected. The same implementation works fine on other devices like Samsung S23

Reproduceable Code

'use strict';

import React, {useState, useEffect, useRef, useCallback} from 'react';
import PropTypes from 'prop-types';
import {
  StyleSheet,
  Dimensions,
  Vibration,
  Animated,
  Easing,
  View,
  Text,
  TouchableWithoutFeedback,
  Alert,
} from 'react-native';
import {
  Camera,
  useCameraDevice,
  useCodeScanner,
} from 'react-native-vision-camera';
import {Helper} from '../../apis';

const XQRCodeScanner = props => {
  const {
    onRead,
    vibrate,
    reactivate,
    reactivateTimeout,
    cameraTimeout,
    fadeIn,
    showMarker,
    customMarker,
    containerStyle,
    cameraStyle,
    cameraContainerStyle,
    markerStyle,
    topViewStyle,
    bottomViewStyle,
    topContent,
    bottomContent,
    cameraProps,
  } = props;

  const [scanning, setScanning] = useState(false);
  const [isCameraActivated, setIsCameraActivated] = useState(true);
  const [fadeInOpacity, setFadeInOpacity] = useState(new Animated.Value(0));
  const [isAuthorized, setIsAuthorized] = useState(false);
  const [isAuthorizationChecked, setIsAuthorizationChecked] = useState(false);
  const [disableVibrationByUser, setDisableVibrationByUser] = useState(false);

  const timer = useRef(null);
  const _scannerTimeout = useRef(null);

  useEffect(() => {
    setIsAuthorized(true);
    setIsAuthorizationChecked(true);

    if (fadeIn) {
      Animated.sequence([
        Animated.delay(1000),
        Animated.timing(fadeInOpacity, {
          toValue: 1,
          easing: Easing.inOut(Easing.quad),
          useNativeDriver: true,
        }),
      ]).start();
    }

    return () => {
      if (_scannerTimeout.current !== null) {
        clearTimeout(_scannerTimeout.current);
      }
      if (timer.current !== null) {
        clearTimeout(timer.current);
      }
    };
  }, []);

  const _setScanning = value => setScanning(value);

  const _setCamera = value => {
    setIsCameraActivated(value);
    setScanning(false);
    setFadeInOpacity(new Animated.Value(0));

    if (value && fadeIn) {
      Animated.sequence([
        Animated.delay(10),
        Animated.timing(fadeInOpacity, {
          toValue: 1,
          easing: Easing.inOut(Easing.quad),
          useNativeDriver: true,
        }),
      ]).start();
    }
  };

  const device = useCameraDevice('back');

  const onCodeScanned = useCallback(codes => {
    if (!scanning && !disableVibrationByUser) {
      if (vibrate) {
        Vibration.vibrate();
      }
      const value = codes[0]?.value;
      _setScanning(true);
      onRead({data: value});
      if (reactivate) {
        _scannerTimeout.current = setTimeout(
          () => _setScanning(false),
          reactivateTimeout,
        );
      }
    }
  }, []);

  const codeScanner = useCodeScanner({
    codeTypes: ['qr', 'ean-13'],
    onCodeScanned: onCodeScanned,
  });


  const _renderCameraComponent = () => {
    return (
      <>
        {device ? (
          <Camera
            style={[styles.camera, cameraStyle]}
            device={device}
            isActive={true}
            codeScanner={codeScanner}
          />
        ) : (
          <View
            style={{
              flex: 1,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Text
              style={{
                textAlign: 'center',
                fontSize: 16,
              }}>
              {'Camera device not found'}
            </Text>
          </View>
        )}
      </>
    );
  };

//code

export default XQRCodeScanner;

Relevant log output

no error log found in console

Camera Device

did not any logs

Device

Samsung A23

VisionCamera Version

4.6.4

Can you reproduce this issue in the VisionCamera Example app?

I didn't try (⚠️ your issue might get ignored & closed if you don't try this)

Additional information

• [ ] I am using Expo
• [ ] I have enabled Frame Processors (react-native-worklets-core)
• [x] I have read the Troubleshooting Guide
• [x] I agree to follow this project's Code of Conduct
• [x] I searched for similar issues in this repository and found none.

[maintenance-hans[bot]]

Guten Tag, Hans here! 🍻

Thank you for providing a detailed description of your issue. It seems like you have a valid bug report regarding QR code scanning on the Samsung Galaxy A23. However, I noticed that you did not include any relevant logs from the device. For us to help you better, could you please gather the logs using adb logcat when running your app? This information is crucial for mrousavy to understand what's going wrong.

Also, I recommend checking if you can reproduce the issue in the VisionCamera Example app, as that would help narrow down the problem.

Let us know what you find, and we’ll work towards a solution together!

Note: If you think I made a mistake, please ping @mrousavy to take a look.

[hardikpatelks]

@mrousavy thanks for the reply, but as I do not have the device in which I have facing an issue I am not able to create the logs, the problem is, the package is working fine with most of the devices and as of now I just found it has a issue with Samsun A23 android OS 14 modal only with 3 different users. apart of it it is working fine and able to scan the QR code with other device with android os 14 as well

[olivertylsar]

@hardikpatelks It's a known issue, the scan works only in the top-right corner of the frame on this device. See this issue https://github.com/mrousavy/react-native-vision-camera/issues/3434 for a workaround.

[hardikpatelks]

@olivertylsar thanks for the update