React-native-qr-svg NPM

react-native-qr-svg 📱

A QR Code generator for React Native based on react-native-svg. Effortlessly create QR codes with a style reminiscent of modern designs.

Installation 🚀

Start by installing the necessary packages:

yarn add react-native-svg react-native-qr-svg

Overview 🌟

This library provides a straightforward way to generate QR codes within React Native applications. The QR codes produced have a modern aesthetic, perfect for various design contexts.

Customization 🎨

This library allows for easy customization of QR codes, enabling developers to adjust dot color, background color, frame size, and content within the code.

Example 🖼️

Props

Property	Description	Type	Default Value
`value`	The string to be converted into a QR code.	`string`	(Required)
`frameSize`	The size of the frame in which the QR code will fit.	`number`	(Required)
`contentCells`	The number of content cells in the QR code.	`number`	`6`
`errorCorrectionLevel`	The error correction level for the QR code.	`low, medium, quartile, high, L, M, Q, H, M`	`M`
`backgroundColor`	The background color of the QR code.	`string`	`'#ffffff'`
`dotColor`	The color of the dots (circles) in the QR code.	`string`	`'#000000'`
`style`	Style for the container of the QR code.	`StyleProp<ViewStyle>`
`contentBackgroundRectProps`	Props for the background rectangle of the QR code content.	`RectProps`
`content`	Additional content to be rendered within the QR code.	`React.ReactNode`
`contentStyle`	Style for the additional content within the QR code.	`StyleProp<ViewStyle>`
`figureCircleProps`	Props for the circular figures within the QR code.	`CircleProps`
`figurePathProps`	Props for the path figures within the QR code.	`PathProps`
`renderer`	Custom renderer for rendering QR code figures.	`CustomRenderer`	`defaultRenderer`
`gradientColors`	Array of colors for gradient fill of the QR code.	`ColorValue[]`
`gradientProps`	Props for configuring the gradient of the QR code.	`LinearGradientProps`

Example 🛠️

Implement QR codes easily in your React Native app:

Full example use can find here.

import React from 'react';

import { StyleSheet, View, Text } from 'react-native';
import {
  QrCodeSvg,
  plainRenderer,
} from 'react-native-qr-svg';

const SIZE = 170;
const CONTENT = 'Hello world!';

export default function App() {
  return (
    <View style={styles.root}>
      <View style={styles.content}>
        <QrCodeSvg
          style={styles.qr}
          value={CONTENT}
          frameSize={SIZE}
          contentCells={5}
          content={<Text style={styles.icon}>👋</Text>}
          contentStyle={styles.box}
        />
        <QrCodeSvg
          style={styles.qr}
          gradientColors={['#0800ff', '#ff0000']}
          value={CONTENT}
          frameSize={SIZE}
        />
        <QrCodeSvg
          style={styles.qr}
          value={CONTENT}
          frameSize={SIZE}
          contentCells={5}
          content={<Text style={styles.icon}>💻</Text>}
          dotColor="#ffffff"
          backgroundColor="#000000"
          contentStyle={styles.box}
        />
        <QrCodeSvg
          style={styles.qr}
          renderer={plainRenderer}
          value={CONTENT}
          frameSize={SIZE}
        />
        <QrCodeSvg
          style={styles.qr}
          renderer={customRenderer}
          value={CONTENT}
          frameSize={SIZE}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  content: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  icon: {
    fontSize: 20,
  },
  qr: {
    padding: 15,
  },
});