|
| 1 | +--- |
| 2 | +layout: default-layout |
| 3 | +title: Foundational APIs - Dynamsoft Barcode Reader React Native |
| 4 | +description: This is the user guide of Dynamsoft Barcode Reader React Native SDK (Foundational-API Edition). |
| 5 | +keywords: user guide, React Native, Foundational, barcode, scanner |
| 6 | +needAutoGenerateSidebar: true |
| 7 | +needGenerateH3Content: true |
| 8 | +noTitleIndex: true |
| 9 | +--- |
| 10 | + |
| 11 | +# Build Your Barcode Scanner First App (with Foundational APIs) |
| 12 | + |
| 13 | +This guide will help you develop a fully-customizable barcode scanning app with the Foundational APIs. |
| 14 | + |
| 15 | +## System Requirements |
| 16 | + |
| 17 | +- React Native |
| 18 | + - Supported Version: 0.71.0 or higher |
| 19 | +- Android |
| 20 | + - Supported OS: Android 5.0 (API Level 21) or higher. |
| 21 | + - Supported ABI: armeabi-v7a, arm64-v8a, x86 and x86_64. |
| 22 | + - Development Environment: Android Studio 2022.2.1 or higher. |
| 23 | +- iOS |
| 24 | + - Supported OS: iOS 13+. |
| 25 | + - Supported ABI: arm64 and x86_64. |
| 26 | + - Development Environment: Xcode 13+ (Xcode 14.1+ recommended). |
| 27 | + |
| 28 | +## Installation |
| 29 | + |
| 30 | +Run the following commands in the root directory of your react-native project to add the required dependencies: |
| 31 | + |
| 32 | +```bash |
| 33 | +# using npm |
| 34 | +npm install dynamsoft-capture-vision-react-native |
| 35 | +npm install dynamsoft-barcode-reader-bundle-react-native |
| 36 | + |
| 37 | +# OR using Yarn |
| 38 | +yarn add dynamsoft-capture-vision-react-native |
| 39 | +yarn add dynamsoft-barcode-reader-bundle-react-native |
| 40 | +``` |
| 41 | + |
| 42 | +Than run the command to install all dependencies: |
| 43 | + |
| 44 | +```bash |
| 45 | +# using npm |
| 46 | +npm install |
| 47 | + |
| 48 | +# OR using Yarn |
| 49 | +yarn install |
| 50 | +``` |
| 51 | + |
| 52 | +For iOS, you must install the necessary native frameworks from CocoaPods by running the pod install command as below: |
| 53 | + |
| 54 | +```bash |
| 55 | +cd ios |
| 56 | +pod install |
| 57 | +``` |
| 58 | + |
| 59 | +## License Actication |
| 60 | + |
| 61 | +License is configured when launching the `BarcodeScanner` via `BarcodeScanConfig`. For example: |
| 62 | + |
| 63 | +```js |
| 64 | +const License = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; |
| 65 | +LicenseManager.initLicense(License).catch(e => { |
| 66 | + Alert.alert('License error', e.message); |
| 67 | +}); |
| 68 | +``` |
| 69 | + |
| 70 | +> [!Note] |
| 71 | +> |
| 72 | +> - The LICENSE string here grants a time-limited free trial which requires network connection to work. |
| 73 | +> - You can request a 30-day trial license via the [Request a Trial License](https://www.dynamsoft.com/customer/license/trialLicense?product=dbr&utm_source=guide&package=react-native){:target="_blank"} link. |
| 74 | +> - If you download the <a href="https://www.dynamsoft.com/barcode-reader/downloads/?utm_source=docs#mobile" target="_blank">Installation Package</a>, it comes with a 30-day trial license by default. |
| 75 | +
|
| 76 | +## Build Your Barcode Scanner App |
| 77 | + |
| 78 | +### Preparation |
| 79 | + |
| 80 | +1. Initialize a new React Native project with the following command: |
| 81 | + |
| 82 | + ```bash |
| 83 | + npx @react-native-community/cli init BarcodeScanner |
| 84 | + ``` |
| 85 | + |
| 86 | +2. Open the project folder and follow the [installation section](#installation) to install the dependencies. |
| 87 | + |
| 88 | +### Implementing the Barcode Scanner |
| 89 | + |
| 90 | +Find the App.tsx file in your project and replace the file with the following code: |
| 91 | + |
| 92 | +```js |
| 93 | +import { |
| 94 | + CameraEnhancer, |
| 95 | + CameraView, |
| 96 | + CaptureVisionRouter, |
| 97 | + EnumPresetTemplate, |
| 98 | + LicenseManager, |
| 99 | +} from 'dynamsoft-capture-vision-react-native'; |
| 100 | +import React, {useEffect, useRef} from 'react'; |
| 101 | +import {Alert, AppState, SafeAreaView, StyleSheet} from 'react-native'; |
| 102 | +
|
| 103 | +const License = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'; |
| 104 | +LicenseManager.initLicense(License).catch(e => { |
| 105 | + Alert.alert('License error', e.message); |
| 106 | +}); |
| 107 | +
|
| 108 | +function App(): React.JSX.Element { |
| 109 | + const cameraView = useRef<CameraView>(null!); |
| 110 | + const cvr = CaptureVisionRouter.getInstance(); |
| 111 | + const camera = CameraEnhancer.getInstance(); |
| 112 | +
|
| 113 | + useEffect(() => { |
| 114 | + // Request camera permission once |
| 115 | + CameraEnhancer.requestCameraPermission(); |
| 116 | +
|
| 117 | + // Configure router, camera and view |
| 118 | + cvr.setInput(camera); |
| 119 | + camera.setCameraView(cameraView.current); |
| 120 | +
|
| 121 | + // Barcode result handler |
| 122 | + const receiver = cvr.addResultReceiver({ |
| 123 | + onDecodedBarcodesReceived: ({items}) => { |
| 124 | + if (items?.length) { |
| 125 | + cvr.stopCapturing(); |
| 126 | + Alert.alert( |
| 127 | + `Barcodes count: ${items.length}`, |
| 128 | + items.map((barcode, i) => `${i + 1}. ${barcode.formatString}: ${barcode.text}`).join('\n\n'), |
| 129 | + [ |
| 130 | + { |
| 131 | + text: 'OK', |
| 132 | + onPress: () => { |
| 133 | + cvr.startCapturing(EnumPresetTemplate.PT_READ_BARCODES) |
| 134 | + .catch(e => Alert.alert('Start error', e.message)); |
| 135 | + } |
| 136 | + } |
| 137 | + ] |
| 138 | + ); |
| 139 | + } |
| 140 | + }, |
| 141 | + }); |
| 142 | +
|
| 143 | + // Helper to start camera + scanning |
| 144 | + const startScanning = () => { |
| 145 | + console.log('Starting...'); |
| 146 | + camera.open(); |
| 147 | + cvr.startCapturing(EnumPresetTemplate.PT_READ_BARCODES) |
| 148 | + .catch(e => Alert.alert('Start error', e.message)); |
| 149 | + }; |
| 150 | +
|
| 151 | + // Helper to stop camera + scanning |
| 152 | + const stopScanning = () => { |
| 153 | + console.log('Stopping...'); |
| 154 | + cvr.stopCapturing(); |
| 155 | + camera.close(); |
| 156 | + }; |
| 157 | +
|
| 158 | + // Initial start when component mounts |
| 159 | + startScanning(); |
| 160 | +
|
| 161 | + // Listen to AppState changes |
| 162 | + const sub = AppState.addEventListener('change', nextState => { |
| 163 | + if (nextState === 'active') { |
| 164 | + startScanning(); |
| 165 | + } else if (nextState.match(/inactive|background/)) { |
| 166 | + stopScanning(); |
| 167 | + } |
| 168 | + }); |
| 169 | +
|
| 170 | + // Cleanup on unmount |
| 171 | + return () => { |
| 172 | + sub.remove(); |
| 173 | + stopScanning(); |
| 174 | + cvr.removeResultReceiver(receiver); |
| 175 | + }; |
| 176 | + }, [cvr, camera]); |
| 177 | +
|
| 178 | + return ( |
| 179 | + <SafeAreaView style={StyleSheet.absoluteFill}> |
| 180 | + <CameraView style={StyleSheet.absoluteFill} ref={cameraView}/> |
| 181 | + </SafeAreaView> |
| 182 | + ); |
| 183 | +} |
| 184 | +
|
| 185 | +export default App; |
| 186 | +``` |
| 187 | +
|
| 188 | +### Run the App |
| 189 | +
|
| 190 | +#### Android |
| 191 | +
|
| 192 | +Run the following command to start the app: |
| 193 | +
|
| 194 | +```bash |
| 195 | +# using npm |
| 196 | +npm run android |
| 197 | +
|
| 198 | +# OR using Yarn |
| 199 | +yarn android |
| 200 | +``` |
| 201 | +
|
| 202 | +#### iOS |
| 203 | +
|
| 204 | +1. Include the camera permission via `ios/your-project-name/Info.plist` inside the `<dict>` element: |
| 205 | +
|
| 206 | + ```xml |
| 207 | + <key>NSCameraUsageDescription</key> |
| 208 | + <string></string> |
| 209 | + ``` |
| 210 | +
|
| 211 | +2. Open the workspace via the Xcode. |
| 212 | +
|
| 213 | +3. Configure the *Provisioning* and *Signing* settings. |
| 214 | +
|
| 215 | +4. Run the app with the following command: |
| 216 | +
|
| 217 | + ```bash |
| 218 | + # using npm |
| 219 | + npm run ios |
| 220 | +
|
| 221 | + # OR using Yarn |
| 222 | + yarn ios |
| 223 | + ``` |
| 224 | +
|
| 225 | +## Full Sample Code |
| 226 | +
|
| 227 | +The full sample code is available [here](https://github.com/Dynamsoft/barcode-reader-react-native-samples/tree/main/ScanBarcodes_ReadyToUseComponent). |
| 228 | +
|
| 229 | +## License |
| 230 | +
|
| 231 | +You can request a 30-day trial license via the [Request Trial License](https://www.dynamsoft.com/customer/license/trialLicense?product=dbr&utm_source=github&package=mobile) link. |
| 232 | +
|
| 233 | +## Support |
| 234 | +
|
| 235 | +[https://www.dynamsoft.com/company/contact/](https://www.dynamsoft.com/company/contact/) |
0 commit comments