List of scanned barcodes using ReactNative & Expo

Create a new Expo Project with a blank template.

expo init Barcodescan

Then install react native elements for UI & start the application.

yarn add reactnativeelements

expo start

Open app.js and write below code

import { StyleSheet, Text, View,ScrollView, Alert, Vibration } from ‘react-native’;
import { ListItem, List } from ‘react-native-elements’;
import { BarCodeScanner, Permissions } from ‘expo’;
Initialize the state variable for permissions and list
state = {
  hasCameraPermission:null,
  barcodesListShow : [],
  barcodesList : []
};

Ask for the camera permission

async componentWillMount() {
  const { status } =awaitPermissions.askAsync(Permissions.CAMERA);
  this.setState({hasCameraPermission:status==='granted'});
}

Add the below code in the main view container

<View>
  {this.state.hasCameraPermission===null?
  <Text>Requesting for camera permission</Text>:
  this.state.hasCameraPermission===false?
  <Text>Camera permission is not granted</Text>:
  <BarCodeScanner
    onBarCodeRead={this._handleBarCodeRead}
    style={{ height:200 }}
  />
  }
</View>
<ScrollView>
  <List>
    {this.state.barcodesListShow.map((item) => (
    <ListItem
      key={item.data}
      title={item.data}
      onPress={()=>this._delete(item)}
      leftIcon={{name: 'barcode-scan',type:'material-community',color:'#000'}}
      subtitle={item.type}
      rightIcon={{name: 'close-box-outline',type:'material-community',color:'#000'}}    />
    )) }
  </List>
</ScrollView>

Push the scanned data into barcodesListShow and barcodesList.

_handleBarCodeRead=data=> {
  Vibration.vibrate(100);
  let st=true;
  for(leti=0;i<this.state.barcodesList.length;i++){
    if(this.state.barcodesList[i].data==data.data){
      st=false;
    }
  }

  if(st){
    this.state.barcodesList.push(data);
    this.setState({barcodesListShow :this.state.barcodesList});
  }else{
    console.log('alerdy scanned.');
  }
};
Delete barcode when we touch in the list with alert confirmation.
_delete = (data) => {
  Alert.alert(
    'Info',
    'Do you want to deleate?',
    [
      {text: 'NO', onPress: () => console.log('Item Not Deleated.'), style: 'cancel'},
      {
        text: 'YES', onPress: () => {
          for(let i=0;i<this.state.barcodesList.length;i++){
            if(this.state.barcodesList[i].data==data.data){
              this.state.barcodesList.splice(i,1);
              this.setState({barcodesListShow :this.state.barcodesList});
              break;
            }
          }
        }
      },
    ]
  );
}
Git Link: Click Here

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: