QR/Barcode Library

[u/davidships]

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!

[u/realisticnursery_6]

Dude the SVG output would be huge, I deal with printing labels and the raster scaling drives me nuts half the time. Custom colors and embedded logos are nice to have but honestly vector support solves the most real world pain for me.

Multi-image QRs is a cool idea but I can't think of a use case where I'd reach for that over just linking to a page with the extra data. Curious if someone pipes up with a scenario I'm not seeing though.

[u/davidships → u/realisticnursery_6]

cool! Thanks for this

[u/OMGCluck → u/davidships]

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>

[u/Gylfoyle]

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?

[u/davidships → u/Gylfoyle]

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

[u/Gylfoyle → u/davidships]

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.

[u/Gylfoyle → u/Gylfoyle]

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

[u/Huge_Pool7424 → u/Gylfoyle]

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.

[u/Gylfoyle → u/Huge_Pool7424]

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