Scanflow-react-native-barcode NPM

scanflow-react-native-barcode

Welcome to Scanflow SDK Scanflow is an AI scanner on smart devices for data capture & workflow automation Kit that captures multiple data from Barcode, Qrcode, Text, IDs, Safety codes

Generating a Scanflow License Key

Purchase a License Key 1. Create a free test account at https://console.scanflow.ai/ if you do not already have one if you want to use Scanflow. 2. Visit https://console.scanflow.ai/login to access your account.
3. Click "Create native SDK licensing key" and input the bundle ID for your project if you don't yet have a license key for your app. 4. he license key should be copied.

Generating a Scanflow License - Android

You need a license key to utilize the Scanflow SDK in your application.

You must determine the applicationId of your Android app to generate a license key for your application. An applicationId is used to generate each license. If your applicationId changes, a new license key must be generated. Please be aware that you cannot use your license key with other programmers.

In your build.gradle file

The applicationId for your app may be found in the build.gradle file of the Android Project. Under Android > DefaultConfig > ApplicationId, it will be displayed.

In your AndroidManifest.xml

You must use the package name of your application as described in AndroidManifest.xml if the applicationId is not used in the build.gradle file.

React Native Platforms

Add the SDK

Installation

The Scanflow Core library comprises core utilities specifically designed for barcode scanning purposes. These utilities provide essential functionality and tools necessary for seamless barcode scanning within your application. By incorporating the Scanflow library into your project, you can leverage these core utilities to enhance your barcode scanning capabilities and streamline related processes. Start by installing the following command:

npm install scanflow-react-native-core

If you already have the required libraries installed and they are up to date, there is no need to execute the above command for installation.

Library Installation

Start by installing the Scanflow AI Capture SDK library in your project. You can do this by running the following command:

npm install scanflow-react-native-barcode

For RN Version v71

npm install scanflow-react-native-barcode@0.0.9

This will install the required dependencies.

Permission - Android Important: To access real-time data and ensure the proper functioning of the library, your application requires an active internet connection and the necessary camera permissions for Scanflow AI Barcode Scanner. Please add the following line to your AndroidManifest.xml file:

To use this library, you have to add following permissions into your AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" /> 
<uses-permission android:name="android.permission.CAMERA" /> 
<uses-feature android:name="android.hardware.camera.flash" /> 
<permission android:name="android.permission.FLASHLIGHT" /> 
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> 
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" 
android:maxSdkVersion="28" />

This will grant the required camera permission to the application, enabling the Scanflow AI Barcode Scanner to capture barcode data effectively.

Usage

import { DatacaptureBarcodeView } from "scanflow-react-native-barcode";

<DatacaptureBarcodeView 
      LicenseKey={'YOUR SCANFLOW LICENSE KEY MUST BE ENTER HERE'}
      isBeepSound={true}
      isScanType={scanType}
      isVibrartion={true}
      isAutoFlashlight={true}
      isAutoExposure={true}
      isContinuousScan={true}
      isAutoZoom={true}
      setCameraResolution={'FULL_HD_1080P'}
/>

Setup Barcode Scanner Configuration

The following props are explained in detail:

License key (type: String) The license key prop is a string value that represents the unique identifier or authorization code required to activate and authenticate the scanflow.

isScanType (type: predefined String) The Barcode Scanner has six different features

    1. QRCODE 
        It allows only 2D-type barcodes to be scanned, other types of codes will be ignored. 
    2. BARCODE 
        It allows only 1D type barcode to be scanned, other types of codes will be ignored. 
    3. ANY  
        It allows both 1D & 2D type barcode scanned. 
    4. BATCH_INVENTORY 
        It enables batch mode. still user reset I will save all types of 1D & 2D codes scanned by user. 
    5. ONE_OF_MANY 
        It enables one of many modes. Detected Code will be highlighted in overlay view user can be able   to     select by clicking on highlighted 1D/2D codes. 
    6. PIVOT_VIEW  
        Pivot view is also known for Single Hand use where among multiple 1D/2D codes on screen centre of   the   screen will be scanned and result will be shown.

