React Native QR Code Scanner App using Camera Android iOS Example

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.

Screenshot:

2. Now we need to execute react-native link react-native-camera-kit command. This command would link your newly installed camera kit library in our react native project index. If you still face some integration error then you can manually configure this library in your project using its documentation guide.

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.

Source Code of AndroidManifest.xml file after adding camera permission:

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.

6. Import CameraKitCameraScreen component from react-native-camera-kit library in your project.

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.

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.

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.

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.

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.

12. Creating style.

13. Complete source code for App.js file class.

Screenshots:

QR Code Scanner App using Camera Android iOS Example QR Code Scanner App using Camera Android iOS Example

12 Comments

  1. Amazing!! thanks a lot for your tutorial

  2. Sir, can it use to scan barcode as well?

  3. 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)

  4. 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 .

  5. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *