react-native-qrcode-svg

What is react-native-qrcode-svg?

The react-native-qrcode-svg package is a React Native component for generating QR codes. It allows you to create QR codes with various customization options, including size, color, and embedded logos or images.

What are react-native-qrcode-svg's main functionalities?

Basic QR Code Generation

This feature allows you to generate a basic QR code with a given value. The value can be any string, such as a URL, text, or other data.

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

const BasicQRCode = () => (
  <QRCode
    value="https://example.com"
  />
);

Customizable QR Code

This feature allows you to customize the QR code's size, color, and background color. You can adjust these properties to fit the design requirements of your application.

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

const CustomQRCode = () => (
  <QRCode
    value="https://example.com"
    size={200}
    color="blue"
    backgroundColor="yellow"
  />
);

QR Code with Logo

This feature allows you to embed a logo or image in the center of the QR code. This is useful for branding purposes or to provide additional context within the QR code.

import QRCode from 'react-native-qrcode-svg';
import { Image } from 'react-native';

const LogoQRCode = () => (
  <QRCode
    value="https://example.com"
    logo={{ uri: 'https://example.com/logo.png' }}
    logoSize={30}
    logoBackgroundColor="transparent"
  />
);

Other packages similar to react-native-qrcode-svg

react-native-qrcode

The react-native-qrcode package is another option for generating QR codes in React Native applications. It offers basic QR code generation but lacks some of the advanced customization options available in react-native-qrcode-svg, such as embedding logos or images.

react-native-barcode-builder

The react-native-barcode-builder package supports generating various types of barcodes, including QR codes. It provides a broader range of barcode types but may not offer the same level of customization specifically for QR codes as react-native-qrcode-svg.

README

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

Android	iOS

Installation

Install dependency packages

yarn add react-native-svg react-native-qrcode-svg

Or

npm i -S react-native-svg react-native-qrcode-svg

If you are using React Native 0.60.+ go to the folder your-project/ios and run pod install, and you're done.

If not, use one of the following method to link.

Link with react-native link

If you are using React Native <= 0.59.X, link the native project:

react-native link react-native-svg

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	Description
size	100	Size of rendered image in pixels
value	'this is a QR code'	String Value of the QR code. Can also accept an array of segments as defined in Manual mode. Ex. [{ data: 'ABCDEFG', mode: 'alphanumeric' }, { data: '0123456', mode: 'numeric' }, { data: [253,254,255], mode: 'byte' }]
color	'black'	Color of the QR code
backgroundColor	'white'	Color of the background
enableLinearGradient	false	enables or disables linear gradient
linearGradient	['rgb(255,0,0)','rgb(0,255,255)']	array of 2 rgb colors used to create the linear gradient
gradientDirection	[170,0,0,0]	the direction of the linear gradient
logo	null	Image source object. Ex. {uri: 'base64string'} or {require('pathToImage')}
logoSize	20% of size	Size of the imprinted logo. Bigger logo = less error correction in QR code
logoBackgroundColor	backgroundColor	The logo gets a filled quadratic background with this color. Use 'transparent' if your logo already has its own backdrop.
logoMargin	2	logo's distance to its wrapper
logoBorderRadius	0	the border-radius of logo image (Android is not supported)
quietZone	0	quiet zone around the qr in pixels (useful when saving image to gallery)
getRef	null	Get SVG ref for further usage
ecl	'M'	Error correction level
onError(error)	undefined	Callback fired when exception happened during the code generating process

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)
   		  })
   	})
  }

Development and testing

This library comes with an Example App. You can find it in the directory ./Example.
Use the app to easily test your changes to react-native-qrcode-svg and when developing new features.

Read more details in the dedicated README.

Dependencies

PeerDependencies

• react-native-svg

Dependencies

• node-qrcode

Integrating react-native-qrcode-svg with React Native versions below 0.75

This library works seamlessly with React Native versions 0.75 and above. However, if you're using an older version of React Native (below 0.75), you might need to apply a custom transformation to your project's metro.config.js file to ensure compatibility with the TextEncoder API.

Here's how to configure the transformer for both Expo and React Native projects:

Setting Up the Transformer:

Make sure your project has a metro.config.js file. If not, create one at the root of your project.

Expo Projects:

const { getDefaultConfig } = require("expo/metro-config");

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-qrcode-svg/textEncodingTransformation")
  };

  return config;
})();

Merge the contents from your project's metro.config.js file with this config.

React Native Projects:

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const defaultConfig = getDefaultConfig(__dirname);

const config = {
  transformer: {
    babelTransformerPath: require.resolve("react-native-qrcode-svg/textEncodingTransformation"),
  },
};

module.exports = mergeConfig(defaultConfig, config);