React Native Barcode Scanner: Developer's Guide

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 barcode scanning challenges 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. To understand these practices, we’ve included a step-by-step tutorial using Scandit SparkScan for React Native, a pre-built barcode scanning component that puts a minimalistic UI on top of any application.

To create a React Native barcode scanner, we’ll walk through these steps using a sample application:

Add the Scandit Data Capture SDK license key to your project.
Run the sample app to see how it operates.
Change supported symbologies for your use case.
Change the scanning mode.
Customize the user interface.
Add error feedback.

If you want a head start, download and run one of our React Native barcode scanning samples on your development device now.

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 video demonstrates how the SparkScan pre-built component lets users swipe or tap a collapsed floating button to activate barcode scanning – you don’t need to worry about the UI or building capture logic. After tapping the button, a camera preview appears on screen, positioned directly behind the hardware camera.

These built-in UX choices make aiming and capture much easier for users rather than trying to figure them out on your own.

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

SparkScan and other Scandit software include context-based AI scanning algorithms that ensure the correct barcode is captured even with imprecise aiming. This feature is known as Smart Scan Intention. It uses contextual data, such as device movement and barcode characteristics, to anticipate and capture the right target barcode. This helps users reduce unwanted scans by up to 100%.

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 fast with SparkScan

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 barcode scanning 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. Ensuring these goals are met requires software that captures the right data on every scan and reduces the number of unwanted scans.
Speed: Faster scanning means faster business operations.
Multi-modal data capture: The ability to extract barcode and text data from labels simultaneously eliminates the need to scan or enter them manually. Scandit’s SDK includes multi-modal data capture, making data entry up to seven times faster than scanning labels separately.
Handling tough barcodes: There’s no guarantee that barcodes are intact and fully visible – they may be torn, partially obscured, wrapped in plastic, under low light, 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. Single-scan software usually cannot handle these scenarios, as they require special-purpose algorithms to identify and track each barcode without getting confused by device movement or duplicates.
Field-of-view and distance: Enterprise environments often involve scanning barcodes on objects of various sizes, shapes, and distances from the camera – from tiny barcodes and electronic shelf labels (ESL) on retail shelves to large crates in a warehouse.

To see the features that matter most when tuning performance, read our blog on optimizing barcode scanning app performance. Verifying that the library’s API supports these features gives you options for improving accuracy and speed.

2. Device support

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.

The Scandit React Native SDK is built on a C/C++ foundation that ensures core features are loaded efficiently in the background and consume minimal system resources. You can see here the system requirements for the SparkScan pre-built components and test it out now using one of our React Native code samples.

3. Support for different development frameworks

For developers working across platforms, check that your barcode scanner solution supports it. Scandit barcode scanning is available for Native iOS, Native Android, JavaScript, Xamarin, Flutter, .NET (iOS, Android, and MAUI), Cordova, Capacitor, and Titanium.

4. Advanced features

It’s not uncommon for users to ask for improvements and business leaders to demand more, especially with repetitive and time-critical tasks like barcode scanning. They may want a user interface that makes scanning easier or a completely new approach to capture barcodes at higher volumes.

Rather than getting stuck when feature requests arrive, choose a React Native library that satisfies your initial needs and has the features to extend capabilities.

Scandit’s React Native SDK offers advanced features built for a wide range of use cases, including:

Smart Label Capture to deploy multi-modal data capture that reads barcodes and printed text simultaneously. This helps users extract data up to 7 times faster for labels containing items such as serial numbers, weights, and expiry dates.
Batch scanning with MatrixScan to help users scan multiple barcodes at once without losing track of them as their devices move around. This reduces the time and effort for scanning operations such as inventory counts, picking and packing, and last-mile delivery.
Augmented reality (AR) with MatrixScan Find to help workers and customers find the right item among many with minimal effort.

5. Support

Any tool or software package requires enterprise-level support. For a React Native barcode scanner, look for code samples that help you get started and documentation that includes tutorials and API reference guides. The library should be updated regularly (check the release notes) and have options for help from technical experts.

Scandit’s Enterprise-Level Success Team helps you go from trial evaluation to day-to-day barcode scanning operations with users. They can ensure your barcode scanning deployment is optimized and reliable for your business.

6. Security and privacy

Your barcode scanner library accesses some level of device features and user data to operate. The question is how it protects sensitive information both in transit and at rest. At a minimum, it must comply with your organization’s security and privacy policies and with the applicable standards for your industry.

Scandit takes a security by design approach to all software, where you have complete control over data collection and processing. This means:

