QR Code also known as Quick Response Code is a 2 dimensional matrix block code in picture format. QR Code consist square blocks of black color with remaining white space between them. In current world QR Code is very handy in mobile phones and mainly used to scan pictures & Websites URL. After scanning QR Code it will open the URL in browser. We have also publish a tutorial before on Generating QR code, you can read the tutorial from here. In this tutorial we would create QR Code Scanner App using Camera in Android iOS React Native Example Tutorial. We are using react-native-camera-kit NPM library in our project to scan qr code.
Note: I am using react native 0.52.2 version in current project. If you faced any error executing project then read my this tutorial to solve the error.
Note: We are using online website to generate online QR Code . If you wish to test your apps then you can also use this website.
React Native QR Code Scanner App using Camera Android iOS Example Tutorial:
1. Open your react native project folder in Command Prompt or Terminal & execute below command to install react-native-camera-kit NPM library. This command will automatically download and install the camera kit library in your current react native project.
1 |
npm install react-native-camera-kit --save |
Screenshot:
3. Configure project for Android Devices:
1. Goto YourReactNativeProject -> android -> app -> src -> main -> AndroidManifest.xml file. Open AndroidManifest.xml file in notepad editor. Put below CAMERA permission in it. This permission is necessary to access the device camera.
1 |
<uses-permission android:name="android.permission.CAMERA"/> |
Source Code of AndroidManifest.xml file after adding camera permission:
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 |
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.project"> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.CAMERA"/> <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="false" android:theme="@style/AppTheme"> <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize" android:windowSoftInputMode="adjustResize"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" /> </application> </manifest> |
4. Configure project for iOS Devices:
1. Goto Your_React_Native_project -> ios -> project.xcodeproj and open your project in XCode.
2. Open info.plist file in XCode.
3. Click on small plus icon present just above the Information Property List .
4. Select Privacy – Camera Usages Description permission like i did in below screenshot. Now add some text in front of permission to know about permission.
Here you go guys. Now your project is successfully configured for Android & iOS devices.
5. Open your project’s main App.js file & import StyleSheet, View, Text, Platform, TouchableOpacity, Linking, and PermissionsAndroid component.
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, Text, Platform, TouchableOpacity, Linking, PermissionsAndroid } from 'react-native'; |
6. Import CameraKitCameraScreen component from react-native-camera-kit library in your project.
1 |
import { CameraKitCameraScreen, } from 'react-native-camera-kit'; |
7. Create constructor() in your project & make 2 States named as QR_Code_Value and Start_Scanner.
QR_Code_Value : Will hold the QR code value after done scanning.
Start_Scanner : Used to show and hide the View on QR code scanning complete.
1 2 3 4 5 6 7 8 9 10 11 12 |
constructor() { super(); this.state = { QR_Code_Value: '', Start_Scanner: false, }; } |
8. Create a function named as openLink_in_browser(). In this function we would simply open the Scanned QR Code URL in default web browser.
1 2 3 4 5 |
openLink_in_browser = () => { Linking.openURL(this.state.QR_Code_Value); } |
9. Create a function named as onQR_Code_Scan_Done(). We would call this function on QR Code scan time. This function would store the qr code in state.
1 2 3 4 5 6 |
onQR_Code_Scan_Done = (QR_Code) => { this.setState({ QR_Code_Value: QR_Code }); this.setState({ Start_Scanner: false }); } |
10. Create a function named as open_QR_Code_Scanner(). In this function we would first ask for Android’s runtime permission to Access device camera. We are using Platform API here so the Runtime permission code will be executed in Android device only.
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 |
open_QR_Code_Scanner=()=> { var that = this; if (Platform.OS === 'android') { async function requestCameraPermission() { try { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.CAMERA, { 'title': 'Camera App Permission', 'message': 'Camera App needs access to your camera ' } ) if (granted === PermissionsAndroid.RESULTS.GRANTED) { that.setState({ QR_Code_Value: '' }); that.setState({ Start_Scanner: true }); } else { alert("CAMERA permission denied"); } } catch (err) { alert("Camera permission err", err); console.warn(err); } } requestCameraPermission(); } else { that.setState({ QR_Code_Value: '' }); that.setState({ Start_Scanner: true }); } } |
11. We are putting a If conditional statement in render’s block. To show the default View. We are using the IF condition to show and hide the both views between Scanner view and app view. In the main render’s return block we would define the CameraKitCameraScreen component.
- showFrame : Used to show and hide the frame block in QR Code scanner screen.
- scanBarcode : Used to restrict the qr code scanner.
- laserColor : Used to define laser color.
- frameColor : Used to set the qr code scanner framer side color.
- colorForScannerFrame : Used to set the frame color.
- onReadCode : Used to get the QR Code after done scanning.
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 |
render() { if (!this.state.Start_Scanner) { return ( <View style={styles.MainContainer}> <Text style={{ fontSize: 22, textAlign: 'center' }}>React Native Scan QR Code Example</Text> <Text style={styles.QR_text}> {this.state.QR_Code_Value ? 'Scanned QR Code: ' + this.state.QR_Code_Value : ''} </Text> {this.state.QR_Code_Value.includes("http") ? <TouchableOpacity onPress={this.openLink_in_browser} style={styles.button}> <Text style={{ color: '#FFF', fontSize: 14 }}>Open Link in default Browser</Text> </TouchableOpacity> : null } <TouchableOpacity onPress={this.open_QR_Code_Scanner} style={styles.button}> <Text style={{ color: '#FFF', fontSize: 14 }}> Open QR Scanner </Text> </TouchableOpacity> </View> ); } return ( <View style={{ flex: 1 }}> <CameraKitCameraScreen showFrame={true} scanBarcode={true} laserColor={'#FF3D00'} frameColor={'#00C853'} colorForScannerFrame={'black'} onReadCode={event => this.onQR_Code_Scan_Done(event.nativeEvent.codeStringValue) } /> </View> ); } |
12. Creating style.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, paddingTop: (Platform.OS) === 'ios' ? 20 : 0, alignItems: 'center', justifyContent: 'center', }, QR_text: { color: '#000', fontSize: 19, padding: 8, marginTop: 12 }, button: { backgroundColor: '#2979FF', alignItems: 'center', padding: 12, width: 300, marginTop: 14 }, }); |
13. Complete source code for App.js file class.
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 134 135 |
import React, { Component } from 'react'; import { StyleSheet, View, Text, Platform, TouchableOpacity, Linking, PermissionsAndroid } from 'react-native'; import { CameraKitCameraScreen, } from 'react-native-camera-kit'; export default class App extends Component { constructor() { super(); this.state = { QR_Code_Value: '', Start_Scanner: false, }; } openLink_in_browser = () => { Linking.openURL(this.state.QR_Code_Value); } onQR_Code_Scan_Done = (QR_Code) => { this.setState({ QR_Code_Value: QR_Code }); this.setState({ Start_Scanner: false }); } open_QR_Code_Scanner=()=> { var that = this; if (Platform.OS === 'android') { async function requestCameraPermission() { try { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.CAMERA, { 'title': 'Camera App Permission', 'message': 'Camera App needs access to your camera ' } ) if (granted === PermissionsAndroid.RESULTS.GRANTED) { that.setState({ QR_Code_Value: '' }); that.setState({ Start_Scanner: true }); } else { alert("CAMERA permission denied"); } } catch (err) { alert("Camera permission err", err); console.warn(err); } } requestCameraPermission(); } else { that.setState({ QR_Code_Value: '' }); that.setState({ Start_Scanner: true }); } } render() { if (!this.state.Start_Scanner) { return ( <View style={styles.MainContainer}> <Text style={{ fontSize: 22, textAlign: 'center' }}>React Native Scan QR Code Example</Text> <Text style={styles.QR_text}> {this.state.QR_Code_Value ? 'Scanned QR Code: ' + this.state.QR_Code_Value : ''} </Text> {this.state.QR_Code_Value.includes("http") ? <TouchableOpacity onPress={this.openLink_in_browser} style={styles.button}> <Text style={{ color: '#FFF', fontSize: 14 }}>Open Link in default Browser</Text> </TouchableOpacity> : null } <TouchableOpacity onPress={this.open_QR_Code_Scanner} style={styles.button}> <Text style={{ color: '#FFF', fontSize: 14 }}> Open QR Scanner </Text> </TouchableOpacity> </View> ); } return ( <View style={{ flex: 1 }}> <CameraKitCameraScreen showFrame={true} scanBarcode={true} laserColor={'#FF3D00'} frameColor={'#00C853'} colorForScannerFrame={'black'} onReadCode={event => this.onQR_Code_Scan_Done(event.nativeEvent.codeStringValue) } /> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, paddingTop: (Platform.OS) === 'ios' ? 20 : 0, alignItems: 'center', justifyContent: 'center', }, QR_text: { color: '#000', fontSize: 19, padding: 8, marginTop: 12 }, button: { backgroundColor: '#2979FF', alignItems: 'center', padding: 12, width: 300, marginTop: 14 }, }); |
Screenshots:
Amazing!! thanks a lot for your tutorial
Welcome Anderson 🙂 .
Sir, can it use to scan barcode as well?
No henry, It is only for QR codes.
Amazing <3
Welcome Mehmat 🙂 .
i got some exception like this : – Invariant Violation: requireNativeComponent: “CKCamera” was not found in the UlManager. This error is located at: in CKCamera (at CameraKitCamera.ios.js:17) in CameraKitCamera (at CameraKitCameraScreenBase.js:156) in RCTView (at View.js:45) in View (at CameraKitCameraScreenBase.js:149) in RCTView (at View.js:45) in View (at CameraKitCameraScreen.ios.js: 9) in CameraScreenBase (at App.js:102) in RCTView (at View.js:45) in View (at App.js:100) in App (at renderApplication.js:35) in RCTView (at View.js:45) in View (at AppContainer.js:98) in RCTView (at View.js:45) in View (at AppContainer.js:115) in AppContainer (at renderApplication.js:34)
Try to install the library again with run as administrator mode.
I’m having the same issue… Installing the library as administrator didn’t solve it either.
Tried with running the command in administrator mode, but again same issue.
Run the command pod install from ios folder it will resolve the error.
which property is used for the read text when we are scannning the QR.
Jyoti the property is same for both web URL & text. You need to choose this option on QR-Code generating time .
can I increase the scanner frame size?
Yes Aizaz you can increase the frame size.Read the library official documentation and you’ll find there style option.
Actually, I tried it to scan datamatrix qr code, and it worked on android, but it didn’t recognize the same qr code when I scanned it on iOS??
Thanks for the reply,but can you please guide me how can i use QR-Code generating time.
can you please provide the example which read the text when we are scanning QR code.
Jyoti i have used the sitehttps://www.the-qrcode-generator.com/ to generate QR CODE. In same site when you open it you’ll find a tab FREE TEXT so if you select Free Text and generate qr code then it will generate the Text . This is same on all sites we have to choose this on QR code generating time.
i dont want this type of example,actually i want OCR Reader App Demo.Can you please provide me.
Sorry Jyoti, I haven’t read about OCR yet but there is a library on NPM : https://github.com/jonathanpalma/react-native-tesseract-ocr you could check it.
thank a lot <3
Welcome John 🙂 .
I did everything step by step, but it doesn’t work. I can’t run the app after this command:
npm install react-native-camera-kit –save. Is it work with react native v0.60?
Thanks for notifying us. Currently i am also facing issue while running project 0.60 version. In 0.60 the npm server is not staring automatically, I have to run the server manually each time. Did you face the same problem ?
Ur QRcode scanning example is nice .i just want flash button on same screen. how to add it i search several websites but didnt get any solution
Ramkruhan you want to start the flash light while scanning qr code so it can scan in night also ? Am i right ?
Yes ,can you help me
i got an error (Camera permission err)while clicking on the button Open Qr Scanner .
Maria you need to put camera permission in AndroidManifest.xml file.
Scanner is not working,showing the error: unfortunetly, app has stopped. 🙁
Did you put the camera permission ?
Hello, firstly it’s great tutorial.
Mine using your tutorial can open the camera scanning but cannot read readQRCode event. It’s scanning forever
What changes you have made in the code ?
Hello,I have done coding as per your example but onReadCode or onReadQRCode event are not firing at all.I have tried many ways but it’s not working,my react-native version is-0.59.9.It’s really urgent need to implement this feature kindly help me.Eagerly waiting for your feedback.
Shampa i will run the code in same version as yours and notify you ASAP.
how to set height and width scanner
Anupam read their documentation you could use custom style to modify the height and width.
Hi, how to reduce the camera size ..I want to display camera half of the screen only..Can you please tel me how to use custom styles in this .
this.onBottomButtonPressed(event)}
captureButtonImage={Theme.Icons.cameraButton}
styles={StyleSheet.absoluteFill}
scanBarcode={true} // THERE IS IMPORTANT
onReadCode={event => Alert.alert(“Code found”)}
/>
try this
please make a code for vechicle number plate scanner in react native
Shiva how you want to scan the number plate like using Bar code or direct number read ?
directly number plate reader
github.com/RobertSasak/react-native-openalpr
like the above link but it is not working sir please help me
Shiva give me 2 days i will check the code and reply you back in 2 days if it is working properly ?
sir help me please
sir code is working or not
in this demo project can we make multiple scanning qr code?
Hey. I need to open qr code reader by front camera.
Can you help me?
Thanks for raising this issue, i will check the library code and notify you soon.
Hi,
How to reduce the camera size, I need to display the camera half of the screen with we code heilighted area should be in center .
I tried lot , can your please suggest me
Thanks
You need to look up in the Plugin if they support the camera customization .
Hi, I want to start the flashlight while scanning QR code so it can scan at night also? How can I do it
sir camera kit error i have face when i’m run in expo pleas help
Device: (921:881) Unable to resolve module ‘module://CameraKitGallery.js’
ESLint: (39:7) Move function declaration to function body root. (no-inner-declarations)
checked these error and pleas solve it