Table of contents
Swift
Objective-C

Barcode Reader Integration Guide for Expo

This guide will help you develop a barcode scanning app with Expo project.

This SDK uses native modules and requires an Expo development build. It will not work with Expo Go. To use it with Expo, you must use Expo Bare Workflow.

npx expo prebuild
npx expo install dynamsoft-capture-vision-react-native dynamsoft-barcode-reader-bundle-react-native
npx expo run:android / ios

System Requirements

  • Expo
    • Supported SDK: 50 or higher
    • Requires Expo development build (Expo Go is not supported)
  • React Native
    • Supported Version: 0.71.0 or higher
  • Android
    • Supported OS: Android 5.0 (API Level 21) or higher.
    • Supported ABI: armeabi-v7a, arm64-v8a, x86 and x86_64.
    • Development Environment:
      • IDE: Android Studio 2024.3.2 suggested.
      • JDK: Java 17 or higher.
      • Gradle: 8.0 or higher.
  • iOS
    • Supported OS: iOS 13+.
    • Supported ABI: arm64 and x86_64.
    • Development Environment: Xcode 13+ (Xcode 14.1+ recommended).

License Activation

License is configured via LicenseManager. For example:

const License = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
LicenseManager.initLicense(License).catch(e => {
  Alert.alert('License error', e.message);
});

Build Your Barcode Scanner App

Preparation

Create a new Expo project with the following command:

npx create-expo-app ScanBarcodes
cd ScanBarcodes

Installation

Run the following commands in the root directory of your Expo project to add the required dependencies:

npx expo install dynamsoft-capture-vision-react-native dynamsoft-barcode-reader-bundle-react-native

Add the dynamsoft-capture-vision-react-native plugin to the app.json file:

"plugins": [
    "dynamsoft-capture-vision-react-native",
    //....
]

Since your app requires camera access, you need to add NSCameraUsageDescription to the ios section of app.json:

    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "This app uses the camera to scan barcodes."
      }
    },

Since this SDK requires native code, you need to generate the native projects:

npx expo prebuild

For iOS, install the CocoaPods dependencies:

cd ios
pod install
cd ..

Implementing the Barcode Scanner

To implement the barcode scanning feature, replace the content of app/(tabs)/index.tsx with the following code:

import {
  CameraEnhancer,
  CameraView,
  CaptureVisionRouter,
  EnumPresetTemplate,
  LicenseManager,
} from 'dynamsoft-capture-vision-react-native';
import React, {useEffect, useRef} from 'react';
import {Alert, AppState, StyleSheet, View} from 'react-native';
// Initialize the license.
// The license string here is a trial license. Note that network connection is required for this license to work.
// You can request an extension via the following link: https://www.dynamsoft.com/customer/license/trialLicense?product=dbr&utm_source=guide&package=react-native
const License = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
LicenseManager.initLicense(License).catch(e => {
  Alert.alert('License error', e.message);
});

function App(): React.JSX.Element {
  const cameraView = useRef<CameraView>(null!);
  const cvr = CaptureVisionRouter.getInstance();
  const camera = CameraEnhancer.getInstance();

  useEffect(() => {
    // Request camera permission once
    CameraEnhancer.requestCameraPermission();

    // Configure router, camera and view
    cvr.setInput(camera);
    camera.setCameraView(cameraView.current);

    // Barcode result handler
    const receiver = cvr.addResultReceiver({
      onDecodedBarcodesReceived: ({items}) => {
        if (items?.length) {
          cvr.stopCapturing();
          Alert.alert(
            `Barcodes count: ${items.length}`,
            items.map((barcode, i) => `${i + 1}. ${barcode.formatString}: ${barcode.text}`).join('\n\n'),
            [
              {
                text: 'OK',
                onPress: () => {
                  cvr.startCapturing(EnumPresetTemplate.PT_READ_BARCODES)
                    .catch(e => Alert.alert('Start error', e.message));
                }
              }
            ]
          );
        }
      },
    });

    // Helper to start camera + scanning
    const startScanning = () => {
      console.log('Starting...');
      camera.open();
      cvr.startCapturing(EnumPresetTemplate.PT_READ_BARCODES)
        .catch(e => Alert.alert('Start error', e.message));
    };

    // Helper to stop camera + scanning
    const stopScanning = () => {
      console.log('Stopping...');
      cvr.stopCapturing();
      camera.close();
    };

    // Initial start when component mounts
    startScanning();

    // Listen to AppState changes
    const sub = AppState.addEventListener('change', nextState => {
      if (nextState === 'active') {
        startScanning();
      } else if (nextState.match(/inactive|background/)) {
        stopScanning();
      }
    });

    // Cleanup on unmount
    return () => {
      sub.remove();
      stopScanning();
      cvr.removeResultReceiver(receiver);
      camera.setCameraView(null);
    };
  }, [cvr, camera]);

  return (
    <View style={StyleSheet.absoluteFill}>
      <CameraView style={StyleSheet.absoluteFill} ref={cameraView}/>
    </View>
  );
}

export default App;
  • The license string here is a trial license. Note that network connection is required for this license to work.
  • You can request an extension via the Request a Trial License link.

Run the App

Build and Run on Android

For Android, run the following command:

npx expo run:android

For iOS, run the following command:

npx expo run:ios

Full Sample Code

The full sample code is available here.

License

You can request a 30-day trial license via the Request a Trial License link.

Support

https://www.dynamsoft.com/company/contact/

This page is compatible for: