react-native-qrcode-view

A React Native View to display QR Codes in.

TODO

• Native Support
• Android Support
• IOS Support

Installation

All that is needed is installing through npm:

npm i react-native-qrcode-view --save

Usage

var React = require('react-native');

var QRCodeView = require('react-native-qrcode-view');

var {
AppRegistry,
StyleSheet,
View,
} = React;

var myQRCodeString = "Hi, please turn me into a qr code!";

var QRCodeDemo = React.createClass(
{

render: function()
{

return (
<View style={styles.container}>

<QRCodeView data={myQRCodeString} dimension={dimension} style={styles.qrcode} />

</View>
);
}
});

var styles = StyleSheet.create({
container:{
flex: 1,
alignItems: 'stretch',
flexDirection: 'column',
},
qrcode: {
padding: 50,
alignItems:'center',
},
});

module.exports = QRCodeDemo;

Methods

setData

Takes a string and generates a new QRCode. The data can be set by a prop or through this method after being rendered.

Options

Configuration options are specified as attributes on the <QRCodeView /> element.

Dimension (MANDATORY)

Prop dimension

This prop is mandatory and determines the width/height of the qrcode grid.

Data (OPTIONAL)

Prop: data

A plain string to be converted into a qrcode. May be set after rendering with the 'setData' method. Defaults to an empty string.

Positive Color (OPTIONAL)

Prop positiveColor

Defaults to black

This is the positive color in the qrcode.

Negative Color (OPTIONAL)

Prop negativeColor

Defaults to white

This is the negative color in the qrcode.