- SDK Version 37:
- 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
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!