BarcodeScanner not working in production web mobile

[idolevi235]

1. SDK Version: 45.0.0
2. Platforms(Android/iOS/web/all): Web (Google chrome on mobile device)

i’m using Expo and trying to implement a simple barcode reader. It works perfectly on development environment when testing on my Android, but when building it for web (mobile) and deploying it, the handleBarCodeScanned function never trigered.

I already tried to use BarcodeScanner component separately but it is not supported on web.

I am using the following packages: “expo”: “~45.0.0”, “expo-barcode-scanner”: “~11.3.0”, “expo-camera”: “~12.2.0”, “react”: “17.0.2”, “react-native”: “0.68.2”, “react-native-web”: “0.17.7”

here is the code:

import React, { useContext,useState, useEffect } from 'react';
import { View,Text ,StyleSheet,TouchableOpacity} from 'react-native';
import Animated, {  useAnimatedStyle,
                    useSharedValue,
                    interpolate,
                    withTiming,
                    withRepeat,
                    Extrapolate,
} from 'react-native-reanimated';
import { Camera, CameraType } from 'expo-camera';
import { BarCodeScanner } from 'expo-barcode-scanner';
import {Context as MainContext} from '../context/MainContext';
import {MaterialIcons} from 'react-native-vector-icons';
import AwesomeAlert from 'react-native-awesome-alerts';



const PeachyCamera = () => {
  const { state:{showCamera}, toggleCamera, getProductData } = useContext(MainContext)
  const [showAlert, setShowAlert] = useState(false);
  const [alertMsg, setAlertMsg] = useState('');
  const [requestObject, setRequestObject] = useState(null)
  const [animationLineHeight, setAnimationLineHeight] = useState(0)

  const bar = useSharedValue(0);
  const barStyle = useAnimatedStyle(() => {
    const yValue = interpolate(bar.value, [0, 1], [0, animationLineHeight]);
    return {
      transform: [{ translateY: yValue }],
    };
  });

    
    useEffect(() => {
      bar.value = withRepeat(withTiming(1, { duration: 800 }), -1, true);
    },[]);


    
    
    const handleBarCodeScanned = async ({ type, data }) => {
      if (data) {
         setRequestObject({upcCode: data})
         console.log(data)
    }        
  };


  const handleConfirmClick = () => {
    toggleCamera(false)
    getProductData(requestObject)
  }

    return (
        <>
            <Camera
            style={StyleSheet.absoluteFillObject}
            onBarCodeScanned={handleBarCodeScanned}
            barCodeScannerSettings={{
              barCodeTypes: [BarCodeScanner.Constants.BarCodeType.upc_a,BarCodeScanner.Constants.BarCodeType.upc_e,BarCodeScanner.Constants.BarCodeType.upc_ean]
            }}
            >
              <TouchableOpacity onPress={() => toggleCamera(false)} 
                    style={{position:'absolute', top: '6%', left: '6%', zIndex:9999}}>
                <MaterialIcons name="cancel" color="#fff" size={34} style={{opacity:1}}/>
              </TouchableOpacity>
              <View style={styles.layerTop} />
              <View style={styles.layerCenter}>
                <View style={styles.layerLeft} />
                <View style={styles.focused}>
                    <View onLayout={e => setAnimationLineHeight(e.nativeEvent.layout.height)} style={styles.focusedContainer}>
                        <Animated.View style={[styles.animationLineStyle,barStyle]}
                        />
                    </View>

                </View>
                <View style={styles.layerRight} />
              </View>
              <View style={styles.layerBottom} />
              <AwesomeAlert
                    show={showAlert}
                    title=''
                    message={alertMsg}
                    closeOnTouchOutside={true}
                    closeOnHardwareBackPress={false}
                    showConfirmButton={true}
                    confirmText={'Continue'}
                    confirmButtonColor="#009688"
                    onDismiss={() => setShowAlert(false)}
                    onConfirmPressed={handleConfirmClick}
                    actionContainerStyle={{flexDirection: 'row-reverse'}}/>

            </Camera>
        </>
    );
}

const opacity = 'rgba(0, 0, 0, .6)';
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column'
  },
  layerTop: {
    flex: 2,
    backgroundColor: opacity
  },
  layerCenter: {
    flex: 1,
    flexDirection: 'row'
  },
  layerLeft: {
    flex: 1,
    backgroundColor: opacity
  },
  focused: {
    flex: 10
  },
  layerRight: {
    flex: 1,
    backgroundColor: opacity
  },
  layerBottom: {
    flex: 2,
    backgroundColor: opacity
  },
  
  container1: {
    flex: 1,
    position: 'relative',
    },

    overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    },

    unfocusedContainer: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.7)',
    },
    middleContainer: {
    flexDirection: 'row',
    flex: 1.5,
    },
    focusedContainer: {
    flex: 6,
    },
    animationLineStyle: {
    height: 2,
    width: '100%',
    backgroundColor: 'red',
    },
    rescanIconContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    },
    
});

export default PeachyCamera

Thanks!