All image processing happens on the device to ensure confidentiality and high availability of scanning.
Any data you choose to share with Scandit is encrypted during transit and at rest.
Scandit is ISO 27001:2022 Certified and compliant with applicable privacy regulations that include GDPR and CCPA.

Testing the Scandit React Native SDK is easy

Integrate with just a few lines of code or use our samples

Try for free

How do I create a barcode scanner for React Native?

SparkScan gives you pre-built, optimized barcode scanning and a minimalistic UI that floats on top of any React Native app. It’s the fastest way to integrate barcode scanning capabilities and an enterprise-proven user interface without worrying about capture logic and UI widgets.

The scanning interface comprises a small camera preview window and a large, moveable, semi-transparent trigger button that users can drag to their preferred position. When not in use, the preview button disappears and the trigger button collapses to free up screen real estate.

Graphic showing a web-based scanner UI using the Scandit SparkScan pre-built barcode scanning component. The next sections explain how to implement a customizable React Native barcode scanning interface in just a few steps with SparkScan.

Get started with SparkScan for React Native

The fastest way to see if SparkScan will work for you is to run our React Native List Building sample on your desktop or development device. This sample provides a dummy app to scan into, together with a basic scanning interface, including a capture button and camera preview.

When run, the sample application looks similar to this:

User interfaces for SparkScan ListBuildingSample for JavaScript showing scanning and results screens The prerequisites for these steps are:

The ListBuildingSample added to your IDE’s workspace.
A valid Scandit Data Capture SDK license key. You can sign up for a free test account at ssl.scandit.com.

1. Add the Scandit Data Capture SDK license key to your project

To run the application, you must add the Scandit Data Capture SDK license key to the project.

Open /app/App.tsx and replace '-- ENTER YOUR SCANDIT LICENSE KEY HERE --' with your license key.

2. Run the sample app

To test that your license key works and the app runs, build and deploy the application onto your desktop or target device.

Run npm install to install the /node_modules for react-native, scandit-datacapture-core, and scandit-datacapture-barcode, among other dependencies.
For iOS, run npx pod-install ios to install the Pods dependencies.
Connect an iOS or Android device to your computer via USB.
For iOS, open Xcode by running open -a Xcode ios/ListBuildingSample.xcworkspace. In Xcode, navigate to Targets > ListBuildingSample > Signing & Capabilities and select a Team to assign a Provisioning Profile to run on a device.
To deploy and run on your connected device, run the following command:
1. iOS: npx react-native run-ios
2. Android: npx react-native run-android

If you encounter issues during the last step, run npx react-native doctor to detect and fix any issues in your Android Studio or Xcode environment. Repeat the steps above using the --verbose flag to get detailed feedback.

Once running, follow these steps to capture barcodes using your device’s camera:

User interfaces for SparkScan ListBuildingSample for JavaScript showing scanning and results screens with guidance about how to us 3. Change supported symbologies

The symbologies your app supports are configured through SparkScanSettings. The sample app is already configured to support multiple 1D symbologies, such as EAN-13/UPC-12/UPC-A, Code 128, and Interleaved 2 of 5 (ITF).

To change this to the symbologies for your use case:

Open /app/App.tsx and navigate to the setupScanning() function.
Modify the call to enableSymbologies() as follows:

sparkScanSettings.enableSymbologies([
    Symbology.EAN13UPCA,
    Symbology.EAN8,
    Symbology.UPCE,
    Symbology.Code39,
    Symbology.Code128,
    Symbology.InterleavedTwoOfFive,
    Symbology.QR,
  ]);

Here, we’ve added support for QR codes.

4. Change the scanning mode

SparkScan supports two scanning modes, and a UI control for the user to switch between them. The two modes are:

Default mode: Ideal for close-range and fast-paced scanning. This mode displays a small camera preview to aid with aiming.
Target mode: Ideal for scanning scenarios where precision is important. This mode adds an aiming crosshair to the preview, to help users select the barcode to scan. This mode is useful when multiple barcodes are in view, such as for long-range scanning of items on a shelf.

The mode is set using SparkScanViewSettings. To set the scanning mode in the sample app without allowing the user to choose:

Open /app/App.tsx.
Navigate to where SparkScanViewSettings is declared:
sparkScanViewSettings={new SparkScanViewSettings()}

Add this line to change the scanning mode from default to target mode:

const settings = new SparkScanViewSettings();
settings.defaultScanningMode = new SparkScanScanningModeTarget(
SparkScanScanningBehavior.Single,
SparkScanPreviewBehavior.Default
);
return settings;

