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:
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.
|
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:
Also Read :
React Native Create FlatList using JSON Parsing Data Example Tutorial
React Native Get Android Device IMEI Number on Button Click Example Tutorial
Wish You All a Very Very Happy New Year 2018
React Native Get Device Current Location Latitude Longitude Example
Debug React Native Android iOS App Using Console.log Tutorial
