Create your own React Native QR Code View (No SVG needed 😁)

This tutorial is a step by step implementation of a native QR code view on iOS and Android without the help of any library nor SVG.

Tip: A bonus awaits to be discovered at the end of this article 🙂😉.

Benchmark

Before implementing a new feature (QR code in this case), it’s recommended a do a quick benchmark on the existing libraries — we don’t need to reinvent the wheel.

The research brought to the surface multiple SDKs that propose this feature, but these libraries need additional SDKs to work correctly — react-native-svg, for example. Since we don’t use SVG on the Partoo application, because React Native does not support SVG in the same way on both platforms 😅 (IOS and Android), we thought we hit the rock bottom.

We had to make a tough decision: create a native view that generates QR codes directly in native side, then render them as an Image.

In the following screenshot, you can see the result we are going to achieve:

Enough talking, let’s get our hands on the code 🤓.

Requirements

Before digging into the subject, we assume that the following tools are already installed and setup:

• Xcode
• Android studio
• Mobile app project created

🕐 The estimated time for the implementation is approximately one hour.

IOS:

Since iOS 10 it’s possible to generate barcodes and QR Codes from string value natively thanks to CIFilter. This class produce an image representation by consuming image data, we can customize all image data with key-value objects (Apple Doc 🍏)

We are going to create two new custom views:

• QRCodeViewManager: that extends RCTViewManager in order to expose our native props and view.
• QRCodeView: the representation of our view, which extends UIImageView.

Step 1:

Inside iOS folder and with the help of Xcode we will create our headers files and implementation as following:

File structure inside Xcode

Step 2:

We will define the mandatory parameters for our view, in our case we only have two:

• backgroundColor: the background color of our QR Code in hex string.
• qrCodeValue: the value to convert to QR code, such as web URL (www.google.com) or stringified object (JSON.stringify({key: ‘value’})) …

The first minimal structure of the files looks like this:

Now we need to write the implementation of our interface and put all the logic inside it. The most important part is the native code allowing us to generate QR Code images, which is:

As you can see, this method will take a string and hex color code for the background and return an image that we can display. What we need now is to bind the returned image with our Native View, which will be guaranteed by this method

No worries 😉, I know you see a lot of self.image, self.qrCodeValue, those parameters are the definition of our previous interface, which means that in our implementation we will find them as part of our class.

The final code is then:

And that’s it for iOS, easy 😅, now let’s move on to the Android implementation.

Android:

Android is a little bit different from iOS, as we all know, and we don’t have any Java/Kotlin solution to translate string into Matrix that allows us to draw the QR Code Bitmap.

Don’t panic, we always have a solution! With a small research on Google we can find multiple SDKs offering this functionality, the most known of them is zxing https://github.com/zxing/zxing

Step 1:

Add zxing library into our app Gradle dependencies, the one inside ./android/app/build.gradle

Step 2:

In this implementation we are going with Java, you can always have the same thing with Kotlin, for that don’t hesitate to contact us if help needed 😉.

So for the second step, we are going to create:

• QRCodeView: view representation and effects
• QRCodeViewManager: React Native SimpleViewManager extension
• QRCodeViewPackage: the separate view package, if you have multiple native views inside your app you can use only one package to initialize the QrCOdeViewManager

Step 3:

Set the default exposed props, same as on iOS side we will be using more or less the same props (We will add a new one 😁)

• backgroundColor
• qrCodeValue
• size: the size of the generated qr code in DP.

The size prop is really needed here so we can know before generating the matrix, the size of the bitmap where it will be drawn, this way we don’t scale things manually after generation. Enough explication, let’s code 👨‍💻 👩‍💻

To keep the code clean we separated the React Native exposed view from the Native one, by doing this we can change our code without touching the bridging between android and react-native.

Step 4:

In this step we are going to use the zxing SDK to generate a Bit Matrix which will allow us to draw a bitmap and then set it as an image for our previous View.

As you can see, we defined a default size of 200 and white color for the background.

Step 5 (last step here):

Define the view package and add it to main application

• QRCodeViewPackage

• MainApplication

Now everything is set in the native side, next is to extract this View in React Native side.

React Native:

This is the best part, where we extract the two views we created before into one and only one React Component.

In order to have the best and most simple, maintainable and robust component, we need to start with:

• Defining the Component Props
• Separate the native requirement from rendering part (To prepare for RN new architecture integration)
• Keep the component as simple as possible (We will discuss this in another post, stay tuned ✌️)

QRCode native view

After this, we will enjoy using our QRCodeView and generate clean QR Codes without adding extra libs to our JS side.

Example:

In the following code snippet, you have the Partoo implementation to generate and display QR Codes of our clients’ businesses, in order to collect positive reviews on Google.

Small hint: you can scan the QR code from the video and leave us a 5-star review if you liked this tutorial :)

Final result.

Bonus

All this code is already available into one of our libraries, https://www.npmjs.com/package/react-native-id-qrcodeview. Just follow the README and enjoy generating QR codes!

Partoo app is also available on App store and Google Play Store.