Gathering detailed insights and metrics for react-native-qrcode-scanner-viewprops-deprecated
Gathering detailed insights and metrics for react-native-qrcode-scanner-viewprops-deprecated
A QR code scanner component for React Native.
1.5.6
MIT
JavaScript
37.37 kB
Installations
npm install react-native-qrcode-scanner-viewprops-deprecatedDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
18.12.1
NPM Version
8.19.2
Releases
Unable to fetch releases
Languages
1
JavaScript
JavaScript (100%)
Developer
Cheyenne55
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
341 Commits
1 Branches
1 Contributors
Updated on Apr 20, 2023
Sponsor this package
Maintainers
1
Package Meta Information
Latest Version
1.5.6
Package Id
react-native-qrcode-scanner-viewprops-deprecated@1.5.6
Unpacked Size
37.37 kB
Size
10.78 kB
File Count
10
NPM Version
8.19.2
Node Version
18.12.1
Published on
Apr 20, 2023
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Peer Dependencies
1
react-native-qrcode-scanner
A QR code scanner component for React Native built on top of react-native-camera by Lochlan Wansbrough
Please note, this will also function as a generic barcode scanner by the virtue of the above module supporting barcode scanning, however, this module was initially built as a QR code scanner.
This module was originally written because the author couldn't find a module that could be simply plugged into a project without requiring too much setup.
Looking for active contributors. See Contribution guide for more details.
Please note: Most of the support on debugging new issues, especially with Android, relies on the open source community. The project is on the look out for active contributors who want to maintain this library more rigorously.
Getting started
Requirements
iOS 10
With iOS 10 and higher you need to add the "Privacy - Camera Usage Description" key to the info.plist of your project. This should be found in 'your_project/ios/your_project/Info.plist'. Add the following code:
<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>
<!-- Include this only if you are planning to use the camera roll -->
<key>NSPhotoLibraryUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>
<!-- Include this only if you are planning to use the microphone for video recording -->
<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microsphone is accessed for the first time</string>
Android 7
With Android 7 and higher you need to add the "Vibration" permission to your AndroidManifest.xml of your project. This should be found in your android/app/src/main/AndroidManifest.xml Add the following:
<uses-permission android:name="android.permission.VIBRATE"/>
You need to add the "missingDimensionStrategy" config for the 'react-native-camera' setting to 'general', this should be found in your android/app/build.gradle add the following:
android {
...
defaultConfig {
...
missingDimensionStrategy 'react-native-camera', 'general' <-- insert this line
}
}
react-native-camera
react-native-camera is a dependency for this package that you'll need to add to your project. To install, run the following commands:
npm install react-native-camera --savereact-native link react-native-camera
New Version/Migration
If using an older version of this module with RCTCamera you will need to follow the docs here to move from the old RCTCamera to the new RNCamera. You will then need to install it as above.
Versions of this library > 0.0.30 will not support react-native-camera versions less than 1.0.0.
To install and start using react-native-qrcode-scanner:
npm install react-native-qrcode-scanner --savereact-native link react-native-qrcode-scanner
react-native-permissions
You will also need to install react-native-permissions to handle camera related permissions
npm install react-native-permissions --savereact-native link react-native-permissions
For iOS, as part of the react-native-permissions setup you will need to add the following code to your Podfile
permissions_path = '../node_modules/react-native-permissions/ios'
pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
You may also need to reset your simulator data after adding those permissions Device -> Erase All Content and Settings...
Usage
To use react-native-qrcode-scanner, import the react-native-qrcode-scanner module and use the <QRCodeScanner /> tag. More usage examples can be seen under the examples/ folder.
Here is an example of basic usage:
1'use strict'; 2 3import React, { Component } from 'react'; 4 5import { 6 AppRegistry, 7 StyleSheet, 8 Text, 9 TouchableOpacity, 10 Linking 11} from 'react-native'; 12 13import QRCodeScanner from 'react-native-qrcode-scanner'; 14import { RNCamera } from 'react-native-camera'; 15 16class ScanScreen extends Component { 17 onSuccess = e => { 18 Linking.openURL(e.data).catch(err => 19 console.error('An error occured', err) 20 ); 21 }; 22 23 render() { 24 return ( 25 <QRCodeScanner 26 onRead={this.onSuccess} 27 flashMode={RNCamera.Constants.FlashMode.torch} 28 topContent={ 29 <Text style={styles.centerText}> 30 Go to{' '} 31 <Text style={styles.textBold}>wikipedia.org/wiki/QR_code</Text> on 32 your computer and scan the QR code. 33 </Text> 34 } 35 bottomContent={ 36 <TouchableOpacity style={styles.buttonTouchable}> 37 <Text style={styles.buttonText}>OK. Got it!</Text> 38 </TouchableOpacity> 39 } 40 /> 41 ); 42 } 43} 44 45const styles = StyleSheet.create({ 46 centerText: { 47 flex: 1, 48 fontSize: 18, 49 padding: 32, 50 color: '#777' 51 }, 52 textBold: { 53 fontWeight: '500', 54 color: '#000' 55 }, 56 buttonText: { 57 fontSize: 21, 58 color: 'rgb(0,122,255)' 59 }, 60 buttonTouchable: { 61 padding: 16 62 } 63}); 64 65AppRegistry.registerComponent('default', () => ScanScreen);
Screenshot of the above:
Please open an issue if something doesn't work or is not clear enough.
Methods
reactivate()
Call this method to programmatically enabling scanning again. Use this by attaching a ref like so <QRCodeScanner ref={(node) => { this.scanner = node }}> and calling this.scanner.reactivate()
Props
onRead (required)
propType: func.isRequired
default: (e) => (console.log('QR code scanned!', e))
Will call this specified method when a QR code or a barcode is detected in the camera's view passing in the event emitted upon reading the code.
fadeIn
propType: bool
default: true
When set to true this ensures that the camera view fades in after the initial load up instead of being rendered immediately.
Set this to false to prevent the animated fade in of the camera view.
reactivate
propType: bool
default: false
When set to false, when a QR code is scanned, the QRCodeScanner will not scan another code until it is re-rendered.
When set to true this will reactivate the scanning ability of the component.
reactivateTimeout
propType: number
default: 0
Use this to configure how long it should take (in milliseconds) before the QRCodeScanner should reactivate.
cameraTimeout
propType: number
default: 0
Use this to configure how long it should take (in milliseconds) before the QRCodeScanner should be displayed. After that the camera will be inactive and press the view to reactivate it.
The 0 default means it's always on.
cameraTimeoutView
propType: element
Pass an RN element/component to show it when the camera is inactive for cameraTimeout (another prop) milliseconds. If the cameraTimeout is 0 or not specified, this prop will never be used.
flashMode
propType: RNCamera.Constants.FlashMode
default: RNCamera.Constants.FlashMode.auto
Flash modes
FYI: react-native-camera/flashMode
RNCamera.Constants.FlashMode.offturns it off.RNCamera.Constants.FlashMode.onmeans camera will use flash in all photos taken.RNCamera.Constants.FlashMode.autoleaves your phone to decide when to use flash when taking photos, based on the lightning conditions that the camera observes.RNCamera.Constants.FlashMode.torchturns on torch mode, meaning the flash light will be turned on all the time (even before taking photo) just like a flashlight.
topContent
propType: oneOfType([ PropTypes.element, PropTypes.string, ])
Use this to render any additional content at the top of the camera view.
bottomContent
propType: oneOfType([ PropTypes.element, PropTypes.string, ])
Use this to render any additional content at the bottom of the camera view.
containerStyle
propType: any
Use this to pass styling for the outermost container. Useful for adding margin/padding to account for navigation bar.
cameraStyle
propType: any
Use this to pass or overwrite styling for the camera window rendered.
cameraContainerStyle
propType: any
Use this to pass or overwrite styling for the camera container (view) window rendered.
topViewStyle
propType: any
Use this to pass or overwrite styling for the <View> that contains the topContent prop.
bottomViewStyle
propType: any
Use this to pass or overwrite styling for the <View> that contains the bottomContent prop.
showMarker
propType: boolean
default: false
Use this to show marker on the camera scanning window.
customMarker
propType: element
Pass a RN element/component to use it as a custom marker.
markerStyle
propType: any
Use this to add custom styling to the default marker.
notAuthorizedView
propType: element
Pass a RN element/component to use it when no permissions given to the camera (iOS only).
cameraType
propType: oneOf(['front', 'back'])
default: 'back'
Use this to control which camera to use for scanning QR codes, defaults to rear camera.
checkAndroid6Permissions
propType: bool
default: false
Use this to enable permission checking on Android 6
permissionDialogTitle
propType: string
default: 'Info'
Use this to set permission dialog title (Android only).
permissionDialogMessage
propType: string
default: 'Need camera permission'
Use this to set permission dialog message (Android only).
buttonPositive
propType: string
default: 'OK'
Use this to set permission dialog button text (Android only).
cameraProps
propType: object
Properties to be passed to the Camera component.
Contributors
This project exists thanks to all the people who contribute. We're immensely gratetful to everyone who has taken the time to submit pull requests, spent time debugging or filing issues.
Backers & Sponsors
Most of the core contributors maintain this library, add new features, and review PRs in their free time. If you're using react-native-qrcode-scanner in a commercial app, or have found it to be valuable, please considering backing or sponsoring the project on OpenCollective. Please note that you do not need to give any amount of money in order to use this library.
This is how the donations will be used:
- Allow the core contributors to work on react-native-qrcode-scanner
- Thank contributors if they invested a large amount of time in contributing
- Setup a contributor bounty program to encourage participation
- Fees for money handling
Thank you to all our backers & sponsors! 🙏
[Become a backer] [Become a sponsor]
Support this project by becoming a sponsor. Your logo will show up here with a link to your website.
License
See LICENSE.md
Thanks
Thanks to Lochlan Wansbrough for the react-native-camera module which provided me with an awesome example of how to set up this module.
This QR code scanner was inspired by the QR code scanner within Whatsapp.
No vulnerabilities found.
No security vulnerabilities found.