How to Build a QR Code Scanner App With React Native

The simplest way to build a QR code scanning app in React Native today is to use Expo and the expo-camera library, whose CameraView component scans QR and other barcodes natively. You install the package, request camera permission with the useCameraPermissions hook, set barcodeScannerSettings to QR, and handle each result in onBarcodeScanned. The rest is validation and user experience.

Key takeaways

  • expo-camera handles camera preview and QR detection; the older expo-barcode-scanner approach has been superseded.
  • Always check permission state before rendering the camera and give users a clear way to grant it.
  • Throttle or lock scanning after a hit, or the callback fires many times for one code.
  • Treat scanned data as untrusted input: validate format before acting on it.
  • Plan for offline use and low light if the app will run in warehouses, clinics or field sites.

What you need before you start

  • Node.js LTS and a code editor.
  • A new Expo project created with the official create-expo-app command.
  • A physical phone with the Expo Go app or a development build, because simulators have limited camera support.

The React Native documentation recommends using a framework such as Expo for new apps, which saves you from configuring native camera modules by hand. If you need deeper native control later, bare React Native projects can use community libraries such as VisionCamera, but most business scanners do not need that.

Create the project and add the camera package:

npx create-expo-app qr-scanner
cd qr-scanner
npx expo install expo-camera

How do you build the scanner screen?

The component below checks permission, shows the camera, scans only QR codes and locks after the first successful scan so the user can confirm the result.

import { useState } from 'react';
import { Button, Text, View, StyleSheet } from 'react-native';
import { CameraView, useCameraPermissions } from 'expo-camera';

