Skip to content

Commit a071f3f

Browse files
committed
Update ReadMe
1 parent dffcff0 commit a071f3f

9 files changed

+117
-39
lines changed

.images/ScanbotSDKLogo.png

50.8 KB
Loading

.images/ScanbotSDKLogo_darkmode.png

52.9 KB
Loading

.images/auto-capture.png

1.19 MB
Loading

.images/auto-crop.png

1.1 MB
Loading

.images/check-scanner.png

633 KB
Loading

.images/mrz-scanner.png

1.77 MB
Loading

.images/user-guidance.png

1.21 MB
Loading

.images/vin-scanner.png

809 KB
Loading

README.md

Lines changed: 117 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,36 @@
1-
# Scanbot Document Scanning Example App for React Native
1+
<p align="left">
2+
<img src=".images/ScanbotSDKLogo.png#gh-light-mode-only" width="15%" />
3+
</p>
4+
<p align="left">
5+
<img src=".images/ScanbotSDKLogo_darkmode.png#gh-dark-mode-only" width="15%" />
6+
</p>
27

3-
This example app shows how to integrate the [Scanbot Document Scanner SDK](https://scanbot.io/developer/react-native-document-scanner/) and [Scanbot Data Capture SDK](https://scanbot.io/developer/react-native-data-capture/) for React Native.
4-
5-
The Scanbot SDK React Native Module is available as an [npm package](https://www.npmjs.com/package/react-native-scanbot-sdk).
6-
7-
For more details please see this [documentation](https://docs.scanbot.io/document-scanner-sdk/react-native/introduction/).
8+
# Example app for the Scanbot React Native Document Scanner SDK and Data Capture Modules
89

10+
This example app demonstrates how to integrate the [Scanbot Document Scanner SDK](https://scanbot.io/document-scanner-sdk/?utm_source=github.com&utm_medium=referral&utm_campaign=dev_sites) and [Scanbot Data Capture Modules](https://scanbot.io/data-capture-software/?utm_source=github.com&utm_medium=referral&utm_campaign=dev_sites) for React Native.
911

1012
## What is the Scanbot SDK?
1113

12-
The Scanbot SDK lets you integrate barcode & document scanning, as well as data extraction functionalities, into your mobile apps and website. It contains different modules that are licensable for an annual fixed price. For more details, visit our website https://scanbot.io.
13-
14-
15-
## Trial License
16-
17-
The Scanbot SDK will run without a license for one minute per session!
18-
19-
After the trial period has expired, all SDK functions and UI components will stop working. You have to restart the app to get another one-minute trial period.
20-
21-
To try the Scanbot SDK without a one-minute limit, you can get a free “no-strings-attached” trial license. Please submit the [Trial License Form](https://scanbot.io/trial/) on our website.
14+
The Scanbot SDK is a set of high-level APIs that lets you integrate document scanning and data extraction functionalities into your mobile apps and websites. It runs on all common mobile devices and operates entirely offline. No data is transmitted to our or third-party servers.
2215

23-
## Free Developer Support
16+
With our Ready-To-Use UI (RTU UI) components, you can integrate the Scanbot SDK into your React Native app in less than an hour.
2417

25-
We provide free "no-strings-attached" developer support for the implementation & testing of the Scanbot SDK.
26-
If you encounter technical issues with integrating the Scanbot SDK or need advice on choosing the appropriate
27-
framework or features, please visit our [Support Page](https://docs.scanbot.io/support/).
18+
💡 For more details about the Scanbot Document Scanner SDK and Data Capture Modules, please check out our [documentation](https://docs.scanbot.io/document-scanner-sdk/react-native/introduction/?utm_source=github.com&utm_medium=referral&utm_campaign=dev_sites).
2819

29-
## Documentation
30-
👉 [Scanbot SDK documentation](https://docs.scanbot.io/document-scanner-sdk/react-native/introduction/)
20+
## How to run this example app?
3121

32-
## How to run this app
33-
34-
### Set up Environment
22+
### Set up the Environment
3523

3624
> **Note**: Make sure you have completed the [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding.
3725
38-
Testing on an actual device is essential, so ensure you have one available.
26+
Testing on an actual device is essential, so ensure you have one available, for both iOS or Android platforms.
27+
28+
### Install node modules
3929

40-
### Install node modules
41-
```bash
30+
```
4231
# Install the required dependencies
4332
yarn install
33+
4434
# OR using npm
4535
npm install
4636
```
@@ -51,23 +41,28 @@ For iOS, remember to install CocoaPods dependencies (this only needs to be run o
5141

5242
The first time you create a new project, run the Ruby bundler to install CocoaPods itself:
5343

54-
```sh
44+
```
5545
bundle install
5646
```
5747

5848
Then, and every time you update your native dependencies, run:
5949

60-
```sh
50+
```
6151
cd ios
6252
bundle exec pod install
6353
```
6454

65-
#### Signing
66-
- Open the **workspace** file `ScanbotBarcodeExampleReact.xcworkspace` (not .xcodeproj) from the `ios` directory in Xcode.
67-
- Adjust *Provisioning* and *Signing* settings.
55+
### Signing
56+
57+
* Open the **workspace** file `ScanbotBarcodeExampleReact.xcworkspace` (not .xcodeproj) from the `iOS` directory in Xcode.
58+
59+
* Adjust *Provisioning* and *Signing* settings.
60+
61+
Also, ensure that your app correctly handles the **camera permission request** in the Info.plist file to allow barcode and document scanning.
6862

6963
### Run on Android
70-
```sh
64+
65+
```
7166
# Using npm
7267
npm run android
7368
@@ -76,22 +71,105 @@ yarn android
7671
```
7772

7873
### Run on iOS
79-
```sh
74+
75+
```
8076
# Using npm
8177
npm run ios
8278
8379
# OR using Yarn
8480
yarn ios
8581
```
8682

87-
If everything is set up correctly, you should see your new app running on your device.
83+
If everything is set up correctly, you should see your new React Native app running on your device.
8884

8985
This is not the only way to run your app — you can also run it directly from within Android Studio and Xcode respectively:
9086

91-
###### Still at a loss? It is probably a cache issue
87+
#### Troubleshooting
88+
89+
If you experience any issues, it's likely a cache problem. To clear it, run:
9290

93-
```bash
91+
```
9492
yarn run clean
9593
```
94+
9695
* `npm cache clean --force && watchman watch-del-all`
97-
* Restart metro server!
96+
* Then, restart the metro server, and your React Native document scanner should be working smoothly again.
97+
98+
## Overview of the Scanbot SDK
99+
100+
### Document Scanner SDK
101+
102+
The Scanbot React Native Document Scanner SDK offers the following features:
103+
104+
* **User guidance**: Ease of use is crucial for large user bases. Our on-screen user guidance helps even non-tech-savvy users create perfect scans under any conditions, even with decreased camera brightness. This feature ensures that documents are properly framed and aligned before the scan is taken, ensuring the best quality of the captured image.
105+
106+
* **Automatic capture**: The SDK automatically captures the scan when the device camera is optimally positioned over the document. This minimizes blurry or incomplete scans.
107+
108+
* **Automatic cropping**: Our SDK automatically applies perspective correction and crops scanned documents, ensuring a properly cropped image every time.
109+
110+
* **Custom image filters:** Every use case has specific image requirements. The SDK’s custom filters allow you to transform the captured image into optimal input for your backend systems. They include several color, grayscale, and binarization options.
111+
112+
* **Document Quality Analyzer:** This feature automatically rates the quality of the scanned pages from “very poor” to “excellent.” If it is low, it can prompt the user to rescan.
113+
114+
* **Export formats:** The Scanbot React Native Document Scanner SDK supports several formats for exporting digitized documents (JPG, PDF, TIFF, and PNG).
115+
116+
| ![User guidance](.images/user-guidance.png) | ![Automatic capture](.images/auto-capture.png) | ![Automatic cropping](.images/auto-crop.png) |
117+
| :-- | :-- | :-- |
118+
119+
120+
### Data Capture Modules
121+
122+
The Scanbot SDK Data Capture Modules allow you to extract data from a wide range of structured documents and to integrate OCR text recognition capabilities. They include:
123+
124+
#### [MRZ Scanner](https://scanbot.io/data-capture-software/mrz-scanner/?utm_source=github.com&utm_medium=referral&utm_campaign=dev_sites)
125+
This module allows quick and accurate data extraction from the machine-readable zones on identity documents. It captures all important MRZ data from IDs and passports and returns it in the form of simple key-value pairs. This is much simpler, faster, and less mistake-prone than manual data entry.
126+
127+
#### [Check Scanner (MICR)](https://scanbot.io/data-capture-software/check-scanner/?utm_source=github.com&utm_medium=referral&utm_campaign=dev_sites)
128+
The MICR Scanner offers reliable data extraction from international paper checks, capturing check numbers, routing numbers, and account numbers from MICR codes. This simplifies workflows and reduces errors that frustrate customers and employees.
129+
130+
#### [Text Pattern Scanner](https://scanbot.io/data-capture-software/data-scanner/?utm_source=github.com&utm_medium=referral&utm_campaign=dev_sites)
131+
Our Text Pattern Scanner allows quick and accurate extraction of single-line data. It captures information based on customizable patterns tailored to your specific use case. This replaces error-prone manual data entry with automatic capture.
132+
133+
#### [VIN Scanner](https://scanbot.io/data-capture-software/vin-scanner/?utm_source=github.com&utm_medium=referral&utm_campaign=dev_sites)
134+
The VIN scanner enables instant capture of vehicle identification numbers (VINs) from trucks or car doors. It uses OCR to convert the image of the VIN code into structured data for backend processing. This module integrates into mobile or web-based fleet management applications, enabling you to replace error-prone manual entry with fast, reliable data extraction.
135+
136+
#### Document Data Extractor
137+
Through this feature, our SDK offers document detection and data capture capabilities for a wider range of documents. It accurately identifies and crops various standardized document types including [German ID cards](https://scanbot.io/data-capture-software/id-scanner/?utm_source=github.com&utm_medium=referral&utm_campaign=dev_sites), passports, [driver's licenses](https://scanbot.io/data-capture-software/german-drivers-license-scanner/?utm_source=github.com&utm_medium=referral&utm_campaign=dev_sites), [residence permits](https://scanbot.io/data-capture-software/residence-permit-scanner/?utm_source=github.com&utm_medium=referral&utm_campaign=dev_sites), and the [EHIC](https://scanbot.io/data-capture-software/ehic-scanner/?utm_source=github.com&utm_medium=referral&utm_campaign=dev_sites). It uses the Scanbot OCR engine for accurate data field recognition, without requiring additional OCR language files.
138+
139+
| ![MRZ Scanner](.images/mrz-scanner.png) | ![VIN Scanner](.images/vin-scanner.png) | ![Check Scanner](.images/check-scanner.png) |
140+
| :-- | :-- | :-- |
141+
142+
## Additional information
143+
144+
### Free integration support
145+
146+
Need help integrating or testing our React Native Document Scanner SDK? We offer [free developer support](https://docs.scanbot.io/support/?utm_source=github.com&utm_medium=referral&utm_campaign=dev_sites) via Slack, MS Teams, or email.
147+
148+
As a customer, you also get access to a dedicated support Slack or Microsoft Teams channel to talk directly to your Customer Success Manager and our engineers.
149+
150+
### Trial license and pricing
151+
152+
The Scanbot SDK examples will run for one minute per session without a license. After that, all functionalities and UI components will stop working.
153+
154+
To try the Scanbot React Native SDK without the one-minute limit, you can request a free, no-strings-attached [7-day trial license](https://scanbot.io/trial/?utm_source=github.com&utm_medium=referral&utm_campaign=dev_sites) for your React Native project.
155+
156+
Alternatively, check out our [demo apps](https://scanbot.io/demo-apps/?utm_source=github.com&utm_medium=referral&utm_campaign=dev_sites) to test the SDK.
157+
158+
Our pricing model is simple: Unlimited document scanning for a flat annual license fee, full support included. There are no tiers, usage charges, or extra fees. [Contact](https://scanbot.io/contact-sales/?utm_source=github.com&utm_medium=referral&utm_campaign=dev_sites) our team to receive your quote.
159+
160+
### Other supported platforms
161+
162+
Besides React Native, the Scanbot Document Scanner SDK is also available on:
163+
164+
* [Android](https://github.com/doo/scanbot-sdk-example-android) (native)
165+
* [iOS](https://github.com/doo/scanbot-sdk-example-ios) (native)
166+
* [Flutter](https://github.com/doo/scanbot-sdk-example-flutter)
167+
* [Capacitor & Ionic (Angular)](https://github.com/doo/scanbot-sdk-example-capacitor-ionic)
168+
* [Capacitor & Ionic (React)](https://github.com/doo/scanbot-sdk-example-ionic-react)
169+
* [Capacitor & Ionic (Vue.js)](https://github.com/doo/scanbot-sdk-example-ionic-vuejs)
170+
* [Cordova & Ionic](https://github.com/doo/scanbot-sdk-example-ionic)
171+
* [.NET MAUI](https://github.com/doo/scanbot-sdk-maui-example)
172+
* [JavaScript](https://github.com/doo/scanbot-sdk-example-web)
173+
* [Xamarin](https://github.com/doo/scanbot-sdk-example-xamarin) & [Xamarin.Forms](https://github.com/doo/scanbot-sdk-example-xamarin-forms)
174+
175+
Our Barcode Scanner SDK additionally also supports [Compose Multiplatform / KMP](https://github.com/doo/scanbot-barcode-scanner-sdk-example-kmp), [UWP](https://github.com/doo/scanbot-barcode-scanner-sdk-example-windows) (Windows), and [Linux](https://github.com/doo/scanbot-sdk-example-linux).

0 commit comments

Comments
 (0)