Expo の 2次元コードリーダー実装の留意点

2次元コード読み取りライブラリ expo-barcode-scanner

一般的には expo-barcode-scanner が紹介されているようです。
https://docs.expo.dev/versions/latest/sdk/bar-code-scanner/

実装例

import { BarCodeScanner } from 'expo-barcode-scanner';

export default function BarcodeScanner {
  const [hasCameraPermission, setCameraPermission] = useState();
  useEffect(() => {
    BarCodeScanner.requestPermissionAsync()
      .then(({ status }) => {
        setCameraPermission(status === 'granted');
      });
  }, []);

  return (
    <BarCodeScanner
      onBarCodeScanned={({ type, data ) => {
        console.log(data);
      }}
      style={{ flex: 1}}
    />
  );

問題点

ただ、これには以下URLに示すように、react-navigation との相性で、一度スキャンされた後、2度目以降のスキャンがうまくできない事例があり、私自身も経験しました。
https://stackoverflow.com/questions/54333951/how-to-fix-redirect-uri-mismatch-error-while-using-expo-google-loginasync-in-r

パーミッションの状態取得や、ユーザダイアログなどは、とても調子よく動作するのに、本来の機能が連続で動作してくれず、アプリの再起動をユーザに促すのもどうかと思うので、他の手段を探していました。

原点に立ち返って、カメラライブラリ expo-camera

expo でフツーにカメラをインビューで動作させるライブラリです。
https://docs.expo.dev/versions/v44.0.0/sdk/camera/

実装例

import { Camera } from 'expo-camera';

export default function BarcodeScanner {
  const [hasCameraPermission, setCameraPermission] = useState();
  useEffect(() => {
    Camera.requestCameraPermissionAsync()
      .then(({ status }) => {
        setCameraPermission(status === 'granted');
      });
    // Camera.requestPermissionAsync() も deprecated ですが、存在しています
    // まぁ、Camera 入れるだけなので、修正論点ないかと
  }, []);

  return (
    <Camera
      onBarCodeScanned={({ type, data ) => {
        console.log(data);
      }}
      style={{ flex: 1}}
    />
  );

上記のように、expo-barcode-scanner とほぼほぼ同じ記述で同じ機能が実現できます。

問題点

こちらは、expo-barcode-scannerで発現した問題は全く発生せず、なぜこの2つは分かれているのだろう？と疑問に思ったところ、今度はパーミッションを得る動作に難がありました。

• バーコードの読み取り制度が若干弱い

expo-barcode-scanner で読み取れていた解像度やサイズの 2次元コードが読み取りに時間がかかることがありました。
そのため、2次元コード側のサイズ変更を余儀なくされました。

私の結論

サイズ調整でデザインに影響あったとしても、読み取れないよりはマシです。

まとめ

expo クロスプラットフォーム開発として非常に優秀ですが、細かいところで痛み分けをするポイントを度々感じます。
とはいえ、多くの恩恵を受けているので、文句を言わず頑張りましょう。