npmpackage.info

Gathering detailed insights and metrics for react-native-circle-qrcode-svg

react-native-circle-qrcode-svg - 6.1.12 | npmpackage.info

react-native-circle-qrcode-svg

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

6.1.12

1,111

MIT

JavaScript

156.51 kB

3,474 4.1

Installations

npm install react-native-circle-qrcode-svg

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

16.14.0

NPM Version

6.14.16 Score

39.3

Supply Chain

28.9

Quality

66.3

Maintenance

Vulnerability

93.6

License

Pull Requests

Open

13

Total

92

Closed

32

Merged

47

Issues

Open

37

Total

145

Closed

108

Releases

Release 6.1.1

6.1.1

Updated on Mar 17, 2021

Release 5.2.0

5.2.0

Updated on Aug 29, 2019

Release 5.1.1

5.1.1

Updated on Sep 10, 2018

Release 5.1.0

5.1.0

Updated on Jul 05, 2018

Release 5.0.7

5.0.7

Updated on Jun 29, 2018

Release 5.0.6

5.0.6

Updated on Jan 04, 2018

View All 20 releases

Languages

JavaScript

TypeScript

Ruby

Objective-C

Kotlin

Objective-C++

JavaScript (48.32%)

TypeScript (17.49%)

Ruby (10.31%)

Objective-C (8.7%)

Kotlin (8.47%)

Objective-C++ (6.72%)

Developer

awesomejerry

Download Statistics

Total Downloads

3,474

Last Day

Last Week

Last Month

Last Year

472

GitHub Statistics

MIT License

1,111 Stars

352 Commits

222 Forks

44 Watchers

14 Branches

182 Contributors

Updated on Jun 05, 2025

Maintainers

View All 182 Contributors

Package Meta Information

Latest Version

6.1.12

Package Id

react-native-circle-qrcode-svg@6.1.12

Unpacked Size

156.51 kB

Size

91.07 kB

File Count

NPM Version

6.14.16

Node Version

16.14.0

Total Downloads

Cumulative downloads

Total Downloads

3,474

Last Day

Compared to previous day

Last Week

-83.9%

Compared to previous week

Last Month

22.5%

Compared to previous month

Last Year

10.3%

472

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

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

Android	iOS

Installation

Install dependency packages

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

1npm 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:

1react-native link react-native-svg

Examples

1import QRCode from 'react-native-qrcode-svg';
2
3// Simple usage, defaults for all but the value
4render() {
5  return (
6    <QRCode
7      value="http://awesome.link.qr"
8    />
9  );
10};

1// 30px logo from base64 string with transparent background
2render() {
3  let base64Logo = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAA..';
4  return (
5    <QRCode
6      value="Just some string value"
7      logo={{uri: base64Logo}}
8      logoSize={30}
9      logoBackgroundColor='transparent'
10    />
11  );
12};

1// 20% (default) sized logo from local file string with white logo backdrop
2render() {
3  let logoFromFile = require('../assets/logo.png');
4  return (
5    <QRCode
6      value="Just some string value"
7      logo={logoFromFile}
8    />
9  );
10};

1// get base64 string encode of the qrcode (currently logo is not included)
2getDataURL() {
3  this.svg.toDataURL(this.callback);
4}
5
6callback(dataURL) {
7  console.log(dataURL);
8}
9
10render() {
11  return (
12    <QRCode
13      value="Just some string value"
14      getRef={(c) => (this.svg = c)}
15    />
16  );
17}

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:

1import { CameraRoll , ToastAndroid } from "react-native"
2import RNFS from "react-native-fs"
3...
4
5  saveQrToDisk() {
6   	this.svg.toDataURL((data) => {
7   		RNFS.writeFile(RNFS.CachesDirectoryPath+"/some-name.png", data, 'base64')
8   		  .then((success) => {
9   			  return CameraRoll.saveToCameraRoll(RNFS.CachesDirectoryPath+"/some-name.png", 'photo')
10   		  })
11   		  .then(() => {
12   			  this.setState({ busy: false, imageSaved: true  })
13   			  ToastAndroid.show('Saved to gallery !!', ToastAndroid.SHORT)
14   		  })
15   	})
16  }

Dependencies

PeerDependencies

react-native-svg

Dependencies

node-qrcode

If you like this project, please consider buy me a coffee :)

https://www.buymeacoffee.com/LquC7mid5

No vulnerabilities found.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

9

Pinned-Dependencies

Determines if the project has declared and pinned its dependencies.

2

Code-Review

Determines if the project requires code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has a CII Best Practices Badge.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Security-Policy

Determines if the project has published a security policy.

0

Dependency-Update-Tool

Determines if the project uses a dependency update tool.

0

Fuzzing

Determines if the project uses fuzzing.

Score

4.1

/10

Last Scanned on 2022-08-15

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

react-native-circle-qrcode-svg

Installations

Developer Guide

Yes

CommonJS

16.14.0

6.14.16

Score

Pull Requests

13

92

32

47

Issues

37

145

108

Releases

Languages

Developer

awesomejerry

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

3,474

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

react-native-qrcode-svg

Features

Installation

Link with react-native link

Examples

Props

Saving generated code to gallery

Example for Android:

Dependencies

PeerDependencies

Dependencies

10

10

10

10

9

2

0

0

0

0

0

0

0

4.1

/10

Link with `react-native link`