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

react-native-svg is built-in with Expo.

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

Name	Default	Type	Description
size	100	number	Size of rendered image in pixels
value	'this is a QR code'	string	Value of the QR code
color	'black'	string	Color of the QR code
backgroundColor	'white'	string	Color of the background
logo	null	source	Image source object. Ex. {uri: 'base64string'} or {require('pathToImage')}
logoSize	20% of size	number	Size of the imprinted logo. Bigger logo = less error correction in QR code
logoBackgroundColor	backgroundColor	string	The logo gets a filled quadratic background with this color. Use 'transparent' if your logo already has its own backdrop.
logoMargin	2	number	logo's distance to its wrapper
logoBorderRadius	0	number	the border-radius of logo image (Android is not supported)
getRef	null	func	Get SVG ref for further usage
ecl	'M'	one of 'L', 'M', 'Q', 'H'	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

• react-native-svg

Dependencies

• node-qrcode