Can't scan EAN-13 barcode with IOS

  1. SDK Version 37:
  2. iOS

I am using expo-camera in order to scan barcodes. Scanner works excellent on Android devices (I am able to scan any barcode that I need).
The problem is with Iphone:
I can scan almost all barcodes (printed by manufacturer), but I have problems scanning barcodes (EAN-13) that are created by my client.
I tried with Iphone 7 (13.6) and Iphone SE2020 (13.5.1).

Often it doesn’t scan anything, but I had few times when I managed to scan it. When I managed to scan, it showed type org.gs1.ean-13.

Here is the barcode example that I am trying to scan:

I used online site to generate the same ean13 barcode , so I could check if there is any difference. This generated barcode I was able to scan instantly with Android and Iphone.
I couldn’t add image, because I am allowed to add only one image to post :slight_smile:

I compared them and I saw that they are slightly different (The first digit is located higher than in generated barcode).

My Scan.js component:

<Modal animationType={'fade'}>
        <View
          style={styles.modalViewContainer}>
          <Camera 
          ref={ref => {
            this.camera = ref;
          }}
            style={styles.preview} 
            type={type} 
            onCameraReady={this.ready}
            onBarCodeScanned={scanned ? undefined : this.handleBarCodeScanned} 
            flashMode={flashLight ? Camera.Constants.FlashMode.torch : Camera.Constants.FlashMode.off}>
              <View style={rectangleStyles.reactangleContainer}>
                <View style={rectangleStyles.rectangle}>
                      <View style={rectangleStyles.rectangleColor} />
                      <View style={rectangleStyles.topLeft} />
                      <View style={rectangleStyles.topRight} />
                      <View style={rectangleStyles.bottomLeft} />
                      <View style={rectangleStyles.bottomRight} />
                </View>
              </View>
          </Camera>
        </View>
        <View style={styles.tapToScanButtonView} >
            <TouchableOpacity>
            <Entypo onPress={()=> this.toggleFlashLight()} style={{ fontSize: 30, color: flashLight ? 'yellow' :'white', marginLeft: 50 }} name="flashlight"/>

            </TouchableOpacity>
            <AntDesign style={{ fontSize: 30, color: 'white', marginRight: 50 }} name="back" onPress={this.props.onCancelScan}/>
        </View>
       </Modal>

const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;

const styles = StyleSheet.create({
  modalViewContainer: {
    flex: 1,
    // flexDirection: 'column',
    // justifyContent: 'flex-end',
  },
  preview: {
    flex: 1,
  },
  tapToScanButtonView: {
    position: 'absolute',
    bottom: 20,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: deviceWidth,
    alignItems: 'center',
    backgroundColor: 'transparent',
  },
  tapToScanButtonText: {
    padding: 20,
    textAlign: 'center',
    color: 'white',
    fontSize: 20,
    fontWeight: 'bold',
  }

});

const rectangleStyles = StyleSheet.create({
  rectangleContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'transparent',
  },
  rectangle: {
      borderLeftColor: 'rgba(0, 0, 0, .6)',
      borderRightColor: 'rgba(0, 0, 0, .6)',
      borderTopColor: 'rgba(0, 0, 0, .6)',
      borderBottomColor: 'rgba(0, 0, 0, .6)',
      borderLeftWidth: deviceWidth / 6,
      borderRightWidth: deviceWidth / 6,
      borderTopWidth: deviceHeight / 3,
      borderBottomWidth: deviceHeight / 3
  },
  rectangleColor: {
      height: 250,
      width: 250,
      backgroundColor: 'transparent'
  },
  topLeft: {
      width: 50,
      height: 50,
      borderTopWidth: 2,
      borderLeftWidth: 2,
      position: 'absolute',
      left: -1,
      top: -1,
      borderLeftColor: 'green',
      borderTopColor: 'green'
  },
  topRight: {
      width: 50,
      height: 50,
      borderTopWidth: 2,
      borderRightWidth: 2,
      position: 'absolute',
      right: -1,
      top: -1,
      borderRightColor: 'green',
      borderTopColor: 'green'
  },
  bottomLeft: {
      width: 50,
      height: 50,
      borderBottomWidth: 2,
      borderLeftWidth: 2,
      position: 'absolute',
      left: -1,
      bottom: -1,
      borderLeftColor: 'green',
      borderBottomColor: 'green'
  },
  bottomRight: {
      width: 50,
      height: 50,
      borderBottomWidth: 2,
      borderRightWidth: 2,
      position: 'absolute',
      right: -1,
      bottom: -1,
      borderRightColor: 'green',
      borderBottomColor: 'green'
  }
})

I need to understand the root of this problem: is it the barcode itself or it is a problem with my app.

Thanks in advance!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.