So I’ve been doing my project fine using Expo’s BarcodeScanner until now, testing on nexus5, Asus phone(not sure which one) and iphone 5.
This is the code I’ve been using:
const styles = StyleSheet.create({
container: {
flex: 1,
},
scanArea: {
height: windowHeight - 0.11 * windowHeight,
width: windowWidth
},
layerTop: {
flex: 1,
backgroundColor: opacity
},
layerCenter: {
flex: 2,
flexDirection: 'row'
},
layerLeft: {
flex: 1,
backgroundColor: opacity
},
focused: {
flex: 10
},
layerRight: {
flex: 1,
backgroundColor: opacity
},
layerBottom: {
flex: 1,
backgroundColor: opacity
},
});
export default class Scanner extends React.Component {
constructor(props) {
super(props);
this.state = {
hasCameraPermission: false,
lastScan: null
};
}
componentDidMount() {
this._requestCameraPermission();
}
_requestCameraPermission = async () => {
const { status } = await Permissions.askAsync(Permissions.CAMERA);
this.setState({
hasCameraPermission: status === 'granted',
});
};
/**
* Callback to be called by BarcodeScanner once it reads a compatible barcode, with param destructured
* @param {Object} result: The result will be in the form of {type:String, data:String}
*/
onSuccessRead = ({ type, data }) => {
if (data !== this.state.lastScan) {
this.setState({ lastScan: data })
//Get a displayable version of the passed barcode type
switch (type) {
case BarCodeScanner.Constants.BarCodeType.aztec: type = "Aztec"; break;
case BarCodeScanner.Constants.BarCodeType.codabar: type = "Codabar"; break;
case BarCodeScanner.Constants.BarCodeType.code128: type = "Code128"; break;
case BarCodeScanner.Constants.BarCodeType.code138: type = "Code138"; break;
case BarCodeScanner.Constants.BarCodeType.code39: type = "Code39"; break;
case BarCodeScanner.Constants.BarCodeType.code39mod43: type = "Code39mod43"; break;
case BarCodeScanner.Constants.BarCodeType.code93: type = "Code93"; break;
case BarCodeScanner.Constants.BarCodeType.datamatrix: type = "Datamatrix"; break;
case BarCodeScanner.Constants.BarCodeType.ean13: type = "Ean13"; break;
case BarCodeScanner.Constants.BarCodeType.ean8: type = "Ean8"; break;
case BarCodeScanner.Constants.BarCodeType.interleaved2of5: type = "Interleaved2of5"; break;
case BarCodeScanner.Constants.BarCodeType.itf14: type = "Itf14"; break;
case BarCodeScanner.Constants.BarCodeType.maxicode: type = "Maxicode"; break;
case BarCodeScanner.Constants.BarCodeType.pdf417: type = "Pdf417"; break;
case BarCodeScanner.Constants.BarCodeType.qr: type = "QRCode"; break;
case BarCodeScanner.Constants.BarCodeType.rss14: type = "Rss14"; break;
case BarCodeScanner.Constants.BarCodeType.rssexpanded: type = "Rssexpanded"; break;
case BarCodeScanner.Constants.BarCodeType.upc_a: type = "Upc_a"; break;
case BarCodeScanner.Constants.BarCodeType.upc_e: type = "Upc_e"; break;
case BarCodeScanner.Constants.BarCodeType.upc_ean: type = "Upc_ean"; break;
}
this.props.onRead(type, data, () => { this.setState({ lastScan: null }) }); //callback, what to do with the data on success read
}
}
render() {
return (
<View style={styles.container}>
{
this.state.hasCameraPermission === null ?
<Text>Requesting for camera permission</Text> :
this.state.hasCameraPermission === false ?
<Text style={{ color: '#fff' }}> Camera permission is not granted </Text> :
<BarCodeScanner
onBarCodeRead={this.onSuccessRead.bind(this)}
style={styles.scanArea}
autoFocus={Camera.Constants.AutoFocus.on}
focusDepth={1}
torchMode={this.props.torch}>
<View style={styles.layerTop} />
<View style={styles.layerCenter}>
<View style={styles.layerLeft} />
<View style={styles.focused} />
<View style={styles.layerRight} />
</View>
<View style={styles.layerBottom} />
</BarCodeScanner>
}
</View>
);
}
}
For some reason on Samsung Galaxy Tab A(2016), Android version 5.1.1, the Autofocus wouldn’t work and the camera just always giving blurry preview, which means barcodes are unreadable.
Here’s a screenshot of a sample of how blurry it is on this tablet:
And this is not because it was shaky or anything, this is just it’s normal state.
Now to be fair, the camera on its own is actually blurry if you open their build in camera app, so that might be the cause. But they have the option of using the touch to focus feature.
My question is, why is Autofocus not working here in this case when it’s working on other aforementioned devices? and is there any workaround to make this work?
This app is gonna be used by outdoor workers so they would most likely have some crappy devices like this on hand. So I really need a workaround to make the camera focus works…
UPDATE:
On further inspection I can say for sure that the scanner is working fine, just not the autofocus when it comes to certain sizes of qrcode that require me to place the device abit closer to the qrcode.
I don’t know if this helps narrow down the possible problems here. Though it seems this is a known issue that autofocus is not working on some android devices?
UPDATE2:
I just remembered a post regarding the relationship between Expo’s BarcodeScanner and Camera component. When I checked, from sdk23 and on BCS is based on Camera component, then I remembered reading somewhere else (somewhere on the forum) that this relationship is terminated from sdk27 or 28 can’t remember specifically. If this is true, can it be the case that autoFocus is just not working on BCS if I’m using sdk28? If I change the implementation of my above code to Camera with onBarcodeRead props, would it work? or I’m just doing pretty much the same thing here?
Thanks in advance for any pointers! 