export default function Scanner() {
  const [permission, requestPermission] = useCameraPermissions();
  const [result, setResult] = useState(null);

  if (!permission) return <View />;

  if (!permission.granted) {
    return (
      <View style={styles.center}>
        <Text>Camera access is needed to scan QR codes.</Text>
        <Button title="Allow camera" onPress={requestPermission} />
      </View>
    );
  }

  return (
    <View style={{ flex: 1 }}>
      <CameraView
        style={{ flex: 1 }}
        barcodeScannerSettings={{ barcodeTypes: ['qr'] }}
        onBarcodeScanned={result ? undefined : (scan) => setResult(scan.data)}
      />
      {result && (
        <View style={styles.panel}>
          <Text>{result}</Text>
          <Button title="Scan again" onPress={() => setResult(null)} />
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  center: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 16 },
  panel: { padding: 16, backgroundColor: 'white' },
});

Passing undefined to onBarcodeScanned once a result exists stops repeated callbacks while the code is still in view. Each scan result includes the barcode type and its data, plus bounds you can use to draw a highlight box.

Making the scanner production-ready

Validate what you scan

A QR code can contain any text, including malicious links. Decide what format your app expects, such as an asset ID pattern, a signed token or a URL on your own domain, and reject everything else with a clear message. Never open arbitrary URLs automatically.

Handle permissions and platform settings

Add a camera usage description in your app configuration so iOS shows a meaningful prompt. If a user denies permission permanently, show instructions for enabling it in device settings instead of a dead screen.

Plan for poor connectivity

Scanning works offline, but whatever you do with the result may not. Queue scans locally with a timestamp and sync when the network returns. This is the same design problem time clock apps face, which we discuss in offline time clock punching.

Design for real environments

Test in low light, with damaged or glossy labels and at different distances. Add a torch toggle (CameraView supports an enableTorch prop) and audible or haptic feedback on success.

Build checklist

ItemWhy it matters
Permission states handled (undetermined, granted, denied)Avoids blank screens and app store rejections
Scan lock or debouncePrevents duplicate records from one code
Input validationBlocks malformed or malicious payloads
Offline queueKeeps scans from being lost on weak networks
Torch and feedbackFaster, more reliable scanning on the floor
Unmount camera when screen loses focusOnly one camera preview can be active at a time
Device testing on iOS and AndroidCamera behavior differs by platform

If your team needs a scanner inside a larger workflow but lacks mobile developers, compare building from scratch with platform options; our overview of how low-code helps teams build apps quickly covers the trade-offs, and our piece on why mobile app development matters for business covers the business case.

Frequently Asked Questions

Do I need Expo to scan QR codes in React Native?

No, but it is the fastest route. Expo's camera package bundles native scanning and works with Expo Go for testing. Bare React Native apps can use community camera libraries that offer code scanning, which give more control over frame processing but require native setup on iOS and Android.

Why does onBarcodeScanned fire multiple times?

The camera analyzes frames continuously, so a code that stays in view is detected repeatedly. Store the first result in state and set the callback to undefined until the user chooses to scan again, or ignore repeat values within a short time window. This prevents duplicate records and repeated network calls.

Can the app scan barcodes other than QR codes?

Yes. The barcodeTypes array accepts other formats such as EAN-13, UPC-A and Code 128. Limit the list to the formats you actually use, because scanning fewer types reduces false reads and makes your validation logic simpler and easier to test.

Next steps

Build the screen above, test it on two physical devices, then add validation and an offline queue before connecting it to your backend. Write down the exact payload format your QR codes will use so labels and app stay in sync.

Last reviewed: October 2026.

Sources

Comments

Post a Comment

Popular Posts

Why Workday Onboarding Breaks Down for Frontline Employees

Image
The Onboarding Gap Nobody Talks About Workday's onboarding module is well-designed for its intended audience: office-based, desk workers with reliable computer access, personal email addresses, and the digital literacy to navigate a web-based portal. For this population, Workday onboarding works well, it automates tasks, routes approvals, collects documents, and creates a reasonably smooth first-week experience. But most organizations using Workday have a substantial population of frontline workers: warehouse employees, retail staff, manufacturing workers, healthcare aides, food service workers, drivers. For this population, the standard Workday onboarding experience frequently fails in ways that are predictable, documented, and, crucially, fixable. Understanding why it breaks down and what actually works is increasingly urgent as labor market competition for frontline talent intensifies. How Standard Workday Onboarding Is Designed Workday's new hire onboarding (delivered throu...
Read more

How to Improve the Customer Experience (CX)

Customer experience is the sum of every interaction a customer has with your company, from the first ad they see to the way a return gets handled years after the purchase. Companies that take this seriously outperform those that treat CX as a support function. The ones that struggle tend to confuse customer satisfaction scores with actual improvements, or fix the wrong things. Here's a practical look at what actually moves CX forward. Start with where customers actually struggle Most CX improvement programs begin with surveys. Surveys are useful but limited, they capture what customers are willing to articulate after the fact, which tends to under-report friction in the middle of an experience and over-index on the most recent interaction. The richer data comes from observing behavior directly: where do customers drop off in a purchase flow? Where do support tickets spike? What search queries are people entering on your site that suggest they can't find what they're loo...
Read more

How Do I Log In and Sign In to Workday HCM

Workday HCM is the system your organization uses to manage everything from your pay stubs and benefits to time off requests and performance reviews. Getting in is usually simple once you know where to go, but first-time login, password resets, and single sign-on setups can trip people up if no one has walked them through it. Here's what you need to know. How to find your Workday login URL Workday doesn't have one universal login page. Each organization has its own tenant, a dedicated instance with a unique URL. Your company's HR department or IT team should have provided the URL when you were onboarded. It usually looks something like your-company.workday.com or wd3.myworkday.com/yourcompany . If you weren't given the URL, check your onboarding email, your company's intranet, or ask HR directly. Some organizations also link to Workday from their internal HR portal. Don't try to guess the URL, there's no central directory, and guessing wrong just takes...
Read more

UKG Union Contract and Overtime Rules for Multi-Site Food Plants

Multi-site food manufacturers running UKG often struggle with one thing: each plant has its own union contract, shift pattern and overtime rules, while the timekeeping system is configured centrally. The fix: document every contract rule precisely, map it to UKG pay rules and work rules, test against real timecards, and handle true exceptions with add-ons rather than core customization. Disclosure: The author works at CloudApper, which makes the UKG add-ons discussed in this article. Why are union contracts so hard to configure in UKG? Federal law sets a floor. Under the Fair Labor Standards Act, non-exempt employees must receive at least one and a half times their regular rate for hours worked over 40 in a workweek. Collective bargaining agreements frequently go further, and food plants often have several agreements across locations. Common contract provisions include: Daily overtime after 8 hours, or after 10 on a four-day schedule. Double time on the seventh consecutive day o...
Read more

Infor HCM Software Engineer Jobs: Salary Factors and Skills

An Infor HCM software engineer's salary depends mostly on the type of employer, the depth of Infor platform knowledge, and location. Engineers who combine general software skills with hands-on experience in Infor CloudSuite HCM, Lawson, Infor ION integrations and payroll logic tend to command more than generalist developers, because that combination is scarce in the job market. What does an Infor HCM software engineer actually do? The title covers several different jobs, and pay follows the job more than the title. Broadly, these engineers build, configure, integrate and support the Infor human capital management stack, which includes core HR, payroll, benefits, talent management and workforce management. Many organizations still run the older on-premises Infor Lawson system alongside or instead of the cloud suite, so experience with both is common. Typical responsibilities include: Building and maintaining integrations between Infor HCM and payroll providers, benefits carrie...
Read more

How to Search in Workday: Find Reqs, Reports, People and Tasks

To search in Workday, type into the global search bar at the top of any page, press Enter, then use the category filters on the left of the results to narrow to people, organizations, tasks and reports or other object types. Workday only returns items your security roles allow you to see, so missing results often mean an access issue rather than a typo. How does Workday search work? Workday uses a single global search box rather than separate menus for each module. Everything in the tenant, from a worker's profile to a job requisition to a custom report, is an object that search can find if you have permission to view it. Three points explain most search behavior: Security trimming. Results are filtered by your security groups. A recruiter and a payroll partner typing the same term will see different results. Categories. After you press Enter, results are grouped into categories that appear as filters. Clicking one hides everything else. Related actions. Once you open an...
Read more

ERP Solution Guide: How to Choose the Best ERP for You

What Is an ERP System and Why Does It Matter? An enterprise resource planning (ERP) system is software that integrates the core functions of a business — finance, inventory, procurement, human resources, manufacturing, and customer management — into a single, connected platform. Instead of data living in separate spreadsheets or standalone applications that don't talk to each other, an ERP creates one source of truth for the entire organization. For growing companies, the question is usually not whether they need an ERP but when and which one. Getting this decision right has long-term consequences. A poorly chosen ERP creates more problems than it solves — forcing teams to work around the system, creating data integrity issues, and consuming IT resources in an endless cycle of customization and maintenance. A well-chosen ERP, on the other hand, becomes the operational backbone that lets a company scale without proportionally growing its administrative overhead. Understandin...
Read more

The End of Remote Work: Why Companies Want You Back

Return to Office: The Trend Reshaping the Modern Workplace After years of celebrating the remote work revolution, a powerful counter-movement has taken hold. Amazon, JPMorgan Chase, Goldman Sachs, Disney, and hundreds of other organizations have issued return-to-office (RTO) mandates, some requiring full five-day-a-week presence. The era of near-universal remote work flexibility appears to be giving way to something more complicated, and HR leaders are at the center of navigating it. Why Companies Are Calling Employees Back Collaboration and Innovation: Many executives argue that the serendipitous interactions, the hallway conversation, the spontaneous whiteboard session, that drive breakthrough ideas simply cannot be replicated on Zoom. Studies from Stanford and MIT suggest that in-person collaboration produces measurably higher rates of novel idea generation. Culture and Cohesion: Building and sustaining organizational culture at a distance has proven harder than anticipated. N...
Read more

The Future of Employee Healthcare Key Concerns and Strategies for 2024

In a rapidly evolving professional landscape, employers are grappling with an array of challenges as they plan employee-sponsored healthcare strategies for 2024. A recent survey conducted in the US in August 2023 sheds light on the primary concerns and emerging trends in the realm of employee healthcare. Mental health, healthcare costs, pharmacy expenditures, and transformative technologies are at the forefront of employer considerations, signaling a need for comprehensive and innovative approaches to employee well-being. Rising Mental Health Concerns A staggering seven in 10 employers reported a surge in mental health concerns, marking a significant uptick from the previous year. With 77% of employers experiencing an increase and an additional 16% anticipating future challenges, the mental health landscape is a top priority. The implications of the ongoing pandemic, remote work dynamics, and societal shifts are evident as employers grapple with addressing and supporting the mental ...
Read more

How Digital Marketing Helps Your Business Grow: A Practical Plan

Digital marketing helps a business grow by putting it in front of buyers at the moment they search, compare and decide, then measuring which efforts produce revenue. Search, content, email, paid ads and social channels let even small teams reach targeted audiences, test messages cheaply and shift budget toward what works, something print and broadcast advertising rarely allow. How does digital marketing actually drive business growth? Growth comes from three levers: reaching more of the right people, converting more of them into customers and keeping those customers longer. Digital channels touch all three. Reach. Search engines, professional networks and industry newsletters connect you with people already looking for what you sell. Conversion. Clear landing pages, case examples and easy contact options turn interest into conversations. Retention. Email, customer education content and community channels keep existing customers engaged and open to expansion. The underlying ...
Read more