React-native-svg-qrcode NPM

react-native-svg-qrcode

A minimal dependency QR Code generator for React Native which works across iOS, Android and Web.

Based on react-native-qrcode-svg but without any dependencies and just a single peer dependency - react-native-svg.

Perfect for folks who already use react-native-svg in their project and want QR code functionality without bloating their bundle size.

Written in TypeScript.

Installation

yarn add react-native-svg react-native-qrcode-svg

Usage

const QR_CODE_SIZE = 262;
const QR_LOGO_SIZE = 70;

const App = () => {
  return (
    <View style={styles.container}>
      <QRCode
        size={QR_CODE_SIZE}
        value={'insert address'}
        logo={require('../assets/black_r_logo.png')}
        logoSize={QR_LOGO_SIZE}
      />
    </View>
  );
};

Props

Name	Default	Description
size	100	Size of rendered image in pixels
value	'this is a QR code'	Value of the QR code.
color	'black'	Color of the QR code
backgroundColor	'white'	Color of the background
enableLinearGradient	false	enables or disables linear gradient
linearGradient	'rgba(0, 73, 255, 1)', 'rgba(255, 255, 255, 1)'	array of 2 rgb colors used to create the linear gradient
gradientDirection	170,0,0,0	the direction of the linear gradient
logo	null	Image source object. Ex. {uri: 'base64string'} or {require('pathToImage')}
logoSize	20% of size	Size of the imprinted logo. Bigger logo = less error correction in QR code
logoBackgroundColor	backgroundColor	The logo gets a filled quadratic background with this color. Use 'transparent' if your logo already has its own backdrop.
logoMargin	2	logo's distance to its wrapper
logoBorderRadius	0	the border-radius of logo image (Android is not supported)
quietZone	0	quiet zone around the qr in pixels (useful when saving image to gallery)
ecl	'M'	Error correction level
onError(error)	undefined	Callback fired when exception happened during the code generating process