Complete Working Implementation of Barcode/QR Code Scanning
This is the complete, working solution for Activity 15. All TODOs have been implemented with best practices and production-ready code.
Location : App.js (lines 19-25)Implementation : Uses useEffect hook with empty dependency array to request permission on mountFeatures :
Async permission request with proper error handling
Updates state based on permission status
Runs once when component mounts
Handles all permission states (granted, denied, undetermined)
Location : App.js (lines 27-70)Implementation : Complete event handler that processes different data typesFeatures :
URL detection and confirmation dialog
Opens URLs in default browser with user confirmation
Displays barcode type and data in alerts
Sets scan state to prevent multiple scans
Stores scan data for display
Optional Open Food Facts API integration (commented)
javascript
useEffect (() => {
const getPermission = async (const { status } = await BarCodeScanner .requestPermissionsAsync ();
setHasPermission (status === 'granted' );
};
getPermission ();
}, []);
Requests permission automatically on app launch
Handles all permission states with appropriate UI
"Open Settings" button for easy permission recovery
javascript
if (data.startsWith ('http://' ) || data.startsWith ('https://' )) {
Alert .alert ('URL Detected' , ...);
} else {
Alert .alert ('Barcode Scanned' , ...);
}
Differentiates between QR codes (URLs) and product barcodes
User confirmation before opening external links
Extensible for API integration
Full-screen camera view with visual scanning frame
Animated corner indicators for scan area
Real-time scan hints and feedback
Result card with formatted data display
Dark theme optimized for camera use
Smooth state transitions
Permission denial with recovery path
Network error handling for API calls
Invalid data type handling
Clear user feedback for all states
bash
npm install --legacy-peer-deps
npx expo start
Permission Handling :
✓ First launch requests permission
✓ Granting permission shows camera
✓ Denying permission shows error screen
✓ "Open Settings" button works
✓ Re-granting permission activates camera
QR Code Scanning :
✓ Detects QR codes with URLs
✓ Shows "Open link?" confirmation dialog
✓ Opens URL in browser when confirmed
✓ Cancels gracefully without opening
✓ Displays scan result in card
Product Barcode Scanning :
✓ Detects UPC-A barcodes (12 digits)
✓ Detects EAN-13 barcodes (13 digits)
✓ Shows barcode type and data
✓ Displays result in formatted card
✓ Can scan again after result
User Experience :
✓ Clear visual feedback during scan
✓ "Scan Again" button resets scanner
✓ Smooth transitions between states
✓ Help text guides users
✓ No crashes or errors
Async/Await : Proper async handling for all operationsError Handling : Try-catch blocks with user-friendly messagesState Management : Clean React hooks usageUser Feedback : Clear alerts and visual indicatorsCode Comments : Explanatory comments for key logicStyling : Consistent, maintainable StyleSheetAccessibility : Touch targets and readable text
Conditional rendering based on permission state
Scanner disabled after scan to prevent multiple events
Efficient state updates
No unnecessary re-renders
The solution includes commented code for Open Food Facts API integration:
javascript
const fetchProductInfo = async (barcode ) => {
try {
const response = await fetch (
`https://world.openfoodfacts.org/api/v0/product/${barcode} .json`
);
const json = await response.json ();
if (json.status === 1 ) {
const product = json.product ;
Alert .alert (
product.product_name || 'Product Found' ,
`Brand: ${product.brands || 'N/A' } \n` +
`Category: ${product.categories || 'N/A' } \n` +
`Barcode: ${barcode} `
);
}
} catch (error) {
Alert .alert ('Error' , 'Failed to fetch product information' );
}
};
To enable, uncomment fetchProductInfo(data) in handleBarCodeScanned.
By studying this solution, you'll understand:
Permission Management : How to request and handle device permissionsCamera Integration : Using Expo BarCodeScanner APIEvent Handling : Processing barcode scan eventsData Validation : Detecting and validating different data typesUser Interaction : Confirmation dialogs and external link handlingState Management : React hooks for scan state and resultsError Recovery : Graceful error handling with user guidance
This solution can be extended with:
Scan History : Store last 10-20 scans with timestampsProduct Database : Full Open Food Facts integrationQR Code Generation : Create QR codes from text inputBatch Scanning : Scan multiple items in sequencePrice Comparison : Compare prices across storesPersonal Inventory : Track owned productsReceipt Scanning : Extract data from receiptsFavorites : Save frequently scanned items
Related Activities :
Activity 04: Camera permissions foundation
Activity 06: AsyncStorage for scan history
Activity 07: API integration patterns
Documentation :
Why useEffect for permission?
Ensures permission is requested immediately when app opens
Users don't need to tap a button first
Better UX - scanner is ready when permission granted
Why confirmation dialog for URLs?
Security: Prevent accidental navigation to malicious sites
User control: Let users decide whether to open links
Standard practice: Most apps confirm before opening external URLs
Why disable scanner after scan?
Prevents multiple rapid scans of same code
Gives user time to view result
Better UX - user explicitly chooses to scan again
Why dark theme?
Reduces screen glare during scanning
Better camera contrast
Professional appearance
Common in camera-based apps
Complete Solution | Activity 15 | M1: Mobile Foundations | React Native & Expo SDK 53