How to Build a React Native Barcode Scanner

| Developers

Delivery driver scanning a barcode using a barcode scanner on Android built with React Native.

It’s six months from now and your app’s barcode scanner needs an overhaul.

User adoption rates are down and feature requests fill your backlog. Leadership knows that smartphone scanning is more flexible and reduces total cost of ownership. They’re counting on you to make the rollout successful – but will your new barcode scanning library hold up?

Many app developers don’t give barcode scanning libraries their due. Integrating a barcode scanner into your React Native app requires more than changing camera permissions and extracting data.

When choosing a barcode scanning solution for React Native, there are two areas that generally cause downstream problems for developers: poor UX and poor scanning performance.

Scanning performance needs to match the speed of your business. As much as that, though, success depends on building a smooth, helpful, unobtrusive UX. It needs to feel like an integral part of the app and fit seamlessly into the wider physical context – point of sale, warehouse operations, and so on.

This blog explains the key UX and performance principles for enterprise-class React Native barcode scanning and provides a step-by-step tutorial for a barcode scanning solution for React Native using the pre-built features in Scandit SparkScan.

The importance of UX in React Native barcode scanning

Integrating a React Native barcode scanner can be like adding a new streaming device to your home network. You think that new show is only minutes away, but find yourself fiddling with configuration and UX issues hours later.

More than a camera capture and event handler

UX can make or break any mobile application. While we may not associate something that seems as simple as barcode scanning with modern UX principles, getting the art and science of navigation, interaction, and feedback right is the difference between user success and frustration.

One of the biggest differences between paid and open-source barcode scanning libraries is that with an open-source library you’re generally on your own developing the user interface (UI). Paid libraries often include pre-built UI components.

The following user workflows illustrate the importance of having a solid understanding of scanning UX when deciding which React Native barcode scanner is right for you.

Starting the camera

A smooth user experience starts with a fast and easy way to initiate the barcode scanning process. Imagine users navigating through labyrinthine menus or having to switch between different interfaces to access a scanning tool. This isn’t just inconvenient. It’s an experience that takes the user’s focus away from their job and deters them from engaging with the app.

Good UX requires a seamless transition into scanning mode directly within the application. The following video illustrates how this could look, with Scandit SparkScan enabling users to swipe or tap a collapsed floating button to activate the scanner and providing a large, semi-transparent button to capture a barcode.

Assisting with camera aiming

Aiming a smartphone camera isn’t necessarily easy or intuitive, especially in difficult scanning environments such as a barcode at the top of a tall warehouse shelf, packages with multiple barcodes printed on them, or the need to bend or even lie down to scan packages on lower shelves.

To help users capture barcodes more effectively, consider adding features like on-screen guides, visual hints, or even augmented reality (AR) overlays that help position the camera correctly.

Here are two examples:

  • A viewfinder helps the user understand that scanning is live and position the camera appropriately
  • Restricting the scan area helps users capture barcodes in cluttered areas and improves performance on low-end devices

Providing strong and clear feedback

When a user attempts to scan a barcode, the app should provide immediate and clear feedback about its success or failure. An unclear or delayed response can lead to user confusion and frustration, especially in loud environments.

Feedback mechanisms include visual, auditory and haptic cues such as these examples:

  • Drawing a symbol, like a brush overlay, at the location of the detected barcode to confirm that the app scanned the intended item.
  • Playing a sound and vibrating the device when the scanner performs a capture.

Supporting different scan modes

Different users have different preferences, just as businesses have varied volumes of items to scan or different numbers of barcodes per package. Allowing users to choose between single scans and continuous scanning modes helps tailor the experience to unique workflows.

SparkScan has two modes built into its React Native API:

  • Single scan: the user triggers the scanner every time to scan a barcode, providing greater control over the scanning experience
  • Continuous scan: the user triggers the scanner once and the app scans barcodes without any further interaction, providing a smoother experience and reduced user fatigue during consecutive barcode scans

Start barcode scanning in React Native

Add enterprise-class barcode scanning in minutes with SparkScan.

Try for Free

Performance considerations when choosing a barcode scanner for React Native apps

Developers investing time in barcode scanning technology must choose the solution that best fits their user base and performance needs. A warehouse with hundreds of employees and thousands of packages is unlikely to adopt an open source React Native library that takes five seconds to capture every barcode.

Here are three things for enterprise developers to consider when selecting their React Native barcode scanner solution.

1. Scan performance

