0.0.1 • Published 7 years ago

react-native-qrcode-svg-triam v0.0.1

Weekly downloads
2
License
MIT
Repository
github
Last release
7 years ago

NPM circleci

react-native-qrcode-svg

A QR Code generator for React Native based on react-native-svg and javascript-qrcode.

Discussion: https://discord.gg/RvFM97v

Features

  • Easily render QR code images
  • Optionally embed a logotype

Installation

Please install react-native-svg first.

npm install react-native-svg --save
react-native link react-native-svg
npm install react-native-qrcode-svg --save

Examples

import QRCode from 'react-native-qrcode-svg';

//Simple usage, defaults for all but the value
render() {
  return (
    <QRCode
      value="http://awesome.link.qr"
    />
  );
};
// 30px logo from base64 string with transparent background
render() {
  let base64Logo = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAA..';
  return (
    <QRCode
      value="Just some string value"
      logo={{uri: base64Logo}
      logoSize={30}
      logoBackgroundColor='transparent'
    />
  );
};
// 20% (default) sized logo from local file string with white logo backdrop
render() {
  let logoFromFile = require('../assets/logo.png');
  return (
    <QRCode
      value="Just some string value"
      logo={logoFromFile}
    />
  );
};
// get base64 string encode of the qrcode (currently logo is not included)
getDataURL() {
  this.svg.toDataURL(this.callback);
}
callback(dataURL) {
  console.log(dataURL);
}
render() {
  return (
    <QRCode
      value="Just some string value"
      getRef={(c) => (this.svg = c)}
    />
  );
}

Props

NameDefaultDescription
size100Size of rendered image in pixels
value'this is a QR code'Value of the QR code
color'black'Color of the QR code
backgroundColor'white'Color of the background
logonullImage source object. Ex. {uri: 'base64string'} or {require('pathToImage')}
logoSize20% of sizeSize of the imprinted logo. Bigger logo = less error correction in QR code
logoBackgroundColorbackgroundColorThe logo gets a filled quadratic background with this color. Use 'transparent' if your logo already has its own backdrop.
logoMargin2logo's distance to its wrapper
logoBorderRadius0the border-radius of logo image (Android is not supported)
getRefnullGet SVG ref for further usage
ecl'M'Error correction level

Saving generated code to gallery

Note: Experimental only ( not tested on iOS) , uses getRef() and needs RNFS module

npm install --save react-native-fs

Example for Android:

import { CameraRoll , ToastAndroid } from "react-native"
import RNFS from "react-native-fs"
...

  saveQrToDisk() {
   	this.svg.toDataURL((data) => {
   		RNFS.writeFile(RNFS.CachesDirectoryPath+"/some-name.png", data, 'base64')
   		  .then((success) => {
   			  return CameraRoll.saveToCameraRoll(RNFS.CachesDirectoryPath+"/some-name.png", 'photo')
   		  })
   		  .then(() => {
   			  this.setState({ busy: false, imageSaved: true  })
   			  ToastAndroid.show('Saved to gallery !!', ToastAndroid.SHORT)
   		  })
   	})
  }

Dependencies

PeerDependencies

Dependencies