Introduction

 

This is a sample application for using MRZ Scanner, the main purpose is to serve as a guide for implementing and using the library. It contains examples of the scanner practical integration.  

To skip this guide, go to the link below to be redirected to the downloading page.

https://mrzscanner.com/download

For a more detailed description of the API methods and Integration guide, see the link below:

https://mrzscanner.com/v1.x/knowledge/for-ionic

Sample Project:

https://github.com/Realmrzscanner/MRZScanner-SampleApp-React-Native

 

React Native Environment Setup

---

 

1. Install node and Watchman

$brew install node
$brew install watchman

 

2. Install React Native CLI

And then install React Native CLI with npm

$npm install -g react-native-cli

3. Run the React Native project on a connected device:

$cd HotelAppSample

$react-native run-android

 

HTML & JS Structure

---

App.js

To navigate between screens, React Native requires 'createStackNavigator' and 'createAppContainer' , this provides a way for your app to transition between screens where each new screen is placed on top of a stack.

To use this navigator, ensure that you have react-navigation and its dependencies installed, then install react-navigation-stack.

//make sure to install yarn if haven't done it yet.

yarn add react-navigation-stack

 

We've created two other .js files and stored them in a separate folder "screens", now we have created two screens "WelcomeScreen" & "MainScreen"

import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer} from 'react-navigation';
import FirstScreen from './screens/WelcomeScreen'
import HomeScreen from './screens/MainScreen'

 

And with the following code, we've initialized the stack View and made our Welcome screen a starting screen:

const Navigation=createStackNavigator({
  First: {screen:WelcomeScreen},
  Home: {screen:MainScreen}
});
export default createAppContainer(Navigation);

 

Home Screen

Below is an example of the starting three buttons, the "Guest Check In" button calls a method on click "goToNextWindow()", while the other two are dummy buttons.

The button click will take us to the "MainScreen"

render(){
 return(
  <View>
      <Button
        //dummy button
           title="Guest Check Out"}/>

   <Button 
     title=""
     onPress={() => this.props.navigation.navigate('Home')}/>

   <Button
        //dummy button
           title="Manage Rooms"}/>
  </View>
);
}

 

   
 

Main Screen

---

The main screen is made out of a Scan Button to activate the scan and a sequence of TextInputs where it adds the results from the scan.

First we have to set a state for the text result that will be returned as a result from the scanner, which is done with the lifecycle event componentDidMount()

constructor() {
    super() 
    this.state = {
      surnameResult: '',
    }
}

 

    componentDidMount(){
      subscription=EventEmitter.addListener
      ('successfulScanEmittedEvent',
        (body) => {
          this.setState({surnameResult : body.surname});
        }
      );
    }

 

The returned results are displayed in the TextInputs
 

<TextInput
   style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
   value={this.state.surnameResult}
   onChangeText={(surnameResult) => 
   this.setState({surnameResult})}        
/>
<TextInput
   style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
   value={this.state.documentNumberTextResult}
   onChangeText={(documentNumberTextResult) => 
   this.setState({documentNumberTextResult})}        
/>
<TextInput
   style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
   value={this.state.nationalityTextResult}
   onChangeText={(nationalityTextResult) => 
   this.setState({nationalityTextResult})}        
/>

 

Implementation

---

 

1. In order to interact with the module, the first thing is to import it into our Home.js file and create a reference to it:

import {NativeModules} from 'react-native' ;
const MrzApp= NativeModules.RNMrzScanner;

 

2. To receive results from the scanner, you have to import “NativeEventEmitter” as following:

const EventEmitter = new NativeEventEmitter(MrzApp);

 

3.We've added our startScanner() functionality to a button and set our scanner to 1: SCANNER_TYPE_MRZ with MrzApp.setScannerType(0) and we've specified the maximum number of CPU threads to 2 with setMaxThreads(2).

<Button
 title="Scan"
 onPress={() => {
 MrzApp.setMaxThreads(2)
 MrzApp.setScannerType(0)
 MrzApp.startScanner()
}}/>   

 

Results

---

To receive results we need to embed an EventListener in the componentDidMount() life cycle method.
 

componentDidMount(){   
      subscription=EventEmitter.addListener
      ('successfulScanEmittedEvent',
        (body) => 
         console.log("Results" + body.surname,
                                 body.document_type_readable,
                                 body.issuing_country,
                                 body.surname,
                                 body.document_number,
                                 body.nationality,
                                 body.dob_raw,
                                 body.dob_readable,
                                 body.sex, )
       );}

The way the listener works is that it waits for an event to happen under the key  "successfulScanEmittedEvent", in this case, we're getting the results for "body".