Ever found yourself needing to whip up a QR code on the fly within your React Native app, or perhaps scan one from an image? It's a common requirement, especially with the rise of two-factor authentication, event ticketing, and quick data sharing. Thankfully, the development community has provided some neat tools, and one that stands out is rn-qr-generator.
This isn't just another library; it's designed to be a robust solution for both generating and detecting QR codes, and importantly, it plays nicely with the latest React Native architectures. If you're working with React Native 0.71.0 or newer, you'll be happy to know it supports the New Architecture (TurboModules and Fabric) out of the box. For those still on older versions or preferring the legacy architecture, it's got you covered too, though you might need to pin to a specific older version like 1.4.5 for optimal compatibility.
Getting started is pretty straightforward. A simple npm install rn-qr-generator or yarn add rn-qr-generator usually does the trick. Then, for iOS, a quick pod install in your ios directory is all that's needed. If you're diving into the New Architecture, the library is designed to work automatically, provided your project is configured correctly for it (look for RCT_NEW_ARCH_ENABLED=1 in your Podfile for iOS or newArchEnabled=true in gradle.properties for Android).
For those on the legacy path, there's a bit more manual setup involved, particularly for Android and iOS, which involves linking the library's project files and making some adjustments in your MainActivity.java or settings.gradle and build.gradle files. It's a bit more hands-on, but the documentation lays it out clearly.
Once installed, the usage is quite intuitive. Generating a QR code is as simple as calling RNQRGenerator.generate(). You pass in an object with the value you want to encode (like a URL or a piece of text), along with the desired width and height. The library then returns a promise that resolves with an object containing the uri of the generated image, its dimensions, and optionally, a base64 representation. You can even customize the backgroundColor, color, and add padding for a more polished look. There's also a correctionLevel option, which is handy for ensuring your QR code can still be read even if it's partially damaged or obscured – 'H' (high) is the default, offering the best error correction.
On the flip side, detecting QR codes within an image is equally accessible. The RNQRGenerator.detect() method takes either a uri to an image file or its base64 representation. It returns a promise that, upon success, gives you an array of values found within the image. This is incredibly useful for scanning QR codes from photos or other sources within your app.
What's particularly neat is the TypeScript support. If you're using TypeScript, you can import specific types like QRCodeGenerateOptions and QRCodeGenerateResult, making your code more type-safe and easier to manage. This means you can define your generation options with clear types, like specifying the correctionLevel as 'H', 'Q', 'M', or 'L'.
Beyond standard QR codes, the library also boasts support for a wide array of other barcode types for decoding, including various UPC, EAN, Code 39, Code 128, and even Data Matrix and PDF 417 (though some are in beta). This broad compatibility makes rn-qr-generator a versatile tool for any app dealing with scannable information.
Whether you're building a simple app to share contact details or a more complex system that relies on QR code scanning for authentication, rn-qr-generator offers a reliable and well-documented path forward. It bridges the gap between powerful QR code functionality and the dynamic world of React Native development.