Update the scandit-react-native-datacapture-barcode import to include:

{
...
SparkScanScanningModeTarget,
SparkScanScanningBehavior,
SparkScanPreviewBehavior,
} from 'scandit-react-native-datacapture-barcode';

To give the user the ability to toggle between scanning modes:

Open /app/App.tsx.

Navigate to where the SparkScanView ref is declared:

ref={view => {
    if (view) {
      view.feedbackDelegate = sparkScanFeedbackDelegate;
    }
    sparkScanViewRef.current = view;
}}

Update this line to make the target mode button visible to the user:

ref={view => {
    if (view) {
      view.feedbackDelegate = sparkScanFeedbackDelegate;
      view.targetModeButtonVisible = true;
    }
    sparkScanViewRef.current = view;
}}

5. Customize the user interface

The SparkScan built-in user interface includes the camera preview and scanning UI elements. These guide the user through the scanning process.

You can customize many aspects of the default SparkScan UI and UX to suit your needs and use cases. These customizations include the colors of all items (i.e., icons, buttons, toolbar), trigger button icon, size of the preview window, and more.

The graphic below shows three different examples of how colors, positions, and sizes can be customized to fit different apps.

The following steps explain how to change different UI elements in the sample app.

Open /app/App.tsx.

Navigate to where SparkScanView is declared:

ref={view => {
    if (view) {
      view.feedbackDelegate = sparkScanFeedbackDelegate;
      view.targetModeButtonVisible = true;
    }
    sparkScanViewRef.current = view;
}}

To change the color of the trigger button background and its animation (the pulsing effect shown when the scanner is active), add the following lines. Here, hex values are used to specify different shades of blue.
```
view.triggerButtonExpandedColor = Color.fromHex("#123768");
view.triggerButtonAnimationColor = Color.fromHex("#59D3DE");
```

To change the toolbar background color, add:

view.toolbarBackgroundColor = Color.fromHex("#01AAA7");

To change the size of the camera preview, navigate to where SparkScanViewSettings is declared:
```
settings = new SparkScanViewSettings();
```
Add this line to change the camera preview from its default smaller size to a larger window:
```
settings.defaultMiniPreviewSize = SparkScanMiniPreviewSize.Expanded;
```

Update the scandit-react-native-datacapture-barcode import to include:

{
...
SparkScanMiniPreviewSize,
} from 'scandit-react-native-datacapture-barcode';

6. Add error feedback

To show an error message when scanning specific barcodes, such as those already added to an existing list, you can customize SparkScan’s error feedback prompt.

The following steps explain how to add an error message to the sample app when the user scans a specific barcode number.

SparkScan-based app showing error feedback when scanning a barcode on an orange juice container Open /app/App.tsx and navigate to the isValidBarcode() function.

Change the return statement from this:

return barcode.data != null && barcode.data !== '123456789';

to use a barcode number you have. For example:

return barcode.data != null && barcode.data !== '0059749979610';

Navigate to the sparkScanFeedbackDelegate() function. Change the else condition from this:

// customize and return an error feedback
    return new SparkScanBarcodeErrorFeedback(
      'Wrong barcode',
      60,
      Color.fromHex('#FF0000'),
      new Brush(Color.fromHex('#FF0000'), Color.fromHex('#FF0000'), 1),
      null,
    );

to set a different error message and colors like this:

// customize and return an error feedback
    return new SparkScanBarcodeErrorFeedback(
      'Barcode is incorrect',
      60,
      Color.fromHex('#FF0000'),
      new Brush(Color.fromHex('#00FFFF), Color.fromHex('#FFFFFF), 1),
      null,
    );

The parameters for SparkScanBarcodeErrorFeedback() are:

message: The error message to display when a wrong barcode is captured.
resumeCapturingDelay: The time interval after which to resume the capture process, in milliseconds.
visualFeedbackColor: The color to flash the screen upon scanning the wrong barcode, set using the Color class.
brush: The color of the solid shape laid over the barcode to indicate that it was rejected, set using the Color class.
feedback: The sound and vibration when a barcode is rejected.

The method also has a parameter to emit a sound and vibrate the device when it is called.

With these basics in place, you’re ready to add barcode scanning to your own React Native app!

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, and find out more about how to measure barcode scanning performance in our in-depth best practice guide.

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?

Your React Native barcode scanner is more than just a technical choice

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.

Next: Dive deeper into how to make a barcode scanning app performant →

How to Build a React Native Barcode Scanner

Share