### Example App Setup and Execution (Bash) Source: https://github.com/nguyenthanhan/react-native-image-code-scanner/blob/main/README.md Commands to set up and run the example application for the React Native Image Code Scanner. This includes installing dependencies, starting the app in Expo Go, and instructions for prebuilding for full functionality. ```bash cd example npm install # or yarn install # For quick UI testing (Expo Go) npm start # For full functionality (requires prebuild) npm run prebuild npm run build:ios # or npm run build:android ``` -------------------------------- ### Start Metro Server for Example App Source: https://github.com/nguyenthanhan/react-native-image-code-scanner/blob/main/CONTRIBUTING.md Starts the Metro bundler, which is required to run the example application. This command is typically used when developing or testing changes to the library. ```sh yarn example start ``` -------------------------------- ### Initialize React Native Project and Install Library (Bash) Source: https://github.com/nguyenthanhan/react-native-image-code-scanner/blob/main/COMPATIBILITY.md This command sequence shows how to set up a new React Native project for testing the image code scanner library. It initializes a project with a specific React Native version and then installs the library. This is useful for testing compatibility across different React Native versions. ```bash npx react-native init TestApp --version 0.79.2 cd TestApp npm install react-native-image-code-scanner ``` -------------------------------- ### Install Type Definitions for React and React Native (Bash) Source: https://github.com/nguyenthanhan/react-native-image-code-scanner/blob/main/COMPATIBILITY.md This command installs the necessary TypeScript type definitions for React and React Native. This is a solution for potential TypeScript errors that may occur when using the image code scanner library with React Native versions 0.7x. ```bash npm install --save-dev @types/react@^18.0.0 @types/react-native@^0.72.0 ``` -------------------------------- ### Expo Setup for React Native Image Code Scanner Source: https://github.com/nguyenthanhan/react-native-image-code-scanner/blob/main/README.md Guides through setting up the library in an Expo project, requiring a prebuild step to incorporate native modules. Not compatible with Expo Go. ```bash # Install the library npm install react-native-image-code-scanner #or npx expo install react-native-image-code-scanner # Prebuild your project npx expo prebuild --clean # Run on your preferred platform npx expo run:ios # or npx expo run:android ``` -------------------------------- ### Run Example App on iOS Source: https://github.com/nguyenthanhan/react-native-image-code-scanner/blob/main/CONTRIBUTING.md Builds and runs the example application on an iOS simulator or device. This command is used to test library changes on the iOS platform. ```sh yarn example ios ``` -------------------------------- ### Run Example App on Android Source: https://github.com/nguyenthanhan/react-native-image-code-scanner/blob/main/CONTRIBUTING.md Builds and runs the example application on an Android device or emulator. This command is used to test library changes on the Android platform. ```sh yarn example android ``` -------------------------------- ### iOS Setup for React Native Image Code Scanner Source: https://github.com/nguyenthanhan/react-native-image-code-scanner/blob/main/README.md Configures the iOS project by installing pods and adding camera usage descriptions to Info.plist. Requires iOS 13.4+. ```bash cd ios && pod install ``` ```xml NSCameraUsageDescription This app needs access to camera to scan barcodes ``` -------------------------------- ### Install Dependencies with Yarn Workspaces Source: https://github.com/nguyenthanhan/react-native-image-code-scanner/blob/main/CONTRIBUTING.md Installs all project dependencies using Yarn workspaces. This command should be run in the root directory of the monorepo. It ensures that all packages within the monorepo have their dependencies correctly installed. ```sh yarn ``` -------------------------------- ### Install React Native Image Code Scanner Source: https://github.com/nguyenthanhan/react-native-image-code-scanner/blob/main/README.md Installs the react-native-image-code-scanner library using npm or yarn package managers. ```bash npm install react-native-image-code-scanner # or yarn add react-native-image-code-scanner ``` -------------------------------- ### Enabling New Architecture for React Native 0.70-0.75 (Bash) Source: https://github.com/nguyenthanhan/react-native-image-code-scanner/blob/main/COMPATIBILITY.md These commands enable the New Architecture for React Native versions 0.70 through 0.75. For iOS, it involves running 'pod install' with a specific environment variable. For Android, it requires setting a flag in the 'gradle.properties' file. ```bash # iOS cd ios && RCT_NEW_ARCH_ENABLED=1 pod install # Android - in gradle.properties newArchEnabled=true ``` -------------------------------- ### Scan All Barcode Formats with Preprocessing (TypeScript) Source: https://github.com/nguyenthanhan/react-native-image-code-scanner/blob/main/README.md A comprehensive example that scans for all supported barcode formats from an image, utilizing the library's automatic preprocessing features. It demonstrates how to get all available formats using `Object.values(BarcodeFormat)` and logs detailed information about each detected barcode. The function returns a promise resolving to an array of scan results. ```typescript import ImageCodeScanner, { BarcodeFormat, ScanResult, } from 'react-native-image-code-scanner'; // Scan with automatic preprocessing and multiple formats const scanEverything = async (imagePath: string): Promise => { try { const results: ScanResult[] = await ImageCodeScanner.scan({ path: imagePath, formats: Object.values(BarcodeFormat), // All supported formats // Automatic preprocessing is enabled by default }); console.log(`Found ${results.length} barcodes:`); results.forEach((result, index) => { console.log(`${index + 1}. ${result.format}: ${result.content}`); }); return results; } catch (error) { console.error('Scan failed:', error); return []; } }; ``` -------------------------------- ### Prebuild Expo Project for Native Modules (Bash) Source: https://github.com/nguyenthanhan/react-native-image-code-scanner/blob/main/COMPATIBILITY.md This command sequence is a workaround for using the React Native Image Code Scanner with Expo Go. Since the library relies on native modules, Expo Go's limitations require a prebuild step. After prebuilding, you can run the project on iOS or Android using the provided commands. ```bash npx expo prebuild npx expo run:ios # or run:android ``` -------------------------------- ### Scan from Gallery using expo-image-picker (TypeScript) Source: https://github.com/nguyenthanhan/react-native-image-code-scanner/blob/main/README.md Integrates with `expo-image-picker` for selecting images from the gallery and scanning them for QR codes. This example shows how to use Expo's image picker functions to get the image URI and then pass it to the scanner. It includes basic error handling and checks for successful image selection. ```typescript import ImageCodeScanner, { ScanResult } from 'react-native-image-code-scanner'; import * as ImagePicker from 'expo-image-picker'; const scanFromGallery = async () => { const result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.Images, allowsEditing: true, quality: 1, }); if (!result.canceled && result.assets && result.assets[0]) { const imagePath = result.assets[0].uri; const scanResults: ScanResult[] = await ImageCodeScanner.scan({ path: imagePath, formats: [ImageCodeScanner.BarcodeFormat.QR_CODE], // Automatic preprocessing is enabled by default }); if (scanResults.length > 0) { scanResults.forEach((result) => { console.log('Content:', result.content); console.log('Format:', result.format); }); } } }; ``` -------------------------------- ### BarcodeFormat Enum Usage and Examples (TypeScript) Source: https://context7.com/nguyenthanhan/react-native-image-code-scanner/llms.txt Demonstrates the usage of the `BarcodeFormat` enum from `react-native-image-code-scanner` to specify which barcode types to scan for. It includes examples of scanning for specific formats like product codes and conditional format selection based on type. ```typescript import { BarcodeFormat } from 'react-native-image-code-scanner'; // Available formats const formats = { QR_CODE: BarcodeFormat.QR_CODE, // QR codes CODE_128: BarcodeFormat.CODE_128, // Code 128 CODE_39: BarcodeFormat.CODE_39, // Code 39 CODE_93: BarcodeFormat.CODE_93, // Code 93 EAN_13: BarcodeFormat.EAN_13, // EAN-13 EAN_8: BarcodeFormat.EAN_8, // EAN-8 UPC_A: BarcodeFormat.UPC_A, // UPC-A UPC_E: BarcodeFormat.UPC_E, // UPC-E PDF_417: BarcodeFormat.PDF_417, // PDF417 DATA_MATRIX: BarcodeFormat.DATA_MATRIX, // Data Matrix AZTEC: BarcodeFormat.AZTEC, // Aztec ITF: BarcodeFormat.ITF, // ITF CODABAR: BarcodeFormat.CODABAR // Codabar }; // Use specific format const scanProductBarcode = async (imagePath: string) => { const results = await ImageCodeScanner.scan({ path: imagePath, formats: [BarcodeFormat.EAN_13, BarcodeFormat.UPC_A] }); return results; }; // Conditional format selection const getFormatsForType = (type: 'product' | 'qr' | 'shipping') => { switch (type) { case 'product': return [BarcodeFormat.EAN_13, BarcodeFormat.UPC_A, BarcodeFormat.UPC_E]; case 'qr': return [BarcodeFormat.QR_CODE]; case 'shipping': return [BarcodeFormat.CODE_128, BarcodeFormat.CODE_39]; default: return [BarcodeFormat.QR_CODE]; } }; // Usage const scanByType = async (imagePath: string, type: 'product' | 'qr' | 'shipping') => { const formats = getFormatsForType(type); return await ImageCodeScanner.scan({ path: imagePath, formats }); }; ``` -------------------------------- ### Disabling New Architecture for React Native 0.76+ (Bash) Source: https://github.com/nguyenthanhan/react-native-image-code-scanner/blob/main/COMPATIBILITY.md These commands demonstrate how to disable the New Architecture for React Native versions 0.76 and above, where it is enabled by default. For iOS, this is achieved by running 'pod install' with a specific environment variable. For Android, the 'newArchEnabled' flag in 'gradle.properties' should be set to 'false'. ```bash # iOS cd ios && RCT_NEW_ARCH_ENABLED=0 pod install # Android - in gradle.properties newArchEnabled=false ``` -------------------------------- ### Updating Peer Dependencies for Migration (JSON) Source: https://github.com/nguyenthanhan/react-native-image-code-scanner/blob/main/COMPATIBILITY.md This JSON snippet specifies the minimum required versions for React and React Native when migrating from older versions (e.g., 0.6x) to 0.7x. It ensures that the project's core dependencies are compatible with the newer React Native environment. ```json { "react": ">=17.0.0", "react-native": ">=0.70.0" } ``` -------------------------------- ### Importing ImageCodeScanner with New Architecture (TypeScript) Source: https://github.com/nguyenthanhan/react-native-image-code-scanner/blob/main/COMPATIBILITY.md This code snippet demonstrates how to import the ImageCodeScanner module in a TypeScript project. It automatically leverages the Turbo Module if the New Architecture is enabled in React Native, ensuring seamless integration with newer versions of the framework. ```typescript import ImageCodeScanner from 'react-native-image-code-scanner'; ``` -------------------------------- ### Scan Image with React Native Image Code Scanner (TypeScript) Source: https://github.com/nguyenthanhan/react-native-image-code-scanner/blob/main/COMPATIBILITY.md This code snippet demonstrates the basic API for scanning an image using the React Native Image Code Scanner library. It works seamlessly with both the old and new React Native architectures without requiring any code modifications. The function takes an image path and an array of barcode formats as input and returns the scan results. ```typescript const results = await ImageCodeScanner.scan({ path: imagePath, formats: [BarcodeFormat.QR_CODE], }); ``` -------------------------------- ### Publish New Version with Release-it Source: https://github.com/nguyenthanhan/react-native-image-code-scanner/blob/main/CONTRIBUTING.md Automates the process of publishing a new version of the package to npm. This includes tasks like version bumping, tag creation, and release generation. ```sh yarn release ``` -------------------------------- ### Run Unit Tests with Jest Source: https://github.com/nguyenthanhan/react-native-image-code-scanner/blob/main/CONTRIBUTING.md Executes the unit test suite using Jest. This command ensures that individual components and functions of the library are working as expected. ```sh yarn test ``` -------------------------------- ### Linting with ESLint Source: https://github.com/nguyenthanhan/react-native-image-code-scanner/blob/main/CONTRIBUTING.md Runs ESLint to check for code style and potential errors according to the project's linting configuration. This helps maintain code consistency across the project. ```sh yarn lint ``` -------------------------------- ### Scan QR Code from Image (TypeScript) Source: https://github.com/nguyenthanhan/react-native-image-code-scanner/blob/main/README.md Demonstrates basic usage for scanning a QR code from a specified image path. It imports the necessary components from the library and handles the scan results, logging the content and format of the first detected QR code. Errors during the scan process are also caught and logged. ```typescript import ImageCodeScanner, { ScanResult } from 'react-native-image-code-scanner'; // Scan QR code from image const scanQRCode = async (imagePath: string) => { try { const results: ScanResult[] = await ImageCodeScanner.scan({ path: imagePath, }); if (results.length > 0) { const firstResult = results[0]; console.log('QR Code found:', firstResult.content); console.log('Format:', firstResult.format); // "QR_CODE" } else { console.log('No QR code found in image'); } } catch (error) { console.error('Scan error:', error); } }; ``` -------------------------------- ### Scan from Gallery using react-native-image-picker (TypeScript) Source: https://github.com/nguyenthanhan/react-native-image-code-scanner/blob/main/README.md Integrates with `react-native-image-picker` to allow users to select an image from their gallery and then scan it for QR codes. It demonstrates launching the image library, retrieving the image URI, and passing it to the `ImageCodeScanner.scan` function. Only QR codes are scanned by default. ```typescript import ImageCodeScanner, { ScanResult } from 'react-native-image-code-scanner'; import { launchImageLibrary } from 'react-native-image-picker'; const scanFromGallery = async () => { const result = await launchImageLibrary({ mediaType: 'photo', selectionLimit: 1, }); if (result.assets && result.assets[0]) { const imagePath = result.assets[0].uri; const scanResults: ScanResult[] = await ImageCodeScanner.scan({ path: imagePath, formats: [ImageCodeScanner.BarcodeFormat.QR_CODE], // Automatic preprocessing is enabled by default }); if (scanResults.length > 0) { scanResults.forEach((result) => { console.log('Content:', result.content); console.log('Format:', result.format); }); } } }; ``` -------------------------------- ### React Native Component Integration for Image Code Scanner Source: https://context7.com/nguyenthanhan/react-native-image-code-scanner/llms.txt Demonstrates how to integrate the ImageCodeScanner into a React Native component. It handles image picking using `react-native-image-picker`, state management for the image URI and scan results, and user feedback via alerts. ```typescript import React, { useState } from 'react'; import { View, Button, Text, Image, Alert } from 'react-native'; import ImageCodeScanner, { ScanResult, BarcodeFormat } from 'react-native-image-code-scanner'; import { launchImageLibrary } from 'react-native-image-picker'; const BarcodeScannerScreen: React.FC = () => { const [imageUri, setImageUri] = useState(null); const [scanResults, setScanResults] = useState([]); const [loading, setLoading] = useState(false); const handlePickImage = async () => { try { const result = await launchImageLibrary({ mediaType: 'photo', selectionLimit: 1 }); if (result.assets && result.assets[0]) { const uri = result.assets[0].uri; setImageUri(uri); await scanImage(uri); } } catch (error) { Alert.alert('Error', 'Failed to pick image'); } }; const scanImage = async (uri: string) => { setLoading(true); setScanResults([]); try { const results = await ImageCodeScanner.scan({ path: uri, formats: [ BarcodeFormat.QR_CODE, BarcodeFormat.CODE_128, BarcodeFormat.EAN_13 ] }); setScanResults(results); if (results.length === 0) { Alert.alert('No Barcodes', 'No barcodes found in the image'); } else { Alert.alert('Success', `Found ${results.length} barcode(s)`); } } catch (error) { Alert.alert('Scan Error', error.message || 'Failed to scan image'); } finally { setLoading(false); } }; return (