ReactNative QR Code

React Native are cross-platform for mobile. Also, QR code is a convenient tool. Can we use one library of QR code to fit all mobile apps? Yes, we can.

Let’s try react native QR code scanner. Of cause, you will require to start a react-native project by using react-native init “your project name”.

Step 1. Install react-native-camera

First of all, for Android you need to install react native camera as follows. That is convenient way to install react-native packages and configure your project settings automatically.

npm install react-native-camera --save
react-native link react-native-camera

Step 2. Install react-native-qrcode-scanner

npm install react-native-qrcode-scanner --save
react-native link react-native-qrcode-scanner
react-native link react-native-permissions

Android Project Configuration

In Android project settings, add the following lines into your android/app/build.gradle

You also need to add permission of use camera in AndroidManifest.xml as follows.

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

In the MainApplication.java of your project will be looking such as follows.

iOS Project Configuration

For iOS 10 or higher, you need to add camera usage description key in your_project/ios/your_project/Info.plist

<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>

<!-- Include this only if you are planning to use the camera roll -->
<key>NSPhotoLibraryUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>

<!-- Include this only if you are planning to use the microphone for video recording -->
<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microsphone is accessed for the first time</string>

Sample Code

I only want to describe how iOS sample work below since it is a little bit tricky than Android. In iOS, camera permission requires to check if it is authorized by users.

Snipped code of requesting camera permission

<View style={styles.container}>
<TouchableHighlight
style={[styles.button, styles[this.state.status[camera]]]}
key={camera}
onPress={() => this._requestCameraPermission(camera)}
>
<View>
<Text style={styles.subtext}>{this.state.status[camera]}</Text>
</View>
</TouchableHighlight>
</View>
_requestCameraPermission = (permission) => {
Permissions.request(permission).then(response => {
this.setState({ cameraPermission: response })
})
}

The camera permission will be requested by using Permissions.request(…)

_requestPermission = permission => {
var options
if (permission == 'location') {
options = this.state.isAlways ? 'always' : 'whenInUse'
}
Permissions.request(permission, options)
.then(res => { this.setState({ status: { ...this.state.status, [permission]: res },
})
if (res != 'authorized') {
var buttons = [{ text: 'Cancel', style: 'cancel' }]
if (this.state.canOpenSettings)
buttons.push({
text: 'Open Settings',
onPress: this._openSettings,
})
Alert.alert( 'Whoops!','There was a problem getting your permission. Please enable it from settings.',buttons,)
}
})
.catch(e => console.warn(e))
}

Finally, we can write your code of getting QR code and details you can refer to here.

'use strict';

import React, { Component } from 'react';

import {
AppRegistry,
StyleSheet,
Text,
NavigatorIOS,
TouchableOpacity,
Linking,
} from 'react-native';

import QRCodeScanner from 'react-native-qrcode-scanner';

class ScanScreen extends Component {
onSuccess(e) {
Linking.openURL(e.data).catch(err => console.error('An error occured', err));
}

render() {
return (
<NavigatorIOS
initialRoute={{
component: QRCodeScanner,
title: 'Scan Code',
passProps: {
onRead: this.onSuccess.bind(this),
topContent: (
<Text style={styles.centerText}>
Go to <Text style={styles.textBold}>wikipedia.org/wiki/QR_code</Text> on your computer and scan the QR code.
</Text>
),
bottomContent: (
<TouchableOpacity style={styles.buttonTouchable}>
<Text style={styles.buttonText}>OK. Got it!</Text>
</TouchableOpacity>
),
},
}}
style={{ flex: 1 }}
/>
);
}
}

Trouble Shooting

If you encounter any problems of react-native camera, you can try to use another branch of react-native-camera by using this "react-native-camera": "git+https://git@github.com/react-native-community/react-native-camera" instead of "react-native-camera": "^1.0.0" in your package.json.

“dependencies”: {
“react”: “16.2.0”,
“react-native”: “0.52.0”,
“react-native-camera”: “git+https://git@github.com/react-native-community/react-native-camera.git",
“react-native-permissions”: “^1.1.1”,
“react-native-qrcode-scanner”: “^1.0.0”
}

If you liked this post, please clap it. Thank you!

References

react-native-qrcode-scanner

react-native-permissions