A QR code scanner component for React Native built on top of react-native-camera by Lochlan Wansbrough
Please note, this will also function as a generic barcode scanner by the virtue of the above module supporting barcode scanning, however, this module was initially built as a QR code scanner.
Please also note, this module currently supports iOS only. I'll be looking to setup and add Android support in the coming months.
I wrote this module because I couldn't find one that could be simply plugged into a project without requiring too much setup.
To install and start using react-native-qrcode-scanner:
npm install react-native-qrcode-scanner
react-native link react-native-qrcode-scanner
To use react-native-qrcode-scanner, import
the react-native-qrcode-scanner
module and use the <QRCodeScanner />
tag.
(more examples coming soon)
'use strict';
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
NavigatorIOS,
TouchableOpacity,
TouchableHighlight,
Linking,
} from 'react-native';
import QRCodeScanner from 'react-native-qrcode-scanner';
class ScanScreen extends Component {
onSuccess(e) {
Linking.openURL(e.data).catch(err => console.error('An error occured', err))
}
render() {
return (
<NavigatorIOS
initialRoute={{
component: QRCodeScanner,
title: 'Scan Code',
passProps: {
onRead: this.onSuccess.bind(this),
topContent: <Text style={styles.centerText}>Go to <Text style={styles.textBold}>wikipedia.org/wiki/QR_code</Text> on your computer and scan the QR code.</Text>,
bottomContent: <TouchableOpacity style={styles.buttonTouchable}><Text style={styles.buttonText}>OK. Got it!</Text></TouchableOpacity>
}
}}
style={{flex: 1}}
/>
)
}
}
const styles = StyleSheet.create({
button: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'pink',
borderRadius: 3,
padding: 32,
width: 100,
marginTop: 64,
marginBottom: 64,
},
centerText: {
flex: 1,
fontSize: 18,
padding: 32,
color: '#777',
},
textBold: {
fontWeight: '500',
color: '#000',
},
buttonText: {
fontSize: 21,
color: 'rgb(0,122,255)',
},
buttonTouchable: {
padding: 16,
},
});
AppRegistry.registerComponent('awesome', () => ScanScreen);
Screenshot of the above from the device:
Please open an issue if something doesn't work or is not clear enough.
propType: func.isRequired
default: (e) => (console.log('QR code scanned!', e))
Will call this specified method when a QR code or a barcode is detected in the camera's view passing in the event emitted upon reading the code.
propType: bool
default: true
When set to true
this ensures that the camera view fades in after the initial load up instead of being rendered immediately.
Set this to false to prevent the animated fade in of the camera view.
propType: bool
default: false
When set to false
, when a QR code is scanned, the QRCodeScanner
will not scan another code until it is re-rendered.
When set to true
this will reactivate the scanning ability of the component.
propType: number
default: 0
Use this to configure how long it should take before the QRCodeScanner
should reactivate.
propType: oneOfType([ PropTypes.element, PropTypes.string, ])
Use this to render any additional content at the top of the camera view.
propType: oneOfType([ PropTypes.element, PropTypes.string, ])
Use this to render any additional content at the bottom of the camera view.
See LICENSE.md
Thanks to Lochlan Wansbrough for the react-native-camera module which provided me with an awesome example of how to set up this module.
This QR code scanner was inspired by the QR code scanner within Whatsapp.
- Document other complex examples
- Fix styling to work across iOS screen sizes
- Add support for Android (Going to be doing some Android development later this year, will be taking a look at this again then)
- Add some tests
- Add support for width and height of the camera view
- Add contributing guidelines