the barcode itself is just a random barcode from google:
but the code is this:
export default class QRScanner extends Component {
state = {
hasCameraPermission: null,
lastScan: null,
};
componentDidMount() {
this._requestCameraPermission();
}
_requestCameraPermission = async () => {
const { status } = await Permissions.askAsync(Permissions.CAMERA);
this.setState({
hasCameraPermission: status === 'granted',
});
};
onSuccessRead = (result) => {
console.log(result)
let {type, data} = result;
if (data !== this.state.lastScan) {
this.setState({ lastScan: data })
if (Platform.OS === 'ios')
{
type = type.split('.')[2];
}
Alert.alert(
type + ' Detected',
'Content:\n' + data,
[{ text: 'Open URL', onPress: () => Linking.openURL(data) },
{ text: 'Cancel', onPress: () => { } }]
);
}
}
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}
>
<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>
}
<StatusBar hidden />
</View>
);
}
}
const opacity = 'rgba(0, 0, 0, .6)';
const styles = StyleSheet.create({
container: {
flex: 1,
},
headerText: {
fontSize: fontSize.large,
fontFamily: fontFamily.medium,
color: color.white,
padding: 10,
marginRight: 30 //to center the title, because there's no right component
},
headerOuterContainer: {
backgroundColor: color.dark_blue,
height: 65,
padding: 0,
borderBottomWidth: 0,
},
scanArea:{
height: windowHeight - 65,
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
},
});
UPDATE:
I forgot to add, sometimes it’s returning me just the data:
Object {
"data": "0000000031",
"type": 1,
}
But never both data and type correctly like in IOS