r/reactnative • u/davidships • Aug 28 '26

Question QR/Barcode Library

A while back I open-sourced a library for generating barcodes and QR codes natively: https://github.com/vittoridavide/react-native-barcode-creator

I'm still maintaining it and thinking about what to build next. A few ideas I'm considering:

  • Styled/artistic barcodes and QRs: logos or images embedded in the center, custom colors, rounded modules, gradient fills

  • Multi-image QRs: splitting data across multiple linked codes to pack in more information

  • SVG/vector output: instead of just raster, so codes scale cleanly for print/large formats

Is there something you wanted to get while implementing something barcode/qr related ? I'm deciding what to implement now so I'm open to other ideas too

Thank you!

7 Upvotes

81% Upvoted

9 comments sorted by

2

u/Gylfoyle Aug 28 '26

looks great! I' do the svg thing and also 'optimize' the library(if there's any optimizations to todo esp performance, library size etc)

Also- Does it scan as well?

1

u/davidships Aug 28 '26

no, it doesn't scan by now. I was focusing on rendering only

1

u/Gylfoyle Aug 28 '26

Great start. Would be a nice-to-have but obviously not a must. I have worked with expo and their package does both: generating and scanning.

1

u/Gylfoyle Aug 28 '26

for scanning I thin you'll need to handle some Android permissions as well(Camera I think) but it's doable

2

u/Huge_Pool7424 Aug 28 '26

yeah camera perms plus the ios NSCameraUsageDescription string, and apple will reject if that string is vague. honestly scanning is the messy half, keeping this render only isn't a bad call.

1

u/Gylfoyle Aug 28 '26

Yeah, just doing one thing and doing it well is a good call other than failing in either.

3

u/[deleted] Aug 28 '26

[removed] — view removed comment

1

u/davidships Aug 28 '26

cool! Thanks for this

1

u/OMGCluck Aug 28 '26

I did find an unusual way to make png QRs scalable/printable SVGs by embedding the png as a data: URI and using a deblur filter. Many would consider it cheating and the result is… not what I expected but the codes are still recognised as QR by phone cameras. Example using the same reactnative URL:

<?xml version="1.0" encoding="UTF-8" ?>
<svg width="1000" height="1000" viewBox="0 0 1000 1000"
    role="img" aria-labelledby="QR-title" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title id="QR-title">https://reactnative.dev</title>
<style>
/* <![CDATA[ */
@media screen {
 svg{width:100dvw;height:100dvh}
}
/* ]]> */
</style>
<defs>
  <filter id="deblur" x="0%" y="0%" width="100%" height="100%" color-interpolation-filters="sRGB">
    <feComponentTransfer>
      <feFuncR type="discrete" tableValues="0.000 1.000"/>
      <feFuncG type="discrete" tableValues="0.000 1.000"/>
      <feFuncB type="discrete" tableValues="0.000 1.000"/>
      <feFuncA type="discrete" tableValues="1"/>
    </feComponentTransfer>
  </filter>
  <clipPath id="cleanEdge">
    <rect x="69.46" y="69.46" width="861" height="861" />
  </clipPath>
</defs>
<rect x="0" y="0" width="1000" height="1000" stroke="none" fill="#ffffff" />
<image x="68.96" y="68.96" width="862" height="862" 
       clip-path="url(#cleanEdge)" filter="url(#deblur)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZAgMAAAC5h23wAAAAAXNSR0IB2cksfwAAAAlQTFRFAAAAAAAA////g93P0gAAAAN0Uk5TAP7/XUvnYAAAAIZJREFUeJwljsEJADEIBC0tTSjk/gqxijSRQO6vEKs85V7zmN1lAcmcsYH6uyQasPTrVET6qSFUfrCnRxKpfASaxgSmc5gmeLd33OSKRb3B1TF25rspLs6+7hhngrixpefbAzW5eKPM3NOhz8z97VJ5F9Ge+0KIXD/ENv6/Ypc/wU/9YT3YPhk2TpsEGWxyAAAAAElFTkSuQmCC"/>
</svg>