Awesome
###Deprecated, please refer to https://github.com/lwansbrough/react-native-camera for barcode/QRcode scanner
ReactNativeBarcodeScanner
Implemented a barcode scanner with support of react native technology
Some screen shots here:
Getting started (TBV)
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
➜ReactNativeBarcodeScanner
and addReactNativeBarcodeScanner.xcodeproj
- In XCode, in the project navigator, select your project. Add
libReactNativeBarcodeScanner.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Click
ReactNativeBarcodeScanner.xcodeproj
in the project navigator and go theBuild Settings
tab. Make sure 'All' is toggled on (instead of 'Basic'). Look forHeader Search Paths
and make sure it contains both$(SRCROOT)/../react-native/React
and$(SRCROOT)/../../React
- mark both asrecursive
. - Run your project (
Cmd+R
)
Usage
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.