Create a Barcode/QR Code Scanner application for Android with React Native

react-native init ReactBarcodeScannerProject
cd ReactBarcodeScannerProject
npm install react-native-camera@https://github.com/lwansbrough/react-native-camera.git --save react-native link react-native-camera
<uses-permission android:name="android.permission.VIBRATE"/>
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Linking, Vibration, Dimensions } from 'react-native'; import Camera from 'react-native-camera';
getInitialState() { return { scanning: true, cameraType: Camera.constants.Type.back } }
_handleBarCodeRead(e) { Vibration.vibrate(); this.setState({scanning: false}); Linking.openURL(e.data).catch(err => console.error('An error occured', err)); return; }
render() { if(this.state.scanning) { return ( <View style={styles.container}> <Text style={styles.welcome}> Barcode Scanner </Text> <View style={styles.rectangleContainer}> <Camera style={styles.camera} type={this.state.cameraType} onBarCodeRead={this._handleBarCodeRead.bind(this)}> <View style={styles.rectangleContainer}> <View style={styles.rectangle}/> </View> </Camera> </View> <Text style={styles.instructions}> Double tap R on your keyboard to reload,{'\n'} </Text> </View> ); } else{ return (<View style={styles.container}> <Text style={styles.welcome}> Barcode Scanner </Text> <Text style={styles.instructions}> Double tap R on your keyboard to reload,{'\n'} </Text> </View>); } } }
<Camera style={styles.camera} type={this.state.cameraType} onBarCodeRead={this._handleBarCodeRead.bind(this)}> </Camera>
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Linking,
Vibration,
Dimensions
} from 'react-native';
import Camera from 'react-native-camera';export default class ReactBarcodeScannerProject extends Component {

_handleBarCodeRead(e) {
Vibration.vibrate();
this.setState({scanning: false});
Linking.openURL(e.data).catch(err => console.error('An error occured', err));
return;
}
getInitialState() {
return {
scanning: true,
cameraType: Camera.constants.Type.back
}
}
render() {
if(this.state.scanning) {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Barcode Scanner
</Text>
<View style={styles.rectangleContainer}>
<Camera style={styles.camera} type={this.state.cameraType} onBarCodeRead={this._handleBarCodeRead.bind(this)}>
<View style={styles.rectangleContainer}>
<View style={styles.rectangle}/>
</View>
</Camera>
</View>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
</Text>
</View>
);
}
else{
return (<View style={styles.container}>
<Text style={styles.welcome}>
Barcode Scanner
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
</Text>
</View>);
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
camera: {
flex: 0,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'transparent',
height: Dimensions.get('window').width,
width: Dimensions.get('window').width,
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
rectangleContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'transparent',
},
rectangle: {
height: 250,
width: 250,
borderWidth: 2,
borderColor: '#00FF00',
backgroundColor: 'transparent',
},
});
AppRegistry.registerComponent('ReactBarcodeScannerProject', () => ReactBarcodeScannerProject);

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
WebTutPro

WebTutPro

Web developer and lifetime learner.