Skip to main content

react-native-qr-svg

QR codes for React Native and the web, drawn with react-native-svg. Style them freely (shapes, gradients, custom eyes, logos) without giving up the one thing a QR code must do: scan.

rounded
liquid + gradient
dots + colored eyes
👋
logo

Every picture on this site is rendered in your browser by the library's own geometry code.

import { QrCodeSvg } from 'react-native-qr-svg';

<QrCodeSvg value="https://example.com" size={200} />;

Why this library​

  • Seamless shapes. Connected modules are merged into one outline, so there are no hairline seams between modules at any zoom level, and liquid can round inner corners too.
  • Scannable by default. Shapes whose modules don't touch get solid finder and alignment patterns, a logo raises error correction to H, and in development you get a warning when a logo or gap is too large. A test suite decodes every built-in style with a real QR decoder.
  • Lightweight. One small dependency (uqr, no transitive dependencies). Pure JavaScript, so it works in Expo Go and on the web.
  • Not only React. qrCodeToSvgString renders the same code to an SVG string: for the web, a server, sharing or saving to a file.

Next: install it, or try every option in the playground.