React Native QR Code Scanner

Introduction

Introducing React Native QR Code Scanner, a versatile solution that helps developers to use seamless QR code scanning capabilities in their React Native applications. This powerful library utilizes the device's camera to swiftly capture and process QR codes, unlocking endless possibilities for innovative features and enhanced user experiences.

Getting started

iOS 10

To ensure proper functionality in iOS 10 and newer versions, it is necessary to include the Privacy - Camera Usage Description key in your project's info.plist file. Locate this file at your_project/ios/your_project/Info.plist and insert the provided code snippet:

Android 7

To ensure compatibility with Android 7 and later versions, it is necessary to include the "Vibration" permission in your project's AndroidManifest.xml file. This file can be located at android/app/src/main/AndroidManifest.xml. To incorporate the permission, please include the following entry:

To ensure proper configuration of the 'react-native-camera' setting, it is essential to include the "missingDimensionStrategy" configuration in the 'general' section. This configuration can be found in the android/app/build.gradle file of your project. To implement this, add the following code snippet:

react-native-camera

To use this package in your project, you will need to include the react-native-camera dependency. To install it, execute the following commands:

New Version/Migration

If you are utilizing a previous iteration of this module alongside RCTCamera, it is necessary to refer to the provided documentation to transition from the outdated RCTCamera to the updated RNCamera. Once the transition is completed, it is essential to follow the installation instructions outlined earlier.

To install and start using react-native-qrcode-scanner:

You will also need to install react-native-permissions to handle camera-related permissions

When setting up react-native-permissions for iOS, it is necessary to include the provided code snippet in your Podfile.

If you have added permissions, it might be necessary to reset the data on your simulator. You can do this by navigating to Device -> Erase All Content and Settings... and selecting the option to reset the simulator's data.

Usage

To incorporate react-native-qrcode-scanner into your project, you need to import the module by including the react-native-qrcode-scanner package and utilizing the <QRCodeScanner /> tag. Additional illustrations of how to use it can be found in the examples/ directory.

Below is a demonstration of its fundamental implementation:

Output

Methods

Following are the methods provided by React native QR Code Scanner:

reactivate()

To programmatically enable scanning once more, utilize this method. You can achieve this by attaching a reference using the following syntax: <QRCodeScanner ref={(node) => { this.scanner = node }}>. Then, you can reactivate scanning by invoking this.scanner.reactivate().

Props

Following props are provided by react native QR code scanner:

onRead

The propType is defined as a required function, and the default value is set to a function that logs a message to the console when a QR code or a barcode is detected in the camera's view. This function is designed to be called and passed the event that is emitted when the code is read.

fadeIn

The propType "fade" is set to true by default in React native QR code scanner. Enabling this option ensures that the camera view gradually appears with a fading effect after the initial loading process, rather than being instantly rendered.

reactivate

The propType bool has a default value of false. When this value is set to false, the QRCodeScanner component will not scan another QR code until it is re-rendered. However, when the value is set to true, the scanning ability of the component will be reactivated, allowing it to scan QR codes again.

reactivateTimeout

To specify the reactivation duration for the react native qr code scanner, you can utilize the propType number with a default value of 0. This prop allows you to define the time in milliseconds that should elapse before the QRCodeScanner becomes active again.

cameraTimeout

The propType number with a default value of 0 is utilized to determine the duration, measured in milliseconds, for which the QRCodeScanner component should remain hidden. Once this duration elapses, the camera becomes inactive, and users can activate it again by pressing the view. The default value of 0 implies that the QRCodeScanner component is always visible and active in react native QR code scanner.

cameraTimeoutView

The propType element is utilized to pass a React Native (RN) element or component that will be displayed when the camera remains inactive for a specified duration called cameraTimeout. In case the cameraTimeout is either 0 or not provided, this particular prop will not be utilized.

flashMode

The propType RNCamera.Constants.FlashMode has a default value of RNCamera.Constants.FlashMode.auto. This prop controls the flash modes available in the react-native-camera library. When set to RNCamera.Constants.FlashMode.off, the flash will be turned off. On the other hand, setting it to RNCamera.Constants.FlashMode.on will activate the flash for all captured photos. The RNCamera.Constants.FlashMode.auto option allows the phone to automatically determine whether to use Flash based on the lighting conditions observed by the camera.

topContent

The propType oneOfType allows for rendering various types of content, such as elements or strings, at the top of the camera view. It provides the flexibility to add any additional content to enhance the camera view's display.

bottomContent

The propType oneOfType is utilized here, enabling the rendering of various types of content at the bottom of the camera view. This flexible approach allows for the inclusion of additional elements or strings, providing the option to display diverse content within the camera view's lower section.

containerStyle

The propType of any is utilized to apply styling to the outermost container. This feature proves beneficial when incorporating margin or padding to accommodate the navigation bar in React Native QR Code Scanner.

cameraStyle

The propType of any can be utilized to effectively transmit or override the styling applied to the displayed camera window.

cameraContainerStyle

The propType: any can be utilized to transmit or modify the styling of the rendered camera container (view) window.

topViewStyle

You can utilize the propType any to effectively pass or modify the styling of the <View> element that encompasses the topContent prop.

bottomViewStyle

The propType: any can be utilized to effectively transmit or modify the styling applied to the <View> element which encompasses the bottomContent property.

showMarker

The propType: any is used to display a marker on the camera scanning window, while the propType boolean has a default value of false. This feature enables the visual indication of a marker within the camera scanning window.

customMarker

propType: element

You can pass a React Native element or component as a prop, which will be utilized as a customized marker.

markerStyle

To customize the default marker's styling, utilize the propType: any feature.

notAuthorizedView

propType: element

You can pass a React Native (RN) element or component to be utilized in cases where the camera permissions are not granted, specifically on iOS in React Native QR Code Scanner.

cameraType

You can utilize the propType property, which accepts two options: front and back. By default, it is set to back, indicating the rear camera. This property allows you to specify the camera to be used for scanning QR codes.

checkAndroid6Permissions

To activate permission checking on Android 6, utilize the propType with a default value of false.

permissionDialogTitle

The propType 'Info' serves as the default value for setting the title of the permission dialogue on Android devices.

permissionDialogMessage

To define the permission dialogue message (specific to Android), you can utilize the propType with a default value of Need camera permission.

buttonPositive

You can utilize this feature to specify the text for the permission dialogue button in Android applications. The propType for this option is a string with a default value of OK.

cameraProps

propTypes: object

These are the properties that should be provided when passing them to the Camera component.