QR code is popular due to its large storage capacity and instant readability capabilities. Nowadays, most applications use QR codes for item identification, tracking, and even marketing.
Getting Started
A few QR code scanning applications are scanning products in supermarkets, reading ID numbers from Passports, and reading off a vehicle registration number. It gives an easy way to recognize products instead of entering 16-digit long numbers from barcodes.
React-Native has an open-source npm package called react-native-qrcode-scanner to perform the QR code scanning. The following is a list of scan plugins and functionalities you can implement using React-native.
- react-native-qrcode-scanner
- react-native-scan-view
- react-native-camera
The idea behind this article is to develop a QR code scanner application using React native.
Step 1: Create your project in react native
Let’s create a project in react native.
If you are new to react native you can skim through the following article to get in touch with the dependencies and environment setup of react-native along with a hello world app demo.
Develop hello world app in React native
Open the terminal and run the below commands to create a react native project.
create-react-native-app qrcode-scanner-app
cd qrcode-scanner-app
react-native run-android
Step 2: Add your dependencies
Install the dependencies of QRCode scanning into the project.
yarn add react-native-camera@git+https://git@github.com/react-native-community/react-native-camera.git
yarn add react-native-qrcode-scanner
To use react-native-qrcode-scanner, import the module and use the <QRCodeScanner /> tag in your component.
Step 3: Adding permissions
Add the following code to AndroidManifest.xml to access the camera.
<uses-permission android:name="android.permission.CAMERA" />
Step 4: QR Code scanner implementation
In order to call the QRCode method, let us create a beautiful view by clicking the capture button. We will create a component called Scan to scan the QR code using react-native-qrcode-scanner
scan.js
import React, { Component, Fragment } from 'react';
import { TouchableOpacity, Text, Linking, View, Image, ImageBackground, BackHandler } from 'react-native';
import QRCodeScanner from 'react-native-qrcode-scanner';
import styles from './scanStyle';
class Scan extends Component {
constructor(props) {
super(props);
this.state = {
scan: false,
ScanResult: false,
result: null
};
}
onSuccess = (e) => {
const check = e.data.substring(0, 4);
console.log('scanned data' + check);
this.setState({
result: e,
scan: false,
ScanResult: true
})
if (check === 'http') {
Linking.openURL(e.data).catch(err => console.error('An error occured', err));
} else {
this.setState({
result: e,
scan: false,
ScanResult: true
})
}
}
activeQR = () => {
this.setState({ scan: true })
}
scanAgain = () => {
this.setState({ scan: true, ScanResult: false })
}
render() {
const { scan, ScanResult, result } = this.state
return (
<View style={styles.scrollViewStyle}>
<Fragment>
<View style={styles.header}>
<TouchableOpacity onPress={()=> BackHandler.exitApp()}>
<Image source={require('./assets/back.png')} style={{height: 36, width: 36}}></Image>
</TouchableOpacity>
<Text style={styles.textTitle}>Scan QR Code</Text>
</View>
{!scan && !ScanResult &&
<View style={styles.cardView} >
<Image source={require('./assets/camera.png')} style={{height: 36, width: 36}}></Image>
<Text numberOfLines={8} style={styles.descText}>Please move your camera {"\n"} over the QR Code</Text>
<Image source={require('./assets/qr-code.png')} style={{margin: 20}}></Image>
<TouchableOpacity onPress={this.activeQR} style={styles.buttonScan}>
<View style={styles.buttonWrapper}>
<Image source={require('./assets/camera.png')} style={{height: 36, width: 36}}></Image>
<Text style={{...styles.buttonTextStyle, color: '#2196f3'}}>Scan QR Code</Text>
</View>
</TouchableOpacity>
</View>
}
{ScanResult &&
<Fragment>
<Text style={styles.textTitle1}>Result</Text>
<View style={ScanResult ? styles.scanCardView : styles.cardView}>
<Text>Type : {result.type}</Text>
<Text>Result : {result.data}</Text>
<Text numberOfLines={1}>RawData: {result.rawData}</Text>
<TouchableOpacity onPress={this.scanAgain} style={styles.buttonScan}>
<View style={styles.buttonWrapper}>
<Image source={require('./assets/camera.png')} style={{height: 36, width: 36}}></Image>
<Text style={{...styles.buttonTextStyle, color: '#2196f3'}}>Click to scan again</Text>
</View>
</TouchableOpacity>
</View>
</Fragment>
}
{scan &&
<QRCodeScanner
reactivate={true}
showMarker={true}
ref={(node) => { this.scanner = node }}
onRead={this.onSuccess}
topContent={
<Text style={styles.centerText}>
Please move your camera {"\n"} over the QR Code
</Text>
}
bottomContent={
<View>
<ImageBackground source={require('./assets/bottom-panel.png')} style={styles.bottomContent}>
<TouchableOpacity style={styles.buttonScan2}
onPress={() => this.scanner.reactivate()}
onLongPress={() => this.setState({ scan: false })}>
<Image source={require('./assets/camera2.png')}></Image>
</TouchableOpacity>
</ImageBackground>
</View>
}
/>
}
</Fragment>
</View>
);
}
}
export default Scan;
scanStyle.js
import React, { Component } from 'react'
import { Dimensions } from 'react-native';
const deviceWidth = Dimensions.get('screen').width;
const deviceHeight = Dimensions.get('screen').height;
const styles = {
scrollViewStyle: {
flex: 1,
justifyContent: 'flex-start',
backgroundColor: '#2196f3'
},
header: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
height: '10%',
paddingLeft: 15,
paddingTop: 10,
width: deviceWidth,
},
textTitle: {
fontWeight: 'bold',
fontSize: 18,
textAlign: 'center',
padding: 16,
color: 'white'
},
textTitle1: {
fontWeight: 'bold',
fontSize: 18,
textAlign: 'center',
padding: 16,
color: 'white'
},
cardView: {
width: deviceWidth - 32,
height: deviceHeight - 350,
alignSelf: 'center',
justifyContent: 'flex-start',
alignItems: 'center',
borderRadius: 10,
padding: 25,
marginLeft: 5,
marginRight: 5,
marginTop: '10%',
backgroundColor: 'white'
},
scanCardView: {
width: deviceWidth - 32,
height: deviceHeight / 2,
alignSelf: 'center',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 10,
padding: 25,
marginLeft: 5,
marginRight: 5,
marginTop: 10,
backgroundColor: 'white'
},
buttonWrapper: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center'
},
buttonScan: {
borderWidth: 2,
borderRadius: 10,
borderColor: '#258ce3',
paddingTop: 5,
paddingRight: 25,
paddingBottom: 5,
paddingLeft: 25,
marginTop: 20
},
buttonScan2: {
marginLeft: deviceWidth / 2 - 50,
width: 100,
height: 100,
},
descText: {
padding: 16,
textAlign: 'center',
fontSize: 16
},
highlight: {
fontWeight: '700',
},
centerText: {
flex: 1,
textAlign: 'center',
fontSize: 18,
padding: 32,
color: 'white',
},
textBold: {
fontWeight: '500',
color: '#000',
},
bottomContent: {
width: deviceWidth,
height: 120,
},
buttonTouchable: {
fontSize: 21,
backgroundColor: 'white',
marginTop: 32,
width: deviceWidth - 62,
justifyContent: 'center',
alignItems: 'center',
height: 44
},
buttonTextStyle: {
color: 'black',
fontWeight: 'bold',
}
}
export default styles;
Bind the scan component in your App.js file.
import React from 'react';
import Scan from './src/scan';
const App = () => {
return (
<Scan />
);
};
export default App;
Step 5: Run your project
Now, you can run your project by executing the following command,
react-native run-android
There you have it! Your own QR code scanner app in React native :)
To experiment with the various features of QRCode scanning, try the following methods in your application.
Thanks for reading this article.
If you enjoyed this article, please click on the heart button ♥ and share to help others find it!
The full code of the project in the article is available on
GitHub - codemaker2015/qr-code-scanner-react-native
The article is also available on Medium
If you are interested in further exploring, here are some resources I found helpful along the way:
Top comments (0)