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.

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';
...
render() {
  ...
  return (
    ...
    <QRCode
      size={300}
      value="this is a qr code."
      color="blue"
      backgroundColor="red"
    />
    ...
  );
  ...
};
...

react-native-svg

javascript-qrcode