React Native QR Code Scanner App using Camera Android iOS Example

admin March 31, 2019 March 31, 2019React Native

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.

npm install react-native-camera-kit --save

1	npm install react-native-camera-kit --save

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.

<uses-permission android:name="android.permission.CAMERA"/>

1	<uses-permission android:name="android.permission.CAMERA"/>

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

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

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

</intent-filter>

</activity>

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

import React, { Component } from 'react';

import { StyleSheet, View, Text, Platform, TouchableOpacity, Linking, PermissionsAndroid } from 'react-native';

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.

import { CameraKitCameraScreen, } from 'react-native-camera-kit';

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.

constructor() {

    super();

    this.state = {

      QR_Code_Value: '',

      Start_Scanner: false,

    };
  }

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.

openLink_in_browser = () => {

    Linking.openURL(this.state.QR_Code_Value);

  }

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.

onQR_Code_Scan_Done = (QR_Code) => {

    this.setState({ QR_Code_Value: QR_Code });

    this.setState({ Start_Scanner: false });
  }

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.

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 });
    }
  }

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.

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>
    );
  }

render() {

if (!this.state.Start_Scanner) {

return (

<Text style={{ fontSize: 22, textAlign: 'center' }}>React Native Scan QR Code Example</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}>

Open QR Scanner

</Text>

</TouchableOpacity>

</View>

);

}

return (

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

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
  },
});

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.

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
  },
});

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 (

<Text style={{ fontSize: 22, textAlign: 'center' }}>React Native Scan QR Code Example</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}>

Open QR Scanner

</Text>

</TouchableOpacity>

</View>

);

}

return (

<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:

React Native Show Image Icon Inside Activity Header Title Bar in React Navigation

React Native AutoComplete Text Input Android iOS Example Tutorial

Add New Activity in React Native App Using StackNavigator Android iOS Tutorial

54 Comments

Anderson
April 1, 2019 at 12:56 pm

Amazing!! thanks a lot for your tutorial

Reply
- admin
  April 1, 2019 at 2:26 pm
  
  Welcome Anderson 🙂 .
  
  Reply
henry
April 8, 2019 at 12:15 pm

Sir, can it use to scan barcode as well?

Reply
- admin
  April 8, 2019 at 1:42 pm
  
  No henry, It is only for QR codes.
  
  Reply
Mehmet
April 23, 2019 at 8:05 am

Amazing <3

Reply
- admin
  April 27, 2019 at 4:00 pm
  
  Welcome Mehmat 🙂 .
  
  Reply
durgaraju
May 2, 2019 at 4:24 pm

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)

Reply
- admin
  May 3, 2019 at 10:08 am
  
  Try to install the library again with run as administrator mode.
  
  Reply
  - Nathan
    October 10, 2019 at 4:39 pm
    
    I’m having the same issue… Installing the library as administrator didn’t solve it either.
    
    Reply
  - Anup
    October 24, 2019 at 9:22 am
    
    Tried with running the command in administrator mode, but again same issue.
    
    Reply
    - Anup
      October 24, 2019 at 11:07 am
      
      Run the command pod install from ios folder it will resolve the error.
      
      Reply
jyoti
June 10, 2019 at 11:50 am

which property is used for the read text when we are scannning the QR.

Reply
- admin
  June 12, 2019 at 5:40 pm
  
  Jyoti the property is same for both web URL & text. You need to choose this option on QR-Code generating time .
  
  Reply
aijaz
June 14, 2019 at 12:07 pm

can I increase the scanner frame size?

Reply
- admin
  June 15, 2019 at 7:14 pm
  
  Yes Aizaz you can increase the frame size.Read the library official documentation and you’ll find there style option.
  
  Reply
Peter
June 18, 2019 at 8:35 pm

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

Reply
jyoti
June 20, 2019 at 12:01 pm

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

Reply
jyoti
June 20, 2019 at 12:06 pm

