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

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

  6. 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??

  7. Thanks for the reply,but can you please guide me how can i use QR-Code generating time.

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

  9. i dont want this type of example,actually i want OCR Reader App Demo.Can you please provide me.

  10. thank a lot <3

  11. 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 ?

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

  13. Yes ,can you help me

  14. i got an error (Camera permission err)while clicking on the button Open Qr Scanner .

  15. Scanner is not working,showing the error: unfortunetly, app has stopped. 🙁

  16. Hello, firstly it’s great tutorial.
    Mine using your tutorial can open the camera scanning but cannot read readQRCode event. It’s scanning forever

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

  18. how to set height and width scanner

  19. this.onBottomButtonPressed(event)}
    captureButtonImage={Theme.Icons.cameraButton}
    styles={StyleSheet.absoluteFill}
    scanBarcode={true} // THERE IS IMPORTANT
    onReadCode={event => Alert.alert(“Code found”)}
    />
    try this

  20. please make a code for vechicle number plate scanner in react native

  21. in this demo project can we make multiple scanning qr code?

  22. Hey. I need to open qr code reader by front camera.
    Can you help me?

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

  24. Hi, I want to start the flashlight while scanning QR code so it can scan at night also? How can I do it

  25. sir camera kit error i have face when i’m run in expo pleas help

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

Leave a Reply

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