How to build a QR Code Reader using ReactNative

May 13, 2019
hackajob Staff

A powerful framework that allows you to build native mobile apps with JavaScript, ReactNative uses the same design as React and helps you to compose a rich mobile UI by using declarative components. For this QR Code Reader tutorial, we’re assuming that you already know the basics of ReactNative, and you’ll need to have a development environment running:

Getting Started

Let’s start a new RN application:

react-native init qrCodeApp && cd qrCodeApp

Now, we’ll need to install the following libraries in order to build our app:

•   react-native-qrcode-scanner

  react-navigation

•   react-native-camera

First, install the react-native-camera library:

npm install react-native-camera —save

Then link the library with the native platform:

These commands should be enough to set up the react-native-camera. If not, take a look at this repository. react-native-camera is required by the react-native-qrcode-scanner, and this is our next installation:

npm install react-native-qrcode-scanner —save

Then link the library:

For iOS you need to add the “Privacy - Camera Usage Description” key to the info.plist file, this can be found in ‘qrCodeApp/ios/qrCodeApp/Info.plist’. Add the code below:

<key>NSCameraUsageDescription</key>

<string>Your message to user when the camera is accessed for the first time</string>

For Android 7 and higher you'll need to add the “Vibration” permission to the AndroidManifest.xml. This should be found in ‘qrCodeApp/android/app/src/main/AndroidManifest.xml’. Add the code below:

<uses-permission android:name=“android.permission.VIBRATE"/>

Then insert the line below in ‘android/app/build.gradle’ inside the defaultConfig block:

android {

...

defaultConfig {

...

missingDimensionStrategy 'react-native-camera', 'general' <-- insert this line

}

}

After this, make sure to add the required permissions. We’ll link these with the native platform, so use the following command:

Finally, we’ll need to navigate between screens, so install the react-navigation library:

npm install react-navigation —save

And:

npm install react-native-gesture-handler —save

Then:

Now run the application:

react-native run-ios

Or, if you are using an Android SDK:

react-native run-android

You should have an app that looks a little something like this:

If you are reading the Welcome to React Native text, you did everything right until now, so let's begin to code.

The Home Screen

Create a new folder (let's call it “src”) and inside the src folder create two new files: Routes.js and Home.js.

Your Home.js should look like this:

For the Routes.js, let's keep it simple. This component will import the react-navigation lib and create the stack that we'll use to navigate between screens. For this app we don’t need to configure Header, Title or Navigation Bars. We’ll then create the app container and export it as a default:

In the App.js, we’ll import the Routes.js file and use it like so:

At this point your app will show the home Screen:

Let’s create another file in the src folder and name it QRCodeScannerScreen.js. For now it will look exactly like the home screen, but make sure to change the title from 'Home' to 'QRCodeScannerScreen'. Add this to the existing stack in Routes.js:

In Home.js, we’ll add a button to navigate to our new screen, the QRCodeScanner:

After this, our app will have two screens, and we’ll set the second one to scan our QRCode:

Reading the QRCode

For the second part of this tutorial, we’ll adjust our QRCodeScannerScreen to scan the QR Code and pass the data to another screen where it will be displayed.

First, in the QRCodeScannerScreen.js, let’s import the react-native-qrcode-scanner library:

Using the render method, we’ll add the QRCodeScanner tag. This will have the following props:

•   cameraStyle: this is where we'll define the height of the element. We'll use a native component from React Native and Dimensions, so just import this.

•   onRead: we'll declare this function and it'll be called when we successfully read a QRCode.

•   showMarker: this one is a green marker on the screen centre.

•   checkAndroid6Permissions: this checks permissions for Android6.

•   ref: the element will ref itself as a scanner.

Next, we’ll declare the function that will handle the QR Code data, but before we work on it, you'll need to know how this element works (especially when we are working with a stack navigation). When we read the data and call the next screen to show it, the actual screen won’t scan a QR Code again (unless we reactivate it) so we'll send our code to the next screen. This won't include just the read data, but also the scanner element. If you want to scan another QR Code then reactivate the scanner and pop it on the QRCodeData screen.

Add the onSuccessFunction to the following:

Showing Data

Create a new file and name it: QRCodeData.js.

We’ll use the ComponentDidMount method to load our state, and at the centre we’ll show the read data, as well as two buttons. One button will read a QR Code again and the other will navigate our return to the home screen:

Don't forget to add the QRCodeData screen to our stack:

Test your app by installing it in your device; it should run like so:

We created this tutorial to show how simple it is to implement a QR code scanner. You can find the final code here; and in the meantime make sure to look out for more technical tutorials from hackajob HQ!