Skip to content
This repository has been archived by the owner. It is now read-only.
No description, website, or topics provided.
JavaScript
Branch: master
Clone or download
lazaronixon Merge pull request #3 from ravenlp/master
Fix for the Element type is invalid error
Latest commit 4d251dd Apr 18, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
screenshots Readme update Apr 23, 2015
QRCodeScreen.js
README.md Readme update Apr 23, 2015

README.md

react-native-qrcode-reader

A simple QR Code Reader Screen implemented with react-native-camera.

qrcode-reader

Getting started

  1. Install react-native-camera.
  2. Copy QRCodeScreen.js to your project.

Usage

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  NavigatorIOS,
} = React;

var QRCodeScreen = require('./QRCodeScreen');

var cameraApp = React.createClass({
  render: function() {
    return (
      <NavigatorIOS
        style={styles.container}
        initialRoute={{
          title: 'Index',
          backButtonTitle: 'Back',
          component: Index,
        }}
      />
    );
  }
});

var Index = React.createClass({

  render: function() {
    return (
      <View style={styles.contentContainer}>
        <TouchableOpacity onPress={this._onPressQRCode}>
          <Text>Read QRCode</Text>
        </TouchableOpacity>
      </View>
    );
  },

  _onPressQRCode: function() {
    this.props.navigator.push({
      component: QRCodeScreen,
      title: 'QRCode',
      passProps: {
        onSucess: this._onSucess,
      },
    });
  },

  _onSucess: function(result) {
    console.log(result);
  },

});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  contentContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  }
});

AppRegistry.registerComponent('cameraApp', () => cameraApp);

Properties

cancelButtonVisible

Values: true, false (default)

Use the cancelButtonVisible property to display or hidden cancel button on bottom of view.

cancelButtonTitle

Value: Cancel (default)

Use the cancelButtonTitle property to change text of button cancel.

onSucess

Will call the specified method when a barcode is detected in the camera's view. Event contains a string with the barcode.

onCancel

Will call the specified method when cancel button was pressed.

You can’t perform that action at this time.