# Expo Barcode Scanner

Before we start we will update our node, npm and expo cli. Just to use all the latest features. Now create a new expo project. Choose the project with everything previously setup. We choose this app to get quickly started.

```
nvm use 12 // install version 12 - latest@2019  
npm install -g expo-cli // install expo cli globally  
expo init // create a project  
// choose the javascript project with navigation setup
```
<iframe src="https://www.youtube.com/embed/OT7Lprq-xPE?feature=oembed" width="640" height="480" frameborder="0" scrolling="no"></iframe>

Final product demo

### Scanner Screen

In the app, as I am using the minimal setup project I am using the default `HomeScreen` as `ScannerScreen`. We are using a React class component you may simply use functional components with hooks for state management.

The Scanner screen is a class-based component. The state has two important properties one `hasCameraPermissions` for if the screen has permission to access the camera and the second property is`isScanned` for if something has been scanned or not. Initially, the state of `ScannerScreen` for `hasCameraPermissions` is null. Null means that we are requesting for permission. And state `isScanned` is false means nothing is scanned as of now.

As the scanner requires camera permission thus we need to ask for camera permission from the user.   
Permission is an asynchronous task and we must ask for permission as soon as this component is mounted so `componentDidMount` seems like a good place to start. Note Permission asking is asynchronous so we have to make `componentDidMount` a `async` function. If Camera permission is given then `hasCameraPermissions` is set to true and we may successfully render our barcode scanner and open camera else if permission is declined `*hasCameraPermissions*` is set to false and we render declined permission message.

Next, we have a function for handling a successfully scanned barcode. If the bar code is scanned this function will be called. Our function `*handleBarCodeScanned*` is passed as callback to `*onBarCodeScanned*` prop on `*BarCodeScanner*` component. In `*handleBarCodeScanned*` function we receive a scan object as an argument which has two important properties, one is the `*type*` which means what type of bar code was scanned and the other is `*data*` which is the encrypted data in our barcode. We will destructure these properties as others are irrelevant to us. In our case of `*handleBarCodeScanned*` *function,* we are just navigating to the `*DecodeScreen*` passing *code data* as params. The `DecodeScreen` then displays the data.

```jsx
import React from 'react';


import { Container, Spinner, TextH3 } from "../UI";

import * as Permissions from 'expo-permissions';

import { BarCodeScanner } from 'expo-barcode-scanner';

import {window} from "../constants/Layout";

class ScannerScreen extends React.Component{
  static navigationOptions = {
    header: null
  }
  // Component State
  state = {
    hasCameraPermission: null, // if app has permissions to acess camera
    isScanned: false // scanned
  }
  async componentDidMount() {
    // ask for camera permission
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    console.log(status);
    this.setState({ hasCameraPermission: status === "granted" ? true : false });
  }


  handleBarCodeScanned = ({ type, data }) => {
      // Do something here
      this.props.navigation.navigate('Decode', {
        data: data 
      });
  }
  render(){
    const { hasCameraPermission, isScanned } = this.state;
    if(hasCameraPermission === null){
      // requesting permission
      return (
        <Spinner />
      );
    }
    if(hasCameraPermission === false){
        //permission denied
      return ( 
        <Container>
         <TextH3>Please grant Camera permission</TextH3>
        </Container> 
      )
    }
    if(hasCameraPermission === true && !isScanned && this.props.navigation.isFocused() ){
      // we have permission and this screen is under focus
      return <Container style = {{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'

      }}>
        <TextH3>Scan code inside window</TextH3>
        <BarCodeScanner
          onBarCodeScanned = { isScanned ? undefined : this.handleBarCodeScanned }
          style = {{
            height:  window.height / 2,
            width: window.height,
          }}
        >
        </BarCodeScanner>
      </Container>
    }
    else{
      return <Spinner />;
    }
  }
}
export default ScannerScreen;
```

**Github Repo:** [vtechguys/medium](https://github.com/vtechguys/medium/tree/master/RN_bar_code_scanner)