Skip to content
This repository has been archived by the owner on Dec 11, 2018. It is now read-only.

lazaronixon/react-native-qrcode-reader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 

Repository files navigation

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.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published