@cleanuidev/react-native-scanner 1.0.0-beta.1 → 1.0.0-beta.2

package/README.md

@@ -4,14 +4,16 @@
 
 **A powerful, native barcode and QR code scanner for React Native**
 
+![React Native Barcode Scanner Demo - QR Code and Barcode Scanning with Focus Area](./preview.gif)
+
 [![npm version](https://img.shields.io/npm/v/@cleanuidev/react-native-scanner?label=beta&color=blue)](https://www.npmjs.com/package/@cleanuidev/react-native-scanner)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![Platform](https://img.shields.io/badge/Platform-Android-blue.svg)](https://www.android.com/)
+[![Platform](https://img.shields.io/badge/Platform-Android%20%7C%20iOS-blue.svg)](https://reactnative.dev/)
 [![React Native](https://img.shields.io/badge/React%20Native-0.83+-61DAFB?logo=react)](https://reactnative.dev/)
 
 **Built with ❤️ by [CleanUI.dev](https://cleanui.dev)**
 
-[Features](#-features) • [Installation](#-installation) • [Documentation](#-documentation) • [Support](#-consulting--support)
+[Features](#-features) • [Installation](#-installation) • [Documentation](#-documentation)
 
 </div>
 
@@ -23,12 +25,12 @@
 
 | Feature | Description |
 |:------:|:-----------|
-| 🚀 **Native Performance** | Built with CameraX and ML Kit for optimal performance |
+| 🚀 **Native Performance** | Built with CameraX & ML Kit (Android) and AVFoundation & Vision (iOS) for optimal performance |
 | 🎯 **Focus Area** | Configurable focus area with optional overlay for precise scanning |
 | 🔦 **Torch Control** | Built-in flashlight/torch control |
 | 📊 **Multiple Formats** | Support for QR codes, Code128, Code39, EAN, UPC, and more |
 | 🎨 **Customizable** | Configurable focus area colors, barcode frame visualization, and scanning behavior |
-| 📱 **Cross Platform** | Android support (iOS coming soon) |
+| 📱 **Cross Platform** | Android & iOS support (new Fabric architecture) |
 
 </div>
 
@@ -56,13 +58,15 @@ npm install @cleanuidev/react-native-scanner@1.0.0-beta.1
 yarn add @cleanuidev/react-native-scanner@1.0.0-beta.1
 ```
 
-> **💡 Note**: Once the library reaches stable release (1.0.0), you can install it without the `@beta` tag:
+> **Note**: Once the library reaches stable release (1.0.0), you can install it without the `@beta` tag:
 > ```bash
 > npm install @cleanuidev/react-native-scanner
 > # or
 > yarn add @cleanuidev/react-native-scanner
 > ```
 
+## Platform Setup
+
 ### Android Setup
 
 Add the following permissions to your `android/app/src/main/AndroidManifest.xml`:
@@ -75,9 +79,22 @@ Add the following permissions to your `android/app/src/main/AndroidManifest.xml`
 <uses-feature android:name="android.hardware.camera.flash" android:required="false" />
 ```
 
----
+### iOS Setup
 
-## 🚀 Quick Start
+For iOS, add camera usage description to your `ios/YourApp/Info.plist`:
+
+```xml
+<key>NSCameraUsageDescription</key>
+<string>This app needs camera access to scan barcodes and QR codes</string>
+```
+
+Then install CocoaPods dependencies:
+
+```bash
+cd ios && pod install && cd ..
+```
+
+## Usage
 
 ### Basic Scanner
 
@@ -174,34 +191,12 @@ export default function FocusAreaScanner() {
 }
 ```
 
----
-
-## 🎨 UI Design Note
-
-> **💡 Note**: The native overlays and frames are provided to fulfill minimum design requirements and for debugging during development. We **recommend implementing custom React Native UI** for enhanced user experiences.
+## API Reference
 
-To use custom UI, simply disable the native visual overlays and build your own:
-
-```tsx
-<ScannerView
-  focusArea={{ enabled: true, showOverlay: false }} // Disable native overlay
-  barcodeFrames={{ enabled: false }} // Disable native frames
-  onBarcodeScanned={handleBarcodeScanned}
-/>
-```
-
-Then layer your custom React Native components on top for a fully branded experience.
-
----
-
-## 📚 Documentation
-
-### API Reference
-
-#### Props
+### Props
 
 | Prop | Type | Default | Description |
-|:----:|:----:|:-------:|:-----------|
+|------|------|---------|-------------|
 | `barcodeTypes` | `BarcodeFormat[]` | `[BarcodeFormat.QR_CODE]` | Array of barcode formats to scan |
 | `focusArea` | `FocusAreaConfig` | - | Focus area configuration |
 | `barcodeFrames` | `BarcodeFramesConfig` | - | Barcode frame visualization configuration |
@@ -214,9 +209,7 @@ Then layer your custom React Native components on top for a fully branded experi
 | `onScannerError` | `function` | - | Callback when scanner encounters an error |
 | `onLoad` | `function` | - | Callback when scanner is loaded |
 
-#### Configuration Types
-
-##### FocusAreaConfig
+#### FocusAreaConfig
 
 ```tsx
 type FocusAreaConfig = {
@@ -227,7 +220,7 @@ type FocusAreaConfig = {
 };
 ```
 
-##### BarcodeFramesConfig
+#### BarcodeFramesConfig
 
 ```tsx
 type BarcodeFramesConfig = {
@@ -237,7 +230,7 @@ type BarcodeFramesConfig = {
 };
 ```
 
-##### FrameSize
+#### FrameSize
 
 ```tsx
 type FrameSize = number | { width: number; height: number };
@@ -257,7 +250,7 @@ BarcodeScanStrategy.BIGGEST          // Process only the largest barcode by area
 BarcodeScanStrategy.SORT_BY_BIGGEST  // Process all barcodes sorted by size (largest first)
 ```
 
-#### Barcode Formats
+### Barcode Formats
 
 ```tsx
 import { BarcodeFormat } from '@cleanuidev/react-native-scanner';
@@ -276,10 +269,9 @@ BarcodeFormat.AZTEC          // Aztec
 BarcodeFormat.ITF            // ITF (Interleaved 2 of 5)
 ```
 
-#### Event Payloads
-
-##### onBarcodeScanned
+### Event Payloads
 
+#### onBarcodeScanned
 ```tsx
 {
   nativeEvent: [
@@ -299,8 +291,7 @@ BarcodeFormat.ITF            // ITF (Interleaved 2 of 5)
 }
 ```
 
-##### onScannerError
-
+#### onScannerError
 ```tsx
 {
   nativeEvent: {
@@ -310,8 +301,7 @@ BarcodeFormat.ITF            // ITF (Interleaved 2 of 5)
 }
 ```
 
-##### onLoad
-
+#### onLoad
 ```tsx
 {
   nativeEvent: {
@@ -321,15 +311,11 @@ BarcodeFormat.ITF            // ITF (Interleaved 2 of 5)
 }
 ```
 
----
-
-## 🎯 Advanced Usage
-
-### Focus Area Configuration
+## Focus Area Configuration
 
 The focus area feature provides precise control over where barcodes are scanned:
 
-#### Basic Focus Area
+### Basic Focus Area
 
 ```tsx
 <ScannerView
@@ -342,7 +328,7 @@ The focus area feature provides precise control over where barcodes are scanned:
 />
 ```
 
-#### Focus Area with Restricted Scanning
+### Focus Area with Restricted Scanning
 
 ```tsx
 <ScannerView
@@ -356,7 +342,7 @@ The focus area feature provides precise control over where barcodes are scanned:
 />
 ```
 
-#### Rectangular Focus Area
+### Rectangular Focus Area
 
 ```tsx
 <ScannerView
@@ -369,11 +355,11 @@ The focus area feature provides precise control over where barcodes are scanned:
 />
 ```
 
-### Barcode Frame Visualization
+## Barcode Frame Visualization
 
 The scanner can display visual frames around detected barcodes to help users see what's being scanned:
 
-#### Show All Barcode Frames
+### Show All Barcode Frames
 
 ```tsx
 <ScannerView
@@ -385,7 +371,7 @@ The scanner can display visual frames around detected barcodes to help users see
 />
 ```
 
-#### Show Frames Only in Focus Area
+### Show Frames Only in Focus Area
 
 ```tsx
 <ScannerView
@@ -402,11 +388,11 @@ The scanner can display visual frames around detected barcodes to help users see
 />
 ```
 
-### Barcode Scan Strategy
+## Barcode Scan Strategy
 
-The scanner supports different strategies for processing multiple detected barcodes. The `onBarcodeScanned` event always returns an array of barcodes, even when only one barcode is processed.
+The scanner now supports different strategies for processing multiple detected barcodes. The `onBarcodeScanned` event always returns an array of barcodes, even when only one barcode is processed.
 
-#### Process All Barcodes (Default)
+### Process All Barcodes (Default)
 
 ```tsx
 <ScannerView
@@ -418,7 +404,7 @@ The scanner supports different strategies for processing multiple detected barco
 />
 ```
 
-#### Process Only the First Barcode
+### Process Only the First Barcode
 
 ```tsx
 <ScannerView
@@ -433,7 +419,7 @@ The scanner supports different strategies for processing multiple detected barco
 />
 ```
 
-#### Process Only the Largest Barcode
+### Process Only the Largest Barcode
 
 ```tsx
 <ScannerView
@@ -449,7 +435,7 @@ The scanner supports different strategies for processing multiple detected barco
 />
 ```
 
-#### Process All Barcodes Sorted by Size
+### Process All Barcodes Sorted by Size
 
 ```tsx
 <ScannerView
@@ -464,7 +450,7 @@ The scanner supports different strategies for processing multiple detected barco
 />
 ```
 
-### Torch Control
+## Torch Control
 
 The torch/flashlight can be controlled via the `torch` prop:
 
@@ -477,11 +463,11 @@ const [torchEnabled, setTorchEnabled] = useState(false);
 />
 ```
 
-### Keep Screen On
+## Keep Screen On
 
 The scanner automatically keeps the screen on while the camera is active to prevent auto-lock during scanning sessions. This behavior can be controlled via the `keepScreenOn` prop:
 
-#### Default Behavior (Screen Stays On)
+### Default Behavior (Screen Stays On)
 
 ```tsx
 <ScannerView
@@ -490,7 +476,7 @@ The scanner automatically keeps the screen on while the camera is active to prev
 />
 ```
 
-#### Allow Screen Auto-Lock
+### Allow Screen Auto-Lock
 
 ```tsx
 <ScannerView
@@ -499,7 +485,7 @@ The scanner automatically keeps the screen on while the camera is active to prev
 />
 ```
 
-#### Dynamic Control
+### Dynamic Control
 
 ```tsx
 const [keepScreenOn, setKeepScreenOn] = useState(true);
@@ -515,11 +501,23 @@ const [keepScreenOn, setKeepScreenOn] = useState(true);
 </TouchableOpacity>
 ```
 
-> **💡 Note**: The screen is kept on by default (`keepScreenOn={true}`) as this is typically desired for scanning applications. When disabled, the screen may auto-lock, which could interrupt scanning sessions.
+**Note**: The screen is kept on by default (`keepScreenOn={true}`) as this is typically desired for scanning applications. When disabled, the screen may auto-lock, which could interrupt scanning sessions.
 
----
+## 🎨 UI Design Note
+
+> **💡 Note**: The native overlays and frames are provided to fulfill minimum design requirements and for debugging during development. We **recommend implementing custom React Native UI** for enhanced user experiences.
+
+To use custom UI, simply disable the native visual overlays and build your own:
+
+```tsx
+<ScannerView
+  focusArea={{ enabled: true, showOverlay: false }} // Disable native overlay
+  barcodeFrames={{ enabled: false }} // Disable native frames
+  onBarcodeScanned={handleBarcodeScanned}
+/>
+```
 
-## 🔐 Permissions
+## Permissions
 
 The scanner requires camera permissions. Make sure to request camera permissions in your app before using the scanner:
 
@@ -549,17 +547,11 @@ const requestCameraPermission = async () => {
 };
 ```
 
----
-
-## 📖 Examples
+## Example
 
 See the `example/` directory for complete working examples, including the "New Props Example" that demonstrates the updated prop structure.
 
----
-
-## 🤝 Contributing
-
-We welcome contributions! Please follow these steps:
+## Contributing
 
 1. Fork the repository
 2. Create your feature branch (`git checkout -b feature/amazing-feature`)
@@ -567,10 +559,6 @@ We welcome contributions! Please follow these steps:
 4. Push to the branch (`git push origin feature/amazing-feature`)
 5. Open a Pull Request
 
-For more details, see our [Contributing Guide](CONTRIBUTING.md).
-
----
-
 ## 💼 Consulting & Support
 
 ### Community Support (Free)
@@ -594,16 +582,10 @@ Need professional help with implementation, custom development, or enterprise su
 
 ---
 
-## 📄 License
+## License
 
 This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
 ---
 
-<div align="center">
-
-**Made with ❤️ by [CleanUI.dev](https://cleanui.dev)**
-
-[Website](https://cleanui.dev) • [GitHub](https://github.com/cleanui-dev) • [Support](mailto:hi@cleanuitechnologies.com)
-
-</div>
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/Scanner.podspec

@@ -11,7 +11,7 @@ Pod::Spec.new do |s|
   s.authors      = package["author"]
 
   s.platforms    = { :ios => min_ios_version_supported }
-  s.source       = { :git => "https://github.com/cleanui-dev/react-native-scanner.git", :tag => "#{s.version}" }
+  s.source       = { :git => "https://github.com/rahulgwebdev/react-native-scanner.git", :tag => "#{s.version}" }
 
   s.source_files = "ios/**/*.{h,m,mm,swift,cpp}"
   s.private_header_files = "ios/**/*.h"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cleanuidev/react-native-scanner",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "description": "scanner",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -49,14 +49,14 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/cleanui-dev/react-native-scanner.git"
+    "url": "git+https://github.com/rahulgwebdev/react-native-scanner.git"
   },
   "author": "Rahul Gupta <rahulgwebdev@gmail.com> (https://github.com/rahulgwebdev)",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/cleanui-dev/react-native-scanner/issues"
+    "url": "https://github.com/rahulgwebdev/react-native-scanner/issues"
   },
-  "homepage": "https://github.com/cleanui-dev/react-native-scanner#readme",
+  "homepage": "https://github.com/rahulgwebdev/react-native-scanner#readme",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"