This is an Example of Barcode and QR Code Scanner using Camera in React Native. To make a Barcode and QR Code Scanner in React Native we are going to use a very good library provided by Wix named react-native-camera-kit. This library is very easy to integrate and the performance to scan the Barcode or QR Code is very good.
Barcode v/s QR Code
A Barcode was the first to come in market to store small numbers and representation of the information is 1 dimension.
QR code is the updated version of Barcode and stores more information than the Barcode and the representation of the information is 2 dimension.
If you are making an app which needs to share small code/data/URL between users in physical presence then the QR Code is the cool thing to integrate into your App.
UPI or the payment transaction applications are the common example of it in which one user shows the QR Code and the other user scans the QR Code to initiate the payment. If you have the same utility which needs to create the QR Code then you can follow the example to Generate the QR Code in React Native Application.
In this example, you will make the Barcode and QR Code Scanner Using React Native Camera. We will make a home screen with a button to open Barcode and QR code scanner, this will open a Camera with Barcode and QR Scan functionality and after scanning of the Barcode or QR code, we will take the data back to the home screen and show it there.
If the scanned data will be a URL then we will show an additional button to open the URL in default browser using React Native Linking Component. So let’s get started.
To Make a React Native App
Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cliRun the following commands to create a new React Native project
react-native init ProjectNameIf you want to start a new project with a specific React Native version, you can use the --version argument:
react-native init ProjectName --version X.XX.Xreact-native init ProjectName --version react-native@nextThis will make a project structure with an index file named App.js in your project directory.
Installation of Dependency
To make the Barcode and QR Code scanner we are going to use CameraKitCameraScreen component from react-native-camera-kit library. To install this library open the terminal and jump into your project
1 | cd ProjectName |
Run the following command
1 | npm install react-native-camera-kit --save |
This command will copy all the dependencies into your node_module directory. –save is optional, it is just to update the react-native-camera-kit dependency in your package.json file.
CocoaPods Installation
After the updation of React Native 0.60, they have introduced autolinking so we do not require to link the library but need to install pods. So to install pods use
1 | cd ios && pod install && cd .. |
Permission to use the Camera for Android
We are using a Native API Camera to scan the Barcode and QR code so we need to add permission to the AndroidManifest.xml file to access it.
Please add the following permissions in your AndroidMnifest.xml. Go to QRScannerExample -> android -> app -> main -> AndroidMnifest.xml.
1 | <uses-permission android:name="android.permission.CAMERA"/> |
| Permission | Purpose |
|---|---|
| CAMERA | To access the camera |
For more about the permission, you can see this post.
Permission to use the Camera for iOS
Please follow the below steps to add the permission in iOS project to use the camera.
Open the project QRScannerExample -> ios -> ScannerExample.xcworkspace in Xcode.
1. After opening the project in Xcode click on the project from the left sidebar and you will see multiple options in the workspace.
2. Select info tab which is info.plist
3. Click on the plus button to add a permission key “Privacy-Camera Usage Description” and a value which will be visible when permission dialog pops up.
Code to Make a Barcode and QR Code Scanner using Camera in React Native
Open App.js in any code editor and replace the code with the following code.
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 | //This is an example code to Scan QR code// import React, { Component } from 'react'; //import react in our code. import { Text, View, Linking, TouchableHighlight, PermissionsAndroid, Platform, StyleSheet} from 'react-native'; // import all basic components import { CameraKitCameraScreen, } from 'react-native-camera-kit'; //import CameraKitCameraScreen we are going to use. export default class App extends Component { constructor() { super(); this.state = { //variable to hold the qr value qrvalue: '', opneScanner: false, }; } onOpenlink() { //Function to open URL, If scanned Linking.openURL(this.state.qrvalue); //Linking used to open the URL in any browser that you have installed } onBarcodeScan(qrvalue) { //called after te successful scanning of QRCode/Barcode this.setState({ qrvalue: qrvalue }); this.setState({ opneScanner: false }); } onOpneScanner() { var that =this; //To Start Scanning if(Platform.OS === 'android'){ async function requestCameraPermission() { try { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.CAMERA,{ 'title': 'CameraExample App Camera Permission', 'message': 'CameraExample App needs access to your camera ' } ) if (granted === PermissionsAndroid.RESULTS.GRANTED) { //If CAMERA Permission is granted that.setState({ qrvalue: '' }); that.setState({ opneScanner: true }); } else { alert("CAMERA permission denied"); } } catch (err) { alert("Camera permission err",err); console.warn(err); } } //Calling the camera permission function requestCameraPermission(); }else{ that.setState({ qrvalue: '' }); that.setState({ opneScanner: true }); } } render() { let displayModal; //If qrvalue is set then return this view if (!this.state.opneScanner) { return ( <View style={styles.container}> <Text style={styles.heading}>React Native QR Code Example</Text> <Text style={styles.simpleText}>{this.state.qrvalue ? 'Scanned QR Code: '+this.state.qrvalue : ''}</Text> {this.state.qrvalue.includes("http") ? <TouchableHighlight onPress={() => this.onOpenlink()} style={styles.button}> <Text style={{ color: '#FFFFFF', fontSize: 12 }}>Open Link</Text> </TouchableHighlight> : null } <TouchableHighlight onPress={() => this.onOpneScanner()} style={styles.button}> <Text style={{ color: '#FFFFFF', fontSize: 12 }}> Open QR Scanner </Text> </TouchableHighlight> </View> ); } return ( <View style={{ flex: 1 }}> <CameraKitCameraScreen showFrame={false} //Show/hide scan frame scanBarcode={true} //Can restrict for the QR Code only laserColor={'blue'} //Color can be of your choice frameColor={'yellow'} //If frame is visible then frame color colorForScannerFrame={'black'} //Scanner Frame color onReadCode={event => this.onBarcodeScan(event.nativeEvent.codeStringValue) } /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor:'white' }, button: { alignItems: 'center', backgroundColor: '#2c3539', padding: 10, width:300, marginTop:16 }, heading: { color: 'black', fontSize: 24, alignSelf: 'center', padding: 10, marginTop: 30 }, simpleText: { color: 'black', fontSize: 20, alignSelf: 'center', padding: 10, marginTop: 16 } }); |
We have used this website to generate the QR Code.
To Run the React Native App
Open the terminal again and jump into your project using.cd ProjectNamereact-native run-androidreact-native run-ios (macOS only).Android
IOS
This is how you can make a Barcode and QR Code Scanner using Camera in React Native. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!
Hope you liked it. 🙂
Great tutorial, can confirm it works. Just have one problem when flipping the camera side ways it gets distorted. Is there a fix for this? Cheers
Can you please share the screen shot on snehalagrawal1701@gmail.com for better understanding.
Hi, I am trying to follow this example but it shows me an error: Invariant Violation: requireNativeComponent: “CameraView” was not found in the UIManager.
I do not know what does it mean. I’m using Expo on Android device.
Thank you!
Hi Jaouadi Soufien,
Sorry, but it will not work in Expo environment. you have to eject from the Expo environment for this example.
I had the same problem, and I solved it by running the following console command:
react-native link react-native-camera-kit
I don’t understand why this happened, if I’m not using the Expo client. Anyway, I solved it
Glad to know that 🙂
hey the camera opens but nothing happens it does not scans the Qr code i have tried everything got any solution ?
Have you found the solution?
This really works! But how do I size the frame in the CameraKitCameraScreen component?
You can control it with the outer container. By default, CameraKitCameraScreen has flex 1 and it takes the full space available in the parent container so you can manage it with the help of outer View.
Thanks, Snehal Agrawal, it works. But now another question, I hope not to disturb. Why does the Cancel button not cancel, but instead shows a yellow message that says “onBottomButtonPressed is not a function”? Help me.
Are you talking about this example? There is no cancel button in this example. If you have any then you have called a onBottomButtonPressed method which is not defined.
I think I combined it with an example here:
https://aboutreact.com/react-native-camera/
I did not remember it; sorry
Okay. I already solved it by adding the following function:
onBottomButtonPressed(event) {
if (event.type === ‘left’) {
this.setState({ opneScanner: false });
}
}
I don’t know if it’s the best way but the camera closes 🙂
Nice to know that. 🙂
Hi snehal agarwal,
can you provide the barcode scanner code with example.
Have you tried it with the barcode too? as it can scan both I think so.
how to change heightForScannerFrame and also width
Is it possible to set time out and re initiate to scanner? Some times i am facing it’s unable to scan the code for a longer time. My intention is to set timeout for some time. And when it’s unable to read the code it will show some message something like “Unable to scan, try again”. And when user click on it it will again re initiate the camera to scan. Please let me know how to do this
Yeah sure, you can use Timeout and can change the state of this.state.opneScanner If you need how to do that then you can see this example https://aboutreact.com/animated-splash-screen/. In the example suggested look into the constructor where I have set a Timeout of 3 sec(3000 MiliSec)
Awesome example