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" |

You can also specify all the props that are valid for the <svg> React element (e.g. style, className or width).

License

The MIT License.

Author

Thank you

This project wouldn't be possible without the awesome work of Dan Homola [email protected] who created its original version.