A QR Code Generator for React Native

A QR Code Generator for React Native

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

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.

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

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


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

https://www.buymeacoffee.com/LquC7mid5

Download Details:

Author: awesomejerry

Source Code: https://github.com/awesomejerry/react-native-qrcode-svg

react-native react mobile-apps

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Native Mobile App Development

Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.

How React Native Is Shaping Mobile App Development

Are you a mobile app developer looking for more efficient tools for your projects? Mobile app development is getting tougher and tougher as the market continues to grow. As a developer, you need to develop Apps which meet the demands of your users. To achieve this, adopt the right tools, like the React Native development framework.

Top React Native Mobile App Development Companies in USA

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.

Which is the best React Native app development company in New York?

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.