a minimalist qrcode component for react-native
JavaScript
Clone or download
Latest commit 50630e6 Jul 14, 2018
Permalink
Failed to load latest commit information.
lib fix iOS bug - rn 0.56 Jul 4, 2018
.gitignore fix: change .gitignore Nov 11, 2016
LICENSE Create LICENSE Mar 8, 2017
README.md update README.md Jul 31, 2017
index.js generate qrcode with text bgColor fgColor Nov 21, 2015
package.json 0.2.6 Aug 26, 2017
qrcode.png change qrcode.png May 26, 2016

README.md

react-native-qrcode

A react-native component to generate QRcode, not only support English.

Installation

npm install react-native-qrcode --save

Usage

'use strict';

import React, { Component } from 'react'
import QRCode from 'react-native-qrcode';

import {
    AppRegistry,
    StyleSheet,
    View,
    TextInput
} from 'react-native';

class HelloWorld extends Component {
  state = {
    text: 'http://facebook.github.io/react-native/',
  };

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          onChangeText={(text) => this.setState({text: text})}
          value={this.state.text}
        />
        <QRCode
          value={this.state.text}
          size={200}
          bgColor='purple'
          fgColor='white'/>
      </View>
    );
  };
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
        alignItems: 'center',
        justifyContent: 'center'
    },

    input: {
        height: 40,
        borderColor: 'gray',
        borderWidth: 1,
        margin: 10,
        borderRadius: 5,
        padding: 5,
    }
});

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

module.exports = HelloWorld;

Available Props

prop type default value
value string http://facebook.github.io/react-native/
size number 128
bgColor string (CSS color) "#000"
fgColor string (CSS color) "#FFF"

Licenses

All source code is licensed under the MIT License.