Overview
An open-source, customizable QR code generator for React Native. Built on top of react-native-svg, it offers styling options that weren't available in existing libraries: custom colors, gradients, logo support, corner radius controls, and detection marker styling.
Why
On the Shop Pay Instalments feature for the Point of Sale app, there is a moment where the user (like the cashier) needs to ask the customer to scan a QR code to confirm the details of the instalment and finalise the transaction. This QR code can be surfaced either on the POS app directly, or through an external display, using the Customer View app.
At the time, the design team on both the POS and Customer View apps wanted the QR codes to look like the ones created for branding at Shopify, with rounded detection markers, round pattern styling and a rounded border on the logo. None of the existing libraries offered this level of customization, while still being performant, as we were generating the QR codes on the fly, so I decided to build my own, in my spare time.
Features
- Custom colors and background colors
- Linear gradient support
- Logo embedding (SVG or PNG)
- Configurable corner radius on the QR code and detection markers
- Error correction levels
- Quiet zone (margin) control
The stack
The library was built with React Native and TypeScript, and it's distributed through Npm. It builds on top of qrcode and react-native-svg .