Skip to content

Commit 3d85dfb

Browse files
Dynamsoft-HenryDynamsoft-Henry
authored
Merge pull request #387 from dynamsoft-docs/preview
Adding expo guide
2 parents 97096c5 + 2f12a69 commit 3d85dfb

File tree

2 files changed

+250
-2
lines changed

2 files changed

+250
-2
lines changed

‎_includes/sidelist-programming/programming-react-native.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22

33
<li lang="react-native"><a style="cursor:pointer;color:#3c3c3c">User Guide</a>
44
<ul lang="react-native">
5-
<li lang="react-native"><a class="otherLinkColour" href="{{ site.dbr_react_native }}user-guide.html" style="cursor:pointer;color:#3c3c3c">Ready-To-Use Guide</a></li>
6-
<li lang="react-native"><a class="otherLinkColour" href="{{ site.dbr_react_native }}foundational-user-guide.html" style="cursor:pointer;color:#3c3c3c">Foundational Guide</a></li>
5+
<li lang="react-native"><a class="otherLinkColour" href="{{ site.dbr_react_native }}user-guide.html" style="cursor:pointer;color:#3c3c3c">Build Your First App</a></li>
6+
<li lang="react-native"><a class="otherLinkColour" href="{{ site.dbr_react_native }}foundational-user-guide.html" style="cursor:pointer;color:#3c3c3c">Build Your App with Foundational APIs</a></li>
7+
<li lang="react-native"><a class="otherLinkColour" href="{{ site.dbr_react_native }}expo-guide.html" style="cursor:pointer;color:#3c3c3c">Build Your App with Expo</a></li>
78
<!-- <li lang="react-native"><a class="otherLinkColour" href="{{ site.dbr_react_native }}driver-license-user-guide.html" style="cursor:pointer;color:#3c3c3c">Driver License Guide</a></li> -->
89
</ul>
910
</li>

‎programming/react-native/expo-guide.md‎

Lines changed: 247 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
---
2+
layout: default-layout
3+
title: Build with Expo
4+
description: This is the user guide of Dynamsoft Barcode Reader React Native SDK for Expo projects.
5+
keywords: user guide, React Native, Expo, barcode
6+
needAutoGenerateSidebar: true
7+
needGenerateH3Content: true
8+
noTitleIndex: true
9+
---
10+
11+
# Barcode Reader Integration Guide for Expo
12+
13+
This guide will help you develop a barcode scanning app with Expo project.
14+
15+
> [!Important]
16+
>
17+
> This SDK uses native modules and **requires an Expo development build**. It will **not work with Expo Go**.
18+
> To use it with Expo, you must use **Expo Bare Workflow**.
19+
20+
```bash
21+
npx expo prebuild
22+
npx expo install dynamsoft-capture-vision-react-native dynamsoft-barcode-reader-bundle-react-native
23+
npx expo run:android / ios
24+
```
25+
26+
## System Requirements
27+
28+
- Expo
29+
- Supported SDK: 50 or higher
30+
- Requires Expo development build (Expo Go is not supported)
31+
- React Native
32+
- Supported Version: 0.71.0 or higher
33+
- Android
34+
- Supported OS: Android 5.0 (API Level 21) or higher.
35+
- Supported ABI: armeabi-v7a, arm64-v8a, x86 and x86_64.
36+
- Development Environment:
37+
- IDE: **Android Studio 2024.3.2** suggested.
38+
- JDK: **Java 17** or higher.
39+
- Gradle: **8.0** or higher.
40+
- iOS
41+
- Supported OS: iOS 13+.
42+
- Supported ABI: arm64 and x86_64.
43+
- Development Environment: Xcode 13+ (Xcode 14.1+ recommended).
44+
45+
## License Activation
46+
47+
License is configured via `LicenseManager`. For example:
48+
49+
```tsx
50+
const License = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
51+
LicenseManager.initLicense(License).catch(e => {
52+
Alert.alert('License error', e.message);
53+
});
54+
```
55+
56+
## Build Your Barcode Scanner App
57+
58+
### Preparation
59+
60+
1. Create a new Expo project with the following command:
61+
62+
```bash
63+
npx create-expo-app ScanBarcodes
64+
cd ScanBarcodes
65+
```
66+
67+
2. Follow the [installation section](#installation) to install the dependencies and generate native projects.
68+
69+
### Installation
70+
71+
Run the following commands in the root directory of your Expo project to add the required dependencies:
72+
73+
```bash
74+
npx expo install dynamsoft-capture-vision-react-native dynamsoft-barcode-reader-bundle-react-native
75+
```
76+
77+
Add the `dynamsoft-capture-vision-react-native` plugin to the `app.json` file:
78+
79+
```json
80+
"plugins": [
81+
"dynamsoft-capture-vision-react-native",
82+
//....
83+
]
84+
```
85+
86+
Since your app requires camera access, you need to add `NSCameraUsageDescription` to the `ios` section of `app.json`:
87+
88+
```json
89+
"ios": {
90+
"infoPlist": {
91+
"NSCameraUsageDescription": "This app uses the camera to scan barcodes."
92+
}
93+
},
94+
```
95+
96+
Since this SDK requires native code, you need to generate the native projects:
97+
98+
```bash
99+
npx expo prebuild
100+
```
101+
102+
For iOS, install the CocoaPods dependencies:
103+
104+
```bash
105+
cd ios
106+
pod install
107+
cd ..
108+
```
109+
110+
### Implementing the Barcode Scanner
111+
112+
New Expo projects use [Expo Router](https://docs.expo.dev/router/introduction/) with a file-based routing system. The main entry point is located in the `app` folder instead of a root `App.tsx` file.
113+
114+
Replace the content of `app/(tabs)/index.tsx` with the following code:
115+
116+
```tsx
117+
import {
118+
CameraEnhancer,
119+
CameraView,
120+
CaptureVisionRouter,
121+
EnumPresetTemplate,
122+
LicenseManager,
123+
} from 'dynamsoft-capture-vision-react-native';
124+
import React, {useEffect, useRef} from 'react';
125+
import {Alert, AppState, StyleSheet, View} from 'react-native';
126+
// Initialize the license.
127+
// The license string here is a trial license. Note that network connection is required for this license to work.
128+
// You can request an extension via the following link: https://www.dynamsoft.com/customer/license/trialLicense?product=dbr&utm_source=samples&package=react-native
129+
const License = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
130+
LicenseManager.initLicense(License).catch(e => {
131+
Alert.alert('License error', e.message);
132+
});
133+
134+
function App(): React.JSX.Element {
135+
const cameraView = useRef<CameraView>(null!);
136+
const cvr = CaptureVisionRouter.getInstance();
137+
const camera = CameraEnhancer.getInstance();
138+
139+
useEffect(() => {
140+
// Request camera permission once
141+
CameraEnhancer.requestCameraPermission();
142+
143+
// Configure router, camera and view
144+
cvr.setInput(camera);
145+
camera.setCameraView(cameraView.current);
146+
147+
// Barcode result handler
148+
const receiver = cvr.addResultReceiver({
149+
onDecodedBarcodesReceived: ({items}) => {
150+
if (items?.length) {
151+
cvr.stopCapturing();
152+
Alert.alert(
153+
`Barcodes count: ${items.length}`,
154+
items.map((barcode, i) => `${i + 1}. ${barcode.formatString}: ${barcode.text}`).join('\n\n'),
155+
[
156+
{
157+
text: 'OK',
158+
onPress: () => {
159+
cvr.startCapturing(EnumPresetTemplate.PT_READ_BARCODES)
160+
.catch(e => Alert.alert('Start error', e.message));
161+
}
162+
}
163+
]
164+
);
165+
}
166+
},
167+
});
168+
169+
// Helper to start camera + scanning
170+
const startScanning = () => {
171+
console.log('Starting...');
172+
camera.open();
173+
cvr.startCapturing(EnumPresetTemplate.PT_READ_BARCODES)
174+
.catch(e => Alert.alert('Start error', e.message));
175+
};
176+
177+
// Helper to stop camera + scanning
178+
const stopScanning = () => {
179+
console.log('Stopping...');
180+
cvr.stopCapturing();
181+
camera.close();
182+
};
183+
184+
// Initial start when component mounts
185+
startScanning();
186+
187+
// Listen to AppState changes
188+
const sub = AppState.addEventListener('change', nextState => {
189+
if (nextState === 'active') {
190+
startScanning();
191+
} else if (nextState.match(/inactive|background/)) {
192+
stopScanning();
193+
}
194+
});
195+
196+
// Cleanup on unmount
197+
return () => {
198+
sub.remove();
199+
stopScanning();
200+
cvr.removeResultReceiver(receiver);
201+
camera.setCameraView(null);
202+
};
203+
}, [cvr, camera]);
204+
205+
return (
206+
<View style={StyleSheet.absoluteFill}>
207+
<CameraView style={StyleSheet.absoluteFill} ref={cameraView}/>
208+
</View>
209+
);
210+
}
211+
212+
export default App;
213+
```
214+
215+
> [!Note]
216+
>
217+
> - The LICENSE string here grants a time-limited free trial which requires network connection to work.
218+
> - 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.
219+
> - 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.
220+
221+
### Run the App
222+
223+
#### Build and Run on Android
224+
225+
For Android, run the following command:
226+
227+
```bash
228+
npx expo run:android
229+
```
230+
231+
For iOS, run the following command:
232+
233+
```bash
234+
npx expo run:ios
235+
```
236+
237+
## Full Sample Code
238+
239+
The full sample code is available [here](https://github.com/Dynamsoft/barcode-reader-react-native-samples/tree/main/ScanBarcodes_Expo).
240+
241+
## License
242+
243+
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=github&package=mobile) link.
244+
245+
## Support
246+
247+
[https://www.dynamsoft.com/company/contact/](https://www.dynamsoft.com/company/contact/)

0 commit comments

Comments
 (0)