Implemented a barcode scanner with support of react native technology
Objective-C JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
ReactNativeBarcodeScanner.xcodeproj Refer to react-native-camera Apr 19, 2015
ReactNativeBarcodeScannerTests Initial commit Apr 19, 2015
iOS
.flowconfig Initial commit Apr 19, 2015
.gitignore Initial commit Apr 19, 2015
BarcodeScanner.js Completed the barcode scanner funtionality. Apr 19, 2015
LICENSE Initial commit Apr 19, 2015
README.md Update README.md Nov 17, 2015
index.ios.js Centralize the scanning window. Apr 19, 2015
package.json Upgrade to publish on npm Apr 19, 2015

README.md

###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:

React Native Barcode Scanner - Launcher React Native Barcode Scanner - Scanning

Getting started (TBV)

  1. npm install ReactNativeBarcodeScanner@latest --save
  2. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  3. Go to node_modulesReactNativeBarcodeScanner and add ReactNativeBarcodeScanner.xcodeproj
  4. In XCode, in the project navigator, select your project. Add libReactNativeBarcodeScanner.a to your project's Build PhasesLink Binary With Libraries
  5. Click ReactNativeBarcodeScanner.xcodeproj in the project navigator and go the Build Settings tab. Make sure 'All' is toggled on (instead of 'Basic'). Look for Header Search Paths and make sure it contains both $(SRCROOT)/../react-native/React and $(SRCROOT)/../../React - mark both as recursive.
  6. 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.