Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
react-native-qrcode-svg
Advanced tools
A QR Code generator for React Native based on react-native-svg and javascript-qrcode.
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.
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"
/>
);
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.
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.
A QR Code generator for React Native based on react-native-svg and javascript-qrcode.
Discussion: https://discord.gg/RvFM97v
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
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)}
/>
);
}
Name | Default | Description |
---|---|---|
size | 100 | Size 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 |
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) |
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 |
Note: Experimental only ( not tested on iOS) , uses getRef() and needs RNFS module
npm install --save react-native-fs
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)
})
})
}
FAQs
A QR Code generator for React Native based on react-native-svg and javascript-qrcode.
The npm package react-native-qrcode-svg receives a total of 117,416 weekly downloads. As such, react-native-qrcode-svg popularity was classified as popular.
We found that react-native-qrcode-svg demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.