###Deprecated, please refer to https://github.com/lwansbrough/react-native-camera for barcode/QRcode scanner
Implemented a barcode scanner with support of react native technology
npm install ReactNativeBarcodeScanner@latest --save- In XCode, in the project navigator, right click
Libraries➜Add Files to [your project's name] - Go to
node_modules➜ReactNativeBarcodeScannerand addReactNativeBarcodeScanner.xcodeproj - In XCode, in the project navigator, select your project. Add
libReactNativeBarcodeScanner.ato your project'sBuild Phases➜Link Binary With Libraries - Click
ReactNativeBarcodeScanner.xcodeprojin the project navigator and go theBuild Settingstab. Make sure 'All' is toggled on (instead of 'Basic'). Look forHeader Search Pathsand make sure it contains both$(SRCROOT)/../react-native/Reactand$(SRCROOT)/../../React- mark both asrecursive. - Run your project (
Cmd+R)
All you need is to require the BarcodeScanner module and then use the <BarcodeScanner/> tag.
var BarcodeScanner = require('./BarcodeScanner');
var {
AlertIOS,
AppRegistry,
Component,
NavigatorIOS,
StyleSheet,
Text,
TouchableHighlight,
View,
} = React;
var ReactNativeBarcodeScanner = React.createClass({
getInitialState: function() {
return {
value: ''
};
},
render: function() {
return (
<View style={styles.container}>
<TouchableHighlight onPress={this._switchCamera}>
<View>
<BarcodeScanner
ref="scanner"
aspect="Fill"
type="Back"
orientation="Portrait"
onScanned={this._onScannedResult}
style={styles.barcode}
/>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={this._stopScaning}>
<Text>Stop Scaning</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this._startScaning}>
<Text>Start Scaning</Text>
</TouchableHighlight>
</View>
);
},
_switchCamera: function() {
this.refs.scanner.switch();
},
_stopScaning: function() {
this.refs.scanner.stopScanning();
},
_startScaning: function() {
this.refs.scanner.startScanning();
},
_onScannedResult: function(data) {
console.log(data);
if (this.state.value === '') {
this.setState({value: data});
AlertIOS.alert(this.state.value);
}
this.props.navigator.pop();
}
});Thanks to Loch Wansbrough (@lwansbrough) for the react-native-camera module which provided me with a great example of how to set up this module.