nativescript-qr-generator

nativescript-qr-generator

NativeScript-Qr-Generator is a plugin for NativeScript which generates Qr code images.

Installation

Go to your app's root folder and execute:

ns plugin add nativescript-qr-generator

Usage

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">

    <ActionBar title="My App" icon="" />

    <GridLayout rows="*,*,*" columns="*" class="qr-example">
        <Label row="0" col="0" text="Color and size" ></Label>
        <Image src="" row="1" col="0" loaded="{{onImageLoadedBasic}}"></Image>
    </GridLayout>
</Page>

import { Observable, ImageSource, Image } from '@nativescript/core';
import { QrGenerator } from 'nativescript-qr-generator';

export class HelloWorldModel extends Observable {
  private _counter: number
  private _message: string

  constructor() {
    super();
  }

  onImageLoadedBasic(args) {
        const image = args.object as Image;
        const result = new QrGenerator().generate(`Hello World`, {
            logo: {
                path: "~/assets/fb.png",
                ratio: {
                    w: 50, h: 50
                }
            }
        });
        image.imageSource = new ImageSource(result);
    }

    onImageLoadedColors(args) {
        const image = args.object as Image;
        const result = new QrGenerator().generate('Hello World with colors', { color: '#4183d7', backgroundColor: '#67809f' });
        image.imageSource = new ImageSource(result);
    }

    onImageLoadedColorsSize(args) {
        const image = args.object as Image;
        const result = new QrGenerator().generate('Hello World with colors and custom size', { size: { width: 100, height: 100 }, color: '#fbd90e', backgroundColor: '#0d0c0c' });
        image.imageSource = new ImageSource(result);
    }
}

Usage Angular

  import { Component } from "@angular/core";
  import { ImageSource } from "@nativescript/core";
  import { Image } from "@nativescript/core";
  import { QrGenerator } from "nativescript-qr-generator";

  @Component({
      selector: "ns-main",
      template: "<Image src="" (loaded)="onImageLoaded($event)"></Image>"
  })
  export class AppComponent {

      constructor() {} 
      
      onImageLoaded(){
          const image = args.object as Image;
          const result = new QrGenerator().generate('Hello World');
          image.imageSource = new ImageSource(result);
      }
  }

API

Property	Default	Description
value	-	Value to generate Qr code
size.width	200	The image's width
size.height	200	The image's height
color	'#000000'	The Qr's color
backgroundColor	'#FFFFFFF'	The background's color
logo	none	This new property will add your logo on top of the generated qr-code, the plugin will manage to center the logo, you may want to play with the ratio property in case of more complex qr-code
logo.path	none	if path not set the plugin will take the appIcon as logo
logo.ratio.w	none	set the width of the logo
logo.ratio.h	none	set the height of the logo
logo.ratio.x	none	set the x cordinate to position the logo
logo.ratio.x	none	set the y cordinate to position the logo

Acknowledgements

This plugin wraps the following native Qr generators libraries:

Android: https://github.com/kenglxn/QRGen
iOS: https://github.com/gscarrone/iOS-QR-Code-Generator