Creating QR code scanning app with React Native

QR codes came into play in place of traditional barcodes. Although these were rarely used, now QR codes are used nearly everywhere for fetching data. Have you wondered what takes a developer of react native app development company to build a QR code scanner app on a mobile device? Let’s check out the steps in detail.

Pre-required learnings 

If you  have already worked on React Native projects, you may be familiar with the  importance of the softwares like Node.js, Virtual device or emulator and Visual studio code. If you have not, firstly need to install all the  softwares before getting started with this current  project. If you are new to this React Native app development journey, check this article to get a guided step. 

Secondly,  you have  to get a fair knowledge  of building a simple React Native app. Get your concept clear from  this article. 

Use of third-party React Native library

For building a QR code scanner, I have  installed two third-party libraries from  the npm  site. 

They are react-native-qrcode-scanner and react-native-camera. A QR code scanner will require a camera component which we will  import from react-native-camera. On the other hand, you need to get  the native QRCodeScanner  from react-native-qrcode-scanner. For both the  React Native  component, you have to import it  from  the respective third-party npm package. Most importantly you have to consider the compatibility of the package and the React Native version you are using. 

The popularity of the React Native framework over the years  has been possible due to its open-source criteria. You will find gigantic  support from  the React Native community. The availability of third-party plugins for the React Native project is because of the  contributions from  the entire  community. This is  one of the  benefits  using  which the React Native  experts and react native app development companies  create high utility  mobile  apps. 

Detailed understanding of the code syntax

import {StyleSheet, Text, View,TouchableOpacity, Linking } from ‘react-native’

import React from ‘react’

import QRCodeScanner  from ‘react-native-qrcode-scanner’;

import { RNCamera } from ‘react-native-camera’;

You will require some React Native  components to execute the task. However, for this you have to  import the component from the  related package and add it in the first few lines.  As you can see, I used Text, View, TouchableOpacity, Linking and styleSheet  from the ‘react-native’ package. It imported QRCodeScaner and RNCamera from  react-native-qrcode-scanner and react-native-camera respectively. 

export default function App() {

  const onSuccess = e => {


    .catch(err =>

      console.error(‘An error occurred’, err)




A constant variable onSuccess is introduced. Linking  component provides a  general interface  compatible with outgoing and incoming app links. Here, the syntax opens a web link  in  the  browser  after you  scan the given QR code  with the  scanner.  console.log() and console.error() are used  for logging and err respectively. You can also use  console.log()  for printing the error. However,  for better clarity, I have followed this approach. 

 return (





This   code snippet have props such as onRead, reactivate and showMarker. I have used these props as arguments to the QRCodeScanner. The argument onRead is given a onSuccess value. It  is a callback property which will open the URL linked with the QR codes in the net browser. showMarker is true since I wanted to  show a marker on  the screen surrounding  the QR code  when detected. Lastly, setting reactivate as true will let users scan multiple codes without any hassle. This implies the scanner will be reactivated to scan another code when the previous code is scanned successfully. 



Here, both flashMode and QRCodeSacnner are considered as arguments. With flashMode prop, I have set the mode of the flash as auto.


        <Text style={styles.centerText}>

          Go to <Text style={styles.textBold}></Text>{‘ ‘}

          on your computer and scan the QR code.




      <TouchableOpacity style={styles.buttonTouchable}>

        <Text style={styles.buttonText}>OK. Got it!</Text>






 The syntax specifies what the topContent and bottomContent holds. The content at the top has a text element “Go to on your computer and scan the QR code”  where  the text element “” is bold.  The content at the bottom  has a touchable button with a text “OK. Got it!”

const styles = StyleSheet.create({

  centerText: {

    flex: 1,

    fontSize: 18,

    padding: 32,

    color: ‘#777’


  textBold: {

    fontWeight: ‘500’,

    color: ‘#000’


  buttonText: {

    fontSize: 21,

    color: ‘rgb(0,122,255)’


  buttonTouchable: {

    padding: 16



Here, you will learn how you can use the StyleSheet for different content (centerText, textBold, buttonText and  buttonTouchable). The above given are the parameters (padding, color, fontSize and fontWeight) I have used to design the contents or you can say elements. 

Running the virtual device or emulator

Open a terminal or the  command prompt. Run two commands: npm install and npx react-native run-android. npm install will install all the dependencies you may need to run  the app while npx react-native run-android will start the emulator. 

Once the emulator starts, you will see a screen given below. 

Running the virtual device or emulator

Give permissions as it asks for. Finally you will start the QR code scanner on  your emulator.  Use the mouse and the keyboard keyW, A, S, D, Q, and E for moving the camera.  


The process of building QR code scanner may be difficult but once you get  your hands on  the code editor and and the codebase, it will be exciting. Also, a fair understanding about the React Native third-party plugins and React Native component will also help you in  this journey. 


Leave a Reply

Your email address will not be published. Required fields are marked *