@cleanuidev/react-native-scanner 1.0.0-beta.6 → 1.0.0-beta.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -13,15 +13,21 @@
13
13
 
14
14
  **Built with ❤️ by [CleanUI.dev](https://cleanui.dev)**
15
15
 
16
- [Features](#-features) • [Why Choose](#-why-choose-this-library) • [Comparison](#-comparison-with-other-libraries) • [Quick Start](#-quick-start) • [Installation](#-installation) • [FAQ](#-frequently-asked-questions)
17
-
18
16
  </div>
19
17
 
20
18
  ---
21
19
 
22
- ## Features
20
+ ## What’s in this README
23
21
 
24
- <div align="center">
22
+ - [Features](#-features) — What the library does
23
+ - [Quick Start](#-quick-start) — Get running in a few lines
24
+ - [Installation](#-installation) — Expo vs bare React Native
25
+ - [Usage & API](#usage) — Examples and prop reference
26
+ - [FAQ](#-frequently-asked-questions) — Common questions
27
+
28
+ ---
29
+
30
+ ## ✨ Features
25
31
 
26
32
  | Feature | Description |
27
33
  |:------:|:-----------|
@@ -34,22 +40,14 @@
34
40
 
35
41
  </div>
36
42
 
37
- ---
38
43
 
39
44
  ## 🎯 Why Choose @cleanuidev/react-native-scanner?
40
45
 
41
- - **🎯 Target Area Scanning**: Unlike other libraries, built-in support for limiting scan area, restricting scanning region, and scanning within configurable target areas for precise detection
42
- - **🚀 High Performance**: Uses native CameraX & ML Kit (Android) and AVFoundation & Vision (iOS) for optimal performance
43
- - **📱 New Architecture Ready**: Full support for React Native's new architecture (Fabric) on both platforms
44
- - **🔧 Easy Integration**: Simple API with sensible defaults - get started in minutes
45
- - **📊 Multiple Scan Strategies**: Process one, all, largest, or sorted barcodes with built-in strategies
46
- - **🎨 Highly Customizable**: Configurable target areas, barcode frames, and scanning behavior
47
- - **📦 Lightweight**: Minimal dependencies, optimized bundle size
48
- - **✅ Active Maintenance**: Regularly updated with bug fixes and new features
46
+ If you mainly need barcode/QR scanning and want a **focus area** (scan only inside a box) without wiring it yourself, this library gives you that out of the box. For a full comparison, see the table below.
49
47
 
50
48
  ---
51
49
 
52
- ## 🆚 Comparison with Other Libraries
50
+ ## 🆚 Comparison
53
51
 
54
52
  | Feature | @cleanuidev/react-native-scanner | react-native-vision-camera | expo-camera |
55
53
  |---------|--------------------------------|---------------------------|-------------|
@@ -103,9 +101,9 @@ yarn add @cleanuidev/react-native-scanner@beta
103
101
  To install a specific beta version:
104
102
 
105
103
  ```bash
106
- npm install @cleanuidev/react-native-scanner@1.0.0-beta.6
104
+ npm install @cleanuidev/react-native-scanner@1.0.0-beta.7
107
105
  # or
108
- yarn add @cleanuidev/react-native-scanner@1.0.0-beta.6
106
+ yarn add @cleanuidev/react-native-scanner@1.0.0-beta.7
109
107
  ```
110
108
 
111
109
  > **Note**: Once the library reaches stable release (1.0.0), you can install it without the `@beta` tag:
@@ -202,15 +200,57 @@ For iOS, add camera usage description to your `ios/YourApp/Info.plist`:
202
200
  <string>This app needs camera access to scan barcodes and QR codes</string>
203
201
  ```
204
202
 
205
- Then install CocoaPods dependencies:
203
+ Then install CocoaPods:
206
204
 
207
205
  ```bash
208
206
  cd ios && pod install && cd ..
209
207
  ```
210
208
 
209
+ ---
210
+
211
211
  ## Usage
212
212
 
213
- ### Basic Scanner
213
+ ## Permissions
214
+
215
+ Request camera permission before showing the scanner. Use [react-native-permissions](https://github.com/zoontek/react-native-permissions) to request on both Android and iOS:
216
+
217
+ ```bash
218
+ npm install react-native-permissions
219
+ # Then link and add to Info.plist (iOS) / AndroidManifest (Android) per the library’s setup.
220
+ ```
221
+
222
+ ```tsx
223
+ import { Platform } from 'react-native';
224
+ import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';
225
+
226
+ const cameraPermission =
227
+ Platform.OS === 'ios'
228
+ ? PERMISSIONS.IOS.CAMERA
229
+ : PERMISSIONS.ANDROID.CAMERA;
230
+
231
+ const requestCameraPermission = async (): Promise<boolean> => {
232
+ const status = await check(cameraPermission);
233
+ if (status === RESULTS.GRANTED) return true;
234
+ if (status === RESULTS.BLOCKED || status === RESULTS.UNAVAILABLE) return false;
235
+
236
+ const result = await request(cameraPermission);
237
+ return result === RESULTS.GRANTED;
238
+ };
239
+
240
+ // Usage: request before showing the scanner
241
+ const [hasPermission, setHasPermission] = useState<boolean | null>(null);
242
+
243
+ useEffect(() => {
244
+ requestCameraPermission().then(setHasPermission);
245
+ }, []);
246
+
247
+ if (hasPermission === null) return null; // or a loading state
248
+ if (!hasPermission) return <Text>Camera permission is required</Text>;
249
+
250
+ return <ScannerView ... />;
251
+ ```
252
+
253
+ ### Basic scanner
214
254
 
215
255
  ```tsx
216
256
  import React from 'react';
@@ -261,7 +301,6 @@ export default function FocusAreaScanner() {
261
301
  color: '#00FF00', // Color of the target area border
262
302
  };
263
303
 
264
- // Barcode frames configuration
265
304
  const barcodeFramesConfig = {
266
305
  enabled: true, // Show frames around detected barcodes
267
306
  color: '#FF0000', // Color of barcode frames
@@ -364,7 +403,7 @@ BarcodeScanStrategy.BIGGEST // Process only the largest barcode by area
364
403
  BarcodeScanStrategy.SORT_BY_BIGGEST // Process all barcodes sorted by size (largest first)
365
404
  ```
366
405
 
367
- ### Barcode Formats
406
+ ### Barcode formats
368
407
 
369
408
  ```tsx
370
409
  import { BarcodeFormat } from '@cleanuidev/react-native-scanner';
@@ -454,7 +493,6 @@ Limit scan area and restrict scanning to a specific region:
454
493
  size: 300, // 300x300 pixel square
455
494
  color: '#00FF00', // Green border
456
495
  }}
457
- // Only scans within the limited scan area
458
496
  />
459
497
  ```
460
498
 
@@ -504,7 +542,7 @@ You can position the target area anywhere on the screen using percentage-based c
504
542
  />
505
543
  ```
506
544
 
507
- ## Barcode Frame Visualization
545
+ ## Barcode frames
508
546
 
509
547
  The scanner can display visual frames around detected barcodes to help users see what's being scanned:
510
548
 
@@ -605,11 +643,7 @@ The torch/flashlight can be controlled via the `torch` prop:
605
643
 
606
644
  ```tsx
607
645
  const [torchEnabled, setTorchEnabled] = useState(false);
608
-
609
- <ScannerView
610
- torch={torchEnabled}
611
- // ... other props
612
- />
646
+ <ScannerView torch={torchEnabled} ... />
613
647
  ```
614
648
 
615
649
  ## Keep Screen On
@@ -724,7 +758,7 @@ Yes! The target area is optional. By default, you can scan the entire camera vie
724
758
  QR Code, Code128, Code39, EAN-13, EAN-8, UPC-A, UPC-E, Data Matrix, PDF417, Aztec, and ITF (Interleaved 2 of 5). See the [Barcode Formats](#barcode-formats) section for the complete list.
725
759
 
726
760
  ### Is it production-ready?
727
- The library is currently in beta (1.0.0-beta.6) but is stable and actively maintained. Production use is recommended with proper testing. We're working towards a stable 1.0.0 release.
761
+ The library is currently in beta (1.0.0-beta.7) but is stable and actively maintained. Production use is recommended with proper testing. We're working towards a stable 1.0.0 release.
728
762
 
729
763
  ### Does it work with React Native 0.83+?
730
764
  Yes! The library supports React Native 0.83 and newer versions, including full support for the new architecture.
@@ -793,7 +827,3 @@ Need professional help with implementation, custom development, or enterprise su
793
827
  ## License
794
828
 
795
829
  This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
796
-
797
- ---
798
-
799
- Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
@@ -76,8 +76,8 @@ class ScannerViewManager : SimpleViewManager<ScannerView>(),
76
76
  size.type == ReadableType.Number -> FrameSize.Square(size.asInt())
77
77
  size.type == ReadableType.Map -> {
78
78
  val frameSizeMap = size.asMap()
79
- val width = frameSizeMap.getInt("width")
80
- val height = frameSizeMap.getInt("height")
79
+ val width = frameSizeMap?.getInt("width") ?: 0
80
+ val height = frameSizeMap?.getInt("height") ?: 0
81
81
  FrameSize.Rectangle(width, height)
82
82
  }
83
83
  else -> FrameSize.Square(300) // Default
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cleanuidev/react-native-scanner",
3
- "version": "1.0.0-beta.6",
3
+ "version": "1.0.0-beta.7",
4
4
  "description": "High-performance native barcode and QR code scanner for React Native. Scan barcodes in configurable target areas for precise detection. Built with CameraX & ML Kit (Android) and AVFoundation & Vision (iOS).",
5
5
  "main": "./lib/module/index.js",
6
6
  "types": "./lib/typescript/src/index.d.ts",