@wojtekmaj/react-native-qr-svg NPM

downloads

React-Native-QR-SVG

Render QR codes as SVG in your React Native app.

tl;dr

Ensure that you have react-native-svg@^12.0.0 or react-native-svg@^13.0.01 installed.
Install by executing npm install @wojtekmaj/react-native-qr-svg or yarn add @wojtekmaj/react-native-qr-svg.
Import by adding import QrSvg from '@wojtekmaj/react-native-qr-svg'.
Use by adding <QrSvg value="Hello world" />.

Demo

A minimal demo page can be found in sample directory.

Getting started

Compatibility

Your project needs to use React 16.8 or later.

Need library for React? Check out React-QR-SVG.

Installation

First, ensure that you have react-native-svg@^12.0.0 or react-native-svg@^13.0.0 installed. Then, add React-Native-QR-SVG to your project by executing npm install @wojtekmaj/react-native-qr-svg or yarn add @wojtekmaj/react-native-qr-svg.

Usage

Here's an example of basic usage:

import { View } from 'react-native';
import QrSvg from '@wojtekmaj/react-native-qr-svg';

function MyApp() {
  return (
    <View>
      <QrSvg value="Hello world" />
    </View>
  );
}

User guide

QrSvg

Renders QR code as SVG.

Props

Prop name	Description	Default value	Example values
bgColor	Background color.	`"white"`	Color name: `"beige"`Color hex: `"#fefefe"`
fgColor	Foreground color.	`"black"`	Color name: `"black"`Color hex: `"#000000"`
level	Error correction level. Can be `"L"`, `"M"`, `"Q"` and `"H"`.	`"L"`	`"M"`
margin	Margin in pixels.	`0`	`4`
type	Type (size). Can be any number from 0 to 40. Set to `0` or leave as undefined to use the smallest possible size.	`0`	`10`
value	Value to render.	n/a	`"Hello world"`