iOS限定 React Nativeで医薬品バーコード（ GS1データバー限定型 ）をスキャンする方法

yarn add react-native-vision-camera

cd ios && pod install

<key>NSCameraUsageDescription</key>
<string>バーコードを読み取るためカメラを使用します。</string>

yarn add react-native-worklets-core

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [['react-native-worklets-core/plugin']],<----追加
};

yarn start --reset-cache

yarn add @mgcrea/vision-camera-barcode-scanner

cd ios && pod install

import React, {useEffect} from 'react';
import {SafeAreaView, StyleSheet, View} from 'react-native';
import {
  Camera,
  useCameraDevices,
  useCameraPermission,
  useCameraFormat,
} from 'react-native-vision-camera';
import {
  CameraHighlights,
  useBarcodeScanner,
} from '@mgcrea/vision-camera-barcode-scanner';
import {useSharedValue} from 'react-native-worklets-core';

function App() {
  const {hasPermission, requestPermission} = useCameraPermission();
  const barcode = useSharedValue('');
  useEffect(() => {
    (async () => {
      requestPermission();
    })();
  }, [requestPermission]);

  const {props: cameraProps, highlights} = useBarcodeScanner({
    fps: 5,
    barcodeTypes: ['unknown'], // <-- gs1databarにすると限定型が読み取れなくなるのでunknownに設定する、
    onBarcodeScanned: barcodes => {
      'worklet';
      // unknown設定だと読み取れるバーコード全てに反応してしまうので、
      // 読み取った後にsymbologyでふるいにかけてGS1DataBarとGS1DataBarLimited
      // の場合のみ利用できるように実装する
      if (
        barcodes[0].native.symbology ===
          'VNBarcodeSymbologyGS1DataBarLimited' ||
        barcodes[0].native.symbology === 'VNBarcodeSymbologyGS1DataBar'
      ) {
        // slice(2)をつけることで不要な上２桁を削除している。
        // 例として（01）14987000000000のようなコードだとbarcodes[0].valueの中身は
        // 0114987000000000が入っているが頭２桁の01は医薬品バーコードの取り扱いにおいて不要である
        barcode.value = barcodes[0].value.slice(2);
      }
    },
  });

  const devices = useCameraDevices();
  const device = devices.find(({position}) => position === 'back');
  const format = useCameraFormat(device, [
    {videoResolution: {width: 1920, height: 1080}},
  ]);

  return (
    <SafeAreaView style={styles.container}>
      {hasPermission && (
        <View style={styles.camera}>
          <Camera
            style={StyleSheet.absoluteFill}
            device={device}
            isActive
            format={format}
            {...cameraProps}
          />
          <CameraHighlights highlights={highlights} color="#00ff7f" />
        </View>
      )}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  camera: {
    width: '100%',
    height: '100%',
  },
});

export default App;