IsBeepSound (type:boolen)

    1. The isBeepSound prop is a boolean value that controls whether or not a beep sound is played in a specific scenario. 

    2. When set to true, the component or feature associated with the isBeepSound prop will generate an audible beep sound to provide feedback or indicate a successful operation.  

    3. On the other hand, when set to false, the beep sound will be disabled. 

    4. By toggling the isBeepSound prop based on your application's specific requirements, you can customize the presence or absence of the beep sound, aligning it with your desired user experience and interaction design.

IsVibrartion (type:boolen) 1. The isVibration prop is a boolean value that controls whether or not vibration feedback is enabled in a specific scenario.

    2.  When set to `true`, the component or feature associated with the `isVibration` prop will trigger device vibration to provide haptic feedback or indicate a successful operation.   

    3.  On the other hand, when set to `false`, the vibration feedback will be disabled.  

    4. By toggling the `isVibration` prop based on your application's specific needs, you can customize the presence or absence of vibration feedback, aligning it with your desired user experience and interaction design.

IsAutoFlashLight (type:boolen)

    The isAutoFlashlight prop is a boolean value that determines whether the flashlight on the device is automatically enabled or disabled in a while scanning.

IsAutoExposure (type:boolen)

    The isAutoExposure prop is a boolean value that controls whether the exposure of a camera or image capture feature is automatically adjusted based on lighting conditions (true) or manually adjusted (false).

IsContinuousScan (type:boolen)

    The isContinuousScan prop is a boolean value that determines whether the scanning process continues automatically after detecting a barcode (true) or stops after scanning one barcode (false).

IsAutoZoom (type:boolen)

    The isAutoZoom prop is a boolean value that determines whether the zoom level of a camera or image capture feature is automatically adjusted based on certain conditions (true) or requires manual adjustment (false).

SetCameraResolution (type:predefinedString)

    1. SD_480P 
         Standard Definition (480p) is a video resolution option that offers moderate image quality and lower file sizes suitable for playback on various devices and streaming platforms. 

    2. HD_720P 
         High Definition (720p) is a video resolution option that provides enhanced image quality with sharper details, making it ideal for high-quality video playback on HD-compatible screens. 

    3. FULL_HD_1080P 
         Full HD (1080p) is a video resolution option that delivers excellent image quality with crisp and detailed visuals, suitable for larger screens and immersive viewing experiences. 

    4.UHD_4K 
         Ultra HD (4K) is a video resolution option that offers incredibly high image quality with exceptional clarity and vividness, providing an immersive and lifelike viewing experience on compatible screens.

Barcode Result Listener:

    useEffect(() => { 
        eventEmitter.addListener('onBatchScanResult', onBatchScanResultSuccess); 
        eventEmitter.addListener('onOneOfManyCodeResult', onOneOfManyCodeResult); 
        eventEmitter.addListener('onOneofManyCodeRemoved', onOneofManyCodeRemoved); 
        eventEmitter.addListener('onOneofManyCodeSelected',onOneofManyCodeSelected); 
        eventEmitter.addListener('onScanBarcodeDetection', onScanBarcodeDetection); 
        eventEmitter.addListener('onScanResultFailure', onScanResultFailure); 
        eventEmitter.addListener('onScanResultSuccess', onScanResultSuccess); 

        return () => { 
        eventEmitter.removeAllListeners('onBatchScanResult'); 
        eventEmitter.removeAllListeners('onOneOfManyCodeResult'); 
        eventEmitter.removeAllListeners('onOneofManyCodeRemoved'); 
        eventEmitter.removeAllListeners('onOneofManyCodeSelected'); 
        eventEmitter.removeAllListeners('onScanBarcodeDetection'); 
        eventEmitter.removeAllListeners('onScanResultFailure'); 
        eventEmitter.removeAllListeners('onScanResultSuccess'); 
        }; 
        }); 


        function onBatchScanResultSuccess(data: any) { 
        } 

        function onOneOfManyCodeResult(data: any) { 
        } 

        function onOneofManyCodeRemoved(data: any) { 
        } 

        function onOneofManyCodeSelected(data: any) { 
        } 

        function onScanBarcodeDetection(data: any) { 
        } 

        function onScanResultFailure(data: any) { 
        } 

        function onScanResultSuccess(data: any) { 
        }