Quiet zone for QR generation in iOS

Steve Dao
NE Digital
Published in
3 min readAug 15, 2021

--

I’m debugging the FairFrice iOS app

A nice day, while developing a new payment feature in our FairPrice iOS project, my boss asked me about the “quiet zone” of the QR code image which we’re using. As I remember, while generating a QR code image by using the standard Apple CoreImage library, Apple doesn’t support that parameter:

Apple documentation for QR code generating

Then I had to research about that parameter, just found that quiet zone is a clear area around a symbol where nothing is printed. QR Code requires a four-module wide margin at all sides of a symbol.

Quiet zone on Barcode & QR code

The default quiet zone while generating a QR on iOS is 1x wide, the background color is white so in case if the parent view background color is also white then the quiet zone will be expanded implicitly. Our old design is in this case so we don’t have any issues with it.

A nice day then, our designers changed the parent view background color to gray, now we can see the quiet zone separately! From this point, my boss concerned about it & asked me to increase the quiet zone to four-module wide as the recommendation.

Quiet zone with parent view background color

I told him that iOS doesn’t support that parameter natively, he didn’t believe it because that parameter is a standard specification of QR code. I brought this concern to an Apple engineer who comes from CoreImage team to discuss:

I’m on the 1–1 call with an Apple engineer

He said this “legacy” method has been developed for a long time ago as well as he doesn’t know why they didn’t support the quiet zone parameter from the beginning. He asked me to create a request ticket, CoreImage team will implement if there’re many requests.

Of course, we can’t wait them! My colleague Li Hao found a way to detect the module wide from the current QR code image’s pixels then we can increase the quiet zone precisely.

In FairPrice, we’re configuring this parameter remotely, if there’re any reports from users about the readable of the QR code then we can give a try by increase the quiet zone without updating the source code.

Demonstrate how to use the MarginQR

We decided to create a library publicly so you guys can easily to use: https://github.com/developerntuc/MarginQR

Hope this is helpful for you guys in another nice day 😉

--

--