https://github.com/simon-zerisenay/qr-reader

This React Native component utilizes the expo-barcode-scanner package to enable barcode scanning using the device's camera. It handles camera permission, updates the scanned state when a barcode is detected, and provides a button to rescan. The component's design ensures efficient barcode scanning and a user-friendly experience.
https://github.com/simon-zerisenay/qr-reader

barcode javascript qrcode reactnative scanner

Last synced: about 6 hours ago
JSON representation

This React Native component utilizes the expo-barcode-scanner package to enable barcode scanning using the device's camera. It handles camera permission, updates the scanned state when a barcode is detected, and provides a button to rescan. The component's design ensures efficient barcode scanning and a user-friendly experience.

• Host: GitHub
• URL: https://github.com/simon-zerisenay/qr-reader
• Owner: simon-zerisenay
• Created: 2023-04-05T16:05:04.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-03-13T05:35:31.000Z (8 months ago)
• Last Synced: 2024-05-18T03:45:32.382Z (6 months ago)
• Topics: barcode, javascript, qrcode, reactnative, scanner
• Language: JavaScript
• Homepage:
• Size: 474 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


 

# Qr-code-reader-react-native-expo-

  

    

   

 

 
  

This is a React Native component that uses the expo-barcode-scanner package to scan barcodes using the device's camera. The component has three states, hasPermission, scanned, and setScanned. The hasPermission state is used to determine if the app has permission to use the device's camera. The scanned state is used to determine if a barcode has been scanned. The setScanned state is used to update the scanned state when a barcode is scanned or when the user taps the "Tap to Scan Again" button.

   

The component has a useEffect hook that runs when the component mounts. It requests camera permission from the user and updates the hasPermission state accordingly.

 

The handleBarCodeScanned function is called when a barcode is scanned. It updates the scanned state to true and displays an alert with the barcode's type and data.  

 

The component renders a View component that contains a BarCodeScanner component from the expo-barcode-scanner package. The onBarCodeScanned prop of the BarCodeScanner component is set to undefined if the scanned state is true. This prevents the handleBarCodeScanned function from being called multiple times if the user holds the camera over the barcode for too long. The Button component is only displayed if the scanned state is true and the user can tap it to scan again. 

  

The StyleSheet component is used to define the styles for the container style rule. It defines a container that takes up the full height and width of the screen and centers its contents vertically.