Barcode & QR Code Scanner Using React Native and Expo

Hi Guys, Here i am explaining about Barcode Scanning from scratch.

First you need to install React Native and Yarn globally using below commands.

npm install -g create-react-native-app

npm install -g yarn

Now you create project using below command.

create-react-native-app BarcodeExpo

Download Expo in playstore & Enable developer options and usb debugging in your android device and run below commands for execute it.

cd BarcodeExpo

yarn start

Press “a”

Then, Open BarcodeExpo/App.js and Import below line in this code

import { Vibration,StyleSheet, Text, View } from ‘react-native’;

import { BarCodeScanner, Permissions } from ‘expo’;

Then you ask for the camara permission
state = {
   hasCameraPermission:null,
}
async componentWillMount() {
   const { status } =await Permissions.askAsync(Permissions.CAMERA);
   this.setState({hasCameraPermission:status===’granted’});
}
Check for the permission details and render barcode scanner. Replace below code in render()
const { hasCameraPermission } = this.state;
if (hasCameraPermission===null) {
   return <Text>Requesting for camera permission</Text>;
} else if (hasCameraPermission === false) {
   return <Text>No access to camera</Text>;
} else {
   return (
      <View style={styles.container}>
      <BarCodeScanner
      onBarCodeRead={this._handleBarCodeRead}
     style={{ height:250, width:350 }}
      />
   </View>
   );
}
Now need to write readed barcode details.(_handleBarcodeRead function)
_handleBarCodeRead= ( { type, data }) => {
   alert(`Bar code type : ${type} and data : ${data} `);
}
If you want vibration after scan you will add below line after alert in _handleBarCodeRead() function.
Vibration.vibrate(100);
Final Code :
import React from 'react';

import { Vibration,StyleSheet, Text, View } from 'react-native';

import { BarCodeScanner, Permissions } from 'expo';

export default class App extends React.Component {

  state = {

     hasCameraPermission:null,

  }

  async componentWillMount() {

     const { status } =await Permissions.askAsync(Permissions.CAMERA);

     this.setState({hasCameraPermission:status==='granted'});

  }

  render() {

    const { hasCameraPermission } = this.state;

    if (hasCameraPermission === null) {

    return <Text>Requesting for camera permission</Text>;

    } else if (hasCameraPermission === false) {

    return <Text>No access to camera</Text>;

    } else {

        return (

            <View style={styles.container}>

              <BarCodeScanner

                  onBarCodeRead={this._handleBarCodeRead}

                  style={{ height: 250, width: 350 }}

              />

            </View>

            );

    }

  }

  _handleBarCodeRead = ( { type, data }) => {

     alert(`Bar code type : ${type} and data : ${data} `); 

      Vibration.vibrate(100);

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    justifyContent: 'center',

  },

});

Get code in Git: Click Here

Expo Demo: Click Here

barcode scanned

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
<span>%d</span> bloggers like this: