├── QRCodeScreen.js
├── README.md
└── screenshots
    └── screen.png


/QRCodeScreen.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | var React = require('react-native');
  4 | 
  5 | var {
  6 |   StyleSheet,
  7 |   View,
  8 |   Text,
  9 |   TouchableOpacity,
 10 |   VibrationIOS,
 11 | } = React;
 12 | 
 13 | import Camera from 'react-native-camera';
 14 | 
 15 | var QRCodeScreen = React.createClass({
 16 | 
 17 |   propTypes: {
 18 |     cancelButtonVisible: React.PropTypes.bool,
 19 |     cancelButtonTitle: React.PropTypes.string,
 20 |     onSucess: React.PropTypes.func,
 21 |     onCancel: React.PropTypes.func,
 22 |   },
 23 | 
 24 |   getDefaultProps: function() {
 25 |     return {
 26 |       cancelButtonVisible: false,
 27 |       cancelButtonTitle: 'Cancel',
 28 |     };
 29 |   },
 30 | 
 31 |   _onPressCancel: function() {
 32 |     var $this = this;
 33 |     requestAnimationFrame(function() {
 34 |       $this.props.navigator.pop();
 35 |       if ($this.props.onCancel) {
 36 |         $this.props.onCancel();
 37 |       }
 38 |     });
 39 |   },
 40 | 
 41 |   _onBarCodeRead: function(result) {
 42 |     var $this = this;
 43 | 
 44 |     if (this.barCodeFlag) {
 45 |       this.barCodeFlag = false;
 46 | 
 47 |       setTimeout(function() {
 48 |         VibrationIOS.vibrate();
 49 |         $this.props.navigator.pop();
 50 |         $this.props.onSucess(result.data);
 51 |       }, 1000);
 52 |     }
 53 |   },
 54 | 
 55 |   render: function() {
 56 |     var cancelButton = null;
 57 |     this.barCodeFlag = true;
 58 |     
 59 |     if (this.props.cancelButtonVisible) {
 60 |       cancelButton = <CancelButton onPress={this._onPressCancel} title={this.props.cancelButtonTitle} />;
 61 |     }
 62 | 
 63 |     return (
 64 |       <Camera onBarCodeRead={this._onBarCodeRead} style={styles.camera}>
 65 |         <View style={styles.rectangleContainer}>
 66 |           <View style={styles.rectangle}/>
 67 |         </View>
 68 |         {cancelButton}
 69 |       </Camera>
 70 |     );
 71 |   },
 72 | });
 73 | 
 74 | var CancelButton = React.createClass({
 75 |   render: function() {
 76 |     return (
 77 |       <View style={styles.cancelButton}>
 78 |         <TouchableOpacity onPress={this.props.onPress}>
 79 |           <Text style={styles.cancelButtonText}>{this.props.title}</Text>
 80 |         </TouchableOpacity>
 81 |       </View>
 82 |     );
 83 |   },
 84 | });
 85 | 
 86 | var styles = StyleSheet.create({
 87 | 
 88 |   camera: {
 89 |     height: 568,
 90 |     alignItems: 'center',
 91 |   },
 92 | 
 93 |   rectangleContainer: {
 94 |     flex: 1,
 95 |     alignItems: 'center',
 96 |     justifyContent: 'center',
 97 |     backgroundColor: 'transparent',
 98 |   },
 99 | 
100 |   rectangle: {
101 |     height: 250,
102 |     width: 250,
103 |     borderWidth: 2,
104 |     borderColor: '#00FF00',
105 |     backgroundColor: 'transparent',
106 |   },
107 | 
108 |   cancelButton: {
109 |     flexDirection: 'row',
110 |     justifyContent: 'center',
111 |     backgroundColor: 'white',
112 |     borderRadius: 3,
113 |     padding: 15,
114 |     width: 100,
115 |     bottom: 10,
116 |   },
117 |   cancelButtonText: {
118 |     fontSize: 17,
119 |     fontWeight: '500',
120 |     color: '#0097CE',
121 |   },
122 | });
123 | 
124 | module.exports = QRCodeScreen;
125 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # react-native-qrcode-reader
  2 | A simple QR Code Reader Screen implemented with [react-native-camera](https://github.com/lwansbrough/react-native-camera).
  3 | 
  4 | ![qrcode-reader](https://raw.githubusercontent.com/lazaronixon/react-native-qrcode-reader/master/screenshots/screen.png)
  5 | 
  6 | ## Getting started
  7 | 1. Install [react-native-camera](https://github.com/lwansbrough/react-native-camera/blob/master/README.md#getting-started).
  8 | 2. Copy QRCodeScreen.js to your project.
  9 | 
 10 | ## Usage
 11 | 
 12 | ```javascript
 13 | 'use strict';
 14 | 
 15 | var React = require('react-native');
 16 | var {
 17 |   AppRegistry,
 18 |   StyleSheet,
 19 |   Text,
 20 |   View,
 21 |   TouchableOpacity,
 22 |   NavigatorIOS,
 23 | } = React;
 24 | 
 25 | var QRCodeScreen = require('./QRCodeScreen');
 26 | 
 27 | var cameraApp = React.createClass({
 28 |   render: function() {
 29 |     return (
 30 |       <NavigatorIOS
 31 |         style={styles.container}
 32 |         initialRoute={{
 33 |           title: 'Index',
 34 |           backButtonTitle: 'Back',
 35 |           component: Index,
 36 |         }}
 37 |       />
 38 |     );
 39 |   }
 40 | });
 41 | 
 42 | var Index = React.createClass({
 43 | 
 44 |   render: function() {
 45 |     return (
 46 |       <View style={styles.contentContainer}>
 47 |         <TouchableOpacity onPress={this._onPressQRCode}>
 48 |           <Text>Read QRCode</Text>
 49 |         </TouchableOpacity>
 50 |       </View>
 51 |     );
 52 |   },
 53 | 
 54 |   _onPressQRCode: function() {
 55 |     this.props.navigator.push({
 56 |       component: QRCodeScreen,
 57 |       title: 'QRCode',
 58 |       passProps: {
 59 |         onSucess: this._onSucess,
 60 |       },
 61 |     });
 62 |   },
 63 | 
 64 |   _onSucess: function(result) {
 65 |     console.log(result);
 66 |   },
 67 | 
 68 | });
 69 | 
 70 | var styles = StyleSheet.create({
 71 |   container: {
 72 |     flex: 1,
 73 |     backgroundColor: '#F5FCFF',
 74 |   },
 75 |   contentContainer: {
 76 |     flex: 1,
 77 |     alignItems: 'center',
 78 |     justifyContent: 'center',
 79 |   }
 80 | });
 81 | 
 82 | AppRegistry.registerComponent('cameraApp', () => cameraApp);
 83 | ```
 84 | 
 85 | ## Properties
 86 | 
 87 | #### `cancelButtonVisible`
 88 | 
 89 | Values: true, false (default)
 90 | 
 91 | Use the `cancelButtonVisible` property to display or hidden cancel button on bottom of view.
 92 | 
 93 | #### `cancelButtonTitle`
 94 | 
 95 | Value: `Cancel` (default)
 96 | 
 97 | Use the `cancelButtonTitle` property to change text of button cancel.
 98 | 
 99 | #### `onSucess`
100 | 
101 | Will call the specified method when a barcode is detected in the camera's view.
102 | Event contains a string with the barcode.
103 | 
104 | #### `onCancel`
105 | Will call the specified method when cancel button was pressed.
106 | 


--------------------------------------------------------------------------------
/screenshots/screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lazaronixon/react-native-qrcode-reader/4d251dd16ead414a900bd0d3379e1f5ab76264b1/screenshots/screen.png


--------------------------------------------------------------------------------