can you please provide the example which read the text when we are scanning QR code.

Reply
- admin
  June 20, 2019 at 3:52 pm
  
  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.
  
  Reply
jyoti
June 21, 2019 at 4:55 am

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

Reply
- admin
  June 21, 2019 at 5:41 am
  
  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.
  
  Reply
John
June 26, 2019 at 8:24 am

thank a lot <3

Reply
- admin
  June 26, 2019 at 4:23 pm
  
  Welcome John 🙂 .
  
  Reply
Vladimir
July 9, 2019 at 5:53 am

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?

Reply
- admin
  July 9, 2019 at 4:13 pm
  
  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 ?
  
  Reply
Ramkruhan
July 29, 2019 at 11:29 am

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

Reply
- admin
  July 31, 2019 at 6:41 am
  
  Ramkruhan you want to start the flash light while scanning qr code so it can scan in night also ? Am i right ?
  
  Reply
Ramkruhan
July 31, 2019 at 10:15 am

Yes ,can you help me

Reply
maria
July 31, 2019 at 12:29 pm

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

Reply
- admin
  August 4, 2019 at 2:15 pm
  
  Maria you need to put camera permission in AndroidManifest.xml file.
  
  Reply
olivia
July 31, 2019 at 12:43 pm

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

Reply
- admin
  August 4, 2019 at 2:15 pm
  
  Did you put the camera permission ?
  
  Reply
Susanto
August 19, 2019 at 9:22 am

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

Reply
- admin
  August 19, 2019 at 4:21 pm
  
  What changes you have made in the code ?
  
  Reply
Shampa kundu
August 22, 2019 at 1:54 pm

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.

Reply
- admin
  August 26, 2019 at 12:23 pm
  
  Shampa i will run the code in same version as yours and notify you ASAP.
  
  Reply
anupam gupta
September 6, 2019 at 12:44 pm

how to set height and width scanner

Reply
- admin
  September 8, 2019 at 2:52 am
  
  Anupam read their documentation you could use custom style to modify the height and width.
  
  Reply
  - Amarnath
    November 14, 2019 at 6:15 pm
    
    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 .
    
    Reply
Zeeshan
September 14, 2019 at 7:14 am

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

Reply
shivakumar
September 25, 2019 at 11:59 am

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

Reply
- admin
  September 26, 2019 at 3:28 pm
  
  Shiva how you want to scan the number plate like using Bar code or direct number read ?
  
  Reply
  - shivakumar
    September 27, 2019 at 7:59 am
    
    directly number plate reader
    github.com/RobertSasak/react-native-openalpr
    like the above link but it is not working sir please help me
    
    Reply
    - admin
      September 27, 2019 at 5:29 pm
      
      Shiva give me 2 days i will check the code and reply you back in 2 days if it is working properly ?
      
      Reply
      - shivakumar
        September 30, 2019 at 3:43 am
        
        sir help me please
      - shivakumar
        October 1, 2019 at 3:55 am
        
        sir code is working or not
musadiq
October 1, 2019 at 5:38 am

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

Reply
PIOTER
October 10, 2019 at 1:28 pm

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

Reply
- admin
  October 13, 2019 at 6:16 am
  
  Thanks for raising this issue, i will check the library code and notify you soon.
  
  Reply
Amarnathreddy
November 14, 2019 at 6:18 pm

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

Reply
- admin
  November 15, 2019 at 4:21 am
  
  You need to look up in the Plugin if they support the camera customization .
  
  Reply
Daksh
January 21, 2020 at 7:32 am

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

Reply
saeed
March 4, 2020 at 5:39 pm

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

Reply
saeed
March 4, 2020 at 5:43 pm

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

Reply

React Native QR Code Scanner App using Camera Android iOS Example

React Native QR Code Scanner App using Camera Android iOS Example Tutorial:

Related posts:

54 Comments

Leave a Reply Cancel reply

Search Here