Untitled

import React, {useCallback, useState} from 'react';
import {SafeAreaView, StyleSheet} from 'react-native';

import {
  BarcodeItemOverlayViewConfig,
  BarcodeResultField,
  BarcodeScannerResult,
  ScanbotBarcodeCameraView,
} from 'react-native-scanbot-barcode-scanner-sdk';
import {BarcodeCameraViewResult} from '@components';

export function BarcodeCameraViewScreen() {
  const [lastDetectedBarcode, setLastDetectedBarcode] = useState('');
  const [flashEnabled, setFlashEnabled] = useState(true);
  const [finderEnabled, setFinderEnabled] = useState(true);

  const onBarcodeScan = useCallback((result: BarcodeScannerResult) => {
    if (result.barcodes && result.barcodes.length > 0) {
      const text = result.barcodes
        .map(barcode => `${barcode.textWithExtension} (${barcode.type})`)
        .join('\n');
      setLastDetectedBarcode(text);
    }
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <ScanbotBarcodeCameraView
        style={styles.cameraViewContainer}
      finderConfig={{
        viewFinderEnabled: true,
        overlayColor: '#000000A9',
      }}
      selectionOverlayConfig={{
        overlayEnabled: true,
        loadingTextValue: 'Please wait, testing here DDDDD...', // Optional property, useful if you query your server to check the barcode.
        barcodeItemOverlayViewBinder: (
          barcodeItem: BarcodeResultField,
        ): Promise<BarcodeItemOverlayViewConfig> | BarcodeItemOverlayViewConfig => {
          console.log('BARCCCCCCCCOOOOOOOOOOOODEEEEE', barcodeItem);
          /** TODO: process scan result as needed,
           * e.g. query your server to check the barcode.
           *
           * See example below.
           */
          const text = 
            barcodeItem.type === 'DATA_MATRIX' ? '(DATA_MATRIX)' :
            barcodeItem.type === 'CODE_128' ? '(CODE_128)' :
            barcodeItem.type === 'QR_CODE' ? '(QR_CODE)' :
            barcodeItem.type === 'EAN_13' ? ' (EAN_13)' :
            barcodeItem.type === 'CODE_39' ? '(CODE_39)' :
            barcodeItem.type === 'CODE_11' ? '(CODE_11)' :
            barcodeItem.type === 'CODE_93' ? '(CODE_93)' :
            barcodeItem.type === 'AUSTRALIA_POST' ? '(CAUS)' :
            barcodeItem.type === 'AZTEC' ? '(AZTEC)' :
            barcodeItem.type === 'CODABAR' ? '(CODABAR)' :
            barcodeItem.type ===  'MAXI_CODE' ? '(maxi)' :
            'Invalid barcode';
          const color = 
            barcodeItem.type === 'DATA_MATRIX' ? '#ACE1AF' :
            barcodeItem.type === 'CODE_128' ? '#ADD8E6' : // Light blue
            barcodeItem.type === 'QR_CODE' ? '#FFD700' : // Gold
            barcodeItem.type === 'EAN_13' ? '#FFB6C1' : // Light pink
            barcodeItem.type === 'CODE_39' ? '#90EE90' : // Light green
            '#FF0000'; // Red for invalid barcodes
          
          const strokeColor = 
            barcodeItem.type === 'DATA_MATRIX' ? '#E1377C' :
            barcodeItem.type === 'CODE_128' ? '#0000FF' : // Blue
            barcodeItem.type === 'QR_CODE' ? '#FF8C00' : // Dark orange
            barcodeItem.type === 'EAN_13' ? '#FF69B4' : // Hot pink
            barcodeItem.type === 'CODE_39' ? '#32CD32' : // Lime green
            '#FF0000'; // Red for invalid barcodes
          
          const polygonColor = 
            barcodeItem.type === 'CODE_11' ? '#FFA100' : // Orange
            barcodeItem.type === 'CODE_128' ? '#0000FF' : // Blue
            barcodeItem.type === 'QR_CODE' ? '#FF8C00' : // Dark orange
            barcodeItem.type === 'EAN_13' ? '#FF69B4' : // Hot pink
            barcodeItem.type === 'CODE_39' ? '#32CD32' : // Lime green
            barcodeItem.type === 'MAXI_CODE' ? '#32CD32' : // Lime green
            '#FF0000'; // Red for invalid barcodes

          return {
            text: text,
            textColor: '#FFFFFF',
            textContainerColor: color,
            strokeColor: strokeColor,
            polygonColor: polygonColor,                        
            // Configure other parameters as needed.
          };
        },
      }}
        flashEnabled={flashEnabled}
        onBarcodeScannerResult={onBarcodeScan}
      />
      <BarcodeCameraViewResult
        style={styles.resultContainer}
        lastDetectedBarcode={lastDetectedBarcode}
        flashEnabled={flashEnabled}
        onFinderToggle={() => setFinderEnabled(!finderEnabled)}
        onFlashToggle={() => setFlashEnabled(!flashEnabled)}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  cameraViewContainer: {
    justifyContent: 'flex-end',
  },
  resultContainer: {
    flex: 0.75,
  },
});