In an enterprise environment, scan performance is broken down into the following requirements:

  • Accuracy: Enterprises that rely on barcode scanning for inventory management, asset tracking, quality control, and similar operations require scanners that ensure the right products are picked, the correct assets are tracked, and quality standards are met. A high level of accuracy minimizes errors and prevents costly mistakes – ultimately improving productivity.
  • Speed: Faster scanning means faster business operations. In warehouses, faster barcode scanning accelerates order fulfillment and reduces downtime. In manufacturing, it enhances production line efficiency.
  • Field-of-view and distance: Enterprise environments often involve scanning barcodes on objects of various sizes, shapes, and distances from the camera. A barcode scanner that can detect multiple barcodes within a wide field of view and at different distances ensures that employees can scan efficiently and accurately, from small labels on shelves to large crates in a warehouse.
  • Handling tough barcodes: There’s no guarantee that barcode integrity is sound – they may be torn, partially obscured, wrapped in plastic, or reflecting light that causes glare in the camera lens.
  • Multiple barcode scanning: In complex environments, employees may need to scan multiple barcodes simultaneously or in quick succession. For example, a warehouse worker may need to scan both a product barcode and a location barcode within seconds. A scanner capable of handling multiple barcodes without delays or errors streamlines these processes and enhances efficiency.

2. Low-light situations

In many enterprise settings, lighting conditions can vary widely. Barcode scanners should perform well in low-light or even no-light situations, such as stockrooms, back-of-store areas, or nighttime delivery routes.

3. Supporting a wide range of employee devices

Enterprises often have a diverse fleet of employee devices, including smartphones, tablets, and ruggedized mobile computers. Growth in the Bring-Your-Own-Device (BYOD) movement has only strengthened the need for enterprise developers to support more hardware.

While React Native makes it easy for developers to build once and deploy to iOS and Android, your barcode scanner library also needs to be compatible with a wide range of devices and screen sizes, ensuring employees have a consistent user experience with the device they’re assigned or are most comfortable with.

Get enterprise-ready features in less time with SparkScan

SparkScan, part of the Scandit Smart Data Capture Platform, integrates into any iOS or Android smartphone app to provide pre-built intuitive and fast scanning. Built upon robust and researched UX principles and optimized through the experiences of thousands of customers across a range of environments, it only takes a few lines of code to integrate SparkScan’s React Native SDK into your app.

Diagram showing Scandit’s UI/UX framework for developing React Native barcode scanning applications

SparkScan’s benefits include:

  • A pre-built React Native barcode scanning interface that reduces development time and solves many common scanning issues to increase the likelihood of user adoption and business performance.
  • UX principles built into every aspect of the scanning workflow, based upon Scandit’s Scanning UI/UX Framework that incorporates persona research, prototyping, and testing with frontline workers. SparkScan took over two years of research and development to perfect and continues to evolve with market and technology needs.
  • High-performance operation and accuracy to support workers who scan hundreds or thousands of items daily. SparkScan is designed and tested for omnidirectional scanning that helps users capture barcodes from any angle and provides a comfortable scanning experience regardless of how intensive, complex, or repetitive the workflow is.
  • Support for over 20,000 models of smart devices, including low-end hardware that lacks autofocus capabilities, and regular software updates to keep pace with manufacturer changes that affect scanning functions.
  • Flexibility and extensibility to match future smart device capabilities to business needs, such as camera upgrades and AR, and reduce the time it takes to port functions from one device to another.
  • Full customization of the interface, offering developers options to provide audio or haptic feedback, the choice of triggering scans using a phone’s physical button, and scanning in left-handed mode, among other UX choices.

Just how easy is it to integrate SparkScan into your app? The following sections provide a tutorial that gets you to a customizable React Native barcode scanning interface in just a few steps.

Get started with SparkScan

The fastest way to see if SparkScan is suitable for your needs is to run one of our React Native barcode scanning examples on GitHub on your development device.

Adding the pre-built SparkScan features to your app requires these steps:

  1. Add the SparkScan SDK to your project
  2. Create a new Data Capture Context instance
  3. Configure the SparkScan mode
  4. Create a SparkScanView and bind it to the application’s lifecycle
  5. Register the listener for new barcode scans and update your data
  6. Customize the user interface

1. Add the SparkScan SDK to your project

Before setting up SparkScan, you need to obtain a valid Scandit Data Capture SDK license key:

  1. Sign up or sign in to your Scandit account
  2. Create a project
  3. Create a license key by specifying your bundle ID

The simplest way to add the React Native plugins for the Scandit Data Capture SDK to your project is to use the npm registry.

1. Create a new project (optional)

> react-native init HelloScandit
> cd HelloScandit

2. Add the Scandit Data Capture SDK from the npm registry

Run these commands from your project’s root folder. In the following snippet, we’re adding the ScanditBarcodeCapture API:

yarn add scandit-react-native-datacapture-core
yarn add scandit-react-native-datacapture-barcode

3. Additional steps on iOS

After adding the plugins, ensure they’re added to your iOS project properly by running the following command:

cd ios && pod install

Camera permissions for iOS: When using the Scandit Data Capture SDK, you must set the camera as the frame source for barcode, text, and label capture. To do this, you need to set the “Privacy – Camera Usage Description” field in the Info.plist file for iOS.

4. Additional steps on Android

The Scandit SDK uses content providers to initialize scanning capabilities. If your content providers depend on the Scandit SDK, choose an initOrder lower than 10 to make sure the SDK is ready first. If not specified, initOrder is zero by default and you have nothing to worry about.

For more information, read the official documentation.

Camera permissions for Android: When using the Scandit Data Capture SDK, you must set the camera as the frame source for barcode, text, and label capture. To do this, you must request camera permissions in your application before starting scanning. To see how to achieve this, take a look at our samples.

2. Create a new Data Capture Context instance

The next step is to add code to create the main class for running tasks related to data capture, Data Capture Context. The context expects a valid Scandit Data Capture SDK license key during construction.

const context = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --");

3. Configure the SparkScan mode

The SparkScan mode is configured through SparkScanSettings and it allows you to register one or more listeners that are informed whenever a new barcode is scanned.

The following code sets up SparkScan for scanning EAN13 codes but you can change this to the symbologies for your use case (e.g., Code 128, Code 39).

const settings = new SparkScanSettings();
settings.enableSymbologies([Symbology.EAN13UPCA]);

Next, create a SparkScan instance with the initialized settings:

const sparkScan = SparkScan.forSettings(settings);

4. Create a SparkScanView and bind it to the application’s lifecycle

SparkScan comes with a built-in user interface, called SparkScanView, that guides users through the scanning process and integrates with any app without requiring redesign or customization. It includes:

  • Camera preview screen
  • Large-sized scan button
  • Quick-access toolbar to adjust scanning settings

The appearance of SparkScanView is customized through SparkScanViewSettings.

const viewSettings = new SparkScanViewSettings();
//set up the desired appearance settings by updating the fields in the object above

By adding a SparkScanView, a scanning interface is added automatically to your application.

To add SparkScanView to your view hierarchy, construct a new SparkScan view:

const sparkScanComponent = <SparkScanView
    context={context}
    sparkScan={sparkScan}
    sparkScanViewSettings={viewSettings}
/>;

The SparkScan view is automatically added to the provided parentView. Additionally, make sure to call SparkScanView.stopScanning() to your app state handling logic. The application must call this method for the correct functioning of the SparkScanView:

componentWillUnmount() {
  this.sparkScanViewComponent.stopScanning();
}

handleAppStateChange = async (nextAppState) => {
    if (nextAppState.match(/inactive|background/)) {
      sparkScanView.stopScanning();
    }
}

5. Register the listener for new barcode scans and update your data

To keep track of scanned barcodes, implement the SparkScanListener interface and register the listener to the SparkScan mode.

// Register a listener object to monitor the spark scan session.

const listener = {
  didScan: (sparkScan, session, getFrameData) => {
    // Gather the recognized barcode
    const barcode = session.newlyRecognizedBarcodes[0];

    // Handle the barcode
  },
};

sparkScan.addListener(listener);

Whenever a new barcode is scanned, the application calls the SparkScanListener.didScan() callback. You can retrieve the newly scanned code by calling SparkScanSession.newlyRecognizedBarcodes. The returned list contains only one barcode entry.

To emit audio and visual feedback when a barcode is scanned, call SparkScanView.emitFeedback().

6. Customize the user interface

To illustrate the flexibility of the SparkScan user interface, here are two elements you can control to customize scanning behavior:

1. Control the scanner through a hardware button

Allowing the user to control the scanner with hardware buttons can improve ergonomics in situations where users wear gloves or have difficulties tapping a screen.

SparkScan offers a built-in API for this using SparkScanViewSettings.hardwareTriggerEnabled.

2. Hide controls from the settings toolbar

In some cases, you may want to prevent users from accessing scanning controls, such as the control to disable audio feedback if users work in noisy work environments.

SparkScanView allows you to configure the toolbar, with settings such as soundModeButtonVisible and barcodeCountButtonVisible.

Testing barcode scanning performance in React Native

How do you test a potential barcode scanning solution to ensure it meets your needs? Try it out in the real world! Go and find some real barcodes in your kitchen, on your bookshelf or – even better – in your enterprise environment. You can also use our barcodes sample sheet for quick evaluation.

Whether you installed SparkScan or another barcode scanning library, here are several ways to test the performance of barcode scanning::

  • Determine whether there is clear guidance, feedback, and helpful hints to foster a smooth workflow rather than a confused, error-prone activity.
  • Try scanning barcodes in different orientations, such as upside down and sideways, and flip the phone upside down to see how the scanner performs.
  • Can you scan barcodes experiencing reflections and glare?
  • Can you scan barcodes at a distance? Are you able to zoom in if needed?
  • Scanning environments can be loud and frontline workers often wear headphones – will they notice feedback?

Get your enterprise-proven React Native barcode scanner

Your barcode scanning solution is more than just a technical choice, it’s a gateway to improving user satisfaction and optimizing operations. Prioritizing UX by integrating features that are easy to use, reduce errors, and scale to business volumes leads to greater adoption and productivity.

Interested in how SparkScan turns smartphones into intuitive, ergonomic scanners with minimal integration time? Sign up for our free 30-day test SDK now.