John Rajan

Posted on Dec 11, 2023

E-passport Reader

Hello everyone!

Nice to meet you.
I'm glad to share my experience working on a project that involved reading MRZ data from e-passports using the 'react-native-nfc-passport-reader' module.
In this blog post, I will guide you through the steps to use this module effectively.

What is MRZ Data?

MRZ stands for Machine Readable Zone, which is a sequence of characters at the bottom of an e-passport that contains personal information of the passport holder. This information includes the passport holder's name, date of birth, passport number, and expiration date.

✔️Prerequisites

1.Creating Type Script Template

Note:I recommend to use Method 3.

Method 1: Using Expo

npx create-expo-app --template

Method 2: Adding TypeScript

STEP1:

npm install -D @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript

STEP2:

-Create a tsconfig.json and add the following part in root directory
{
"extends": "@tsconfig/react-native/tsconfig.json"
}

Method 3: Using template

npx react-native init MyAwesomeProject --template react-native-template-typescript

2.Running your first App

Note:Make sure that you have installed the Android Studio (or only Emulator) and followed React Native - Environment Setup

Once you installed your first template, you can execute your first App by the following commands:

#using npm
npm run start

#in another terminal
npm run android

How to install module

#using npm 
npm i react-native-nfc-passport-reader

#using yarn
yarn i react-native-nfc-passport-reader

✔️Usage

import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';
import NfcCardReader from 'react-native-nfc-card-reader';

interface CardDetails {
  cardNumber: string | null;
  expiryDate: string | null;
  cardType: string | null;
  firstname: string | null;
  surname: string | null;
}

const PassportReaderNew = () => {
  const [cardDetails, setCardDetails] = useState<CardDetails>({
    cardNumber: null,
    expiryDate: null,
    cardType: null,
    firstname: null,
    surname: null,
  });

  const startScan = async () => {
    try {
      const scannedCardDetails = await NfcCardReader.startNfc();
      console.log(scannedCardDetails);
      setCardDetails(scannedCardDetails);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', margin: 20, alignContent: 'center' }}>
      <Button title="Start NFC Scan!" onPress={startScan}></Button>
      <Text>{cardDetails.cardNumber}</Text>
      <Text>{cardDetails.expiryDate}</Text>
      <Text>{cardDetails.cardType}</Text>
      <Text>{cardDetails.firstname}</Text>
      <Text>{cardDetails.surname}</Text>
    </View>
  );
};

export default PassportReaderNew;

✔️Realse App

STEP1: Keytool install!

Note:Make sure that you have installed keytool
if didn't so, you can follow this- Keytool install Guide

-Install JDK

Download JDK

-Set Environment Variable

example: C:\Program Files\Java\jdk-17\bin

STEP2: Perfect Release Guide!(by both the React Native CLI and Android)

Note:Follow this guide!-How to Release your App

✔️Error Report

Error:Could not find a declaration file for module 'react-native-nfc-card-reader'
Solution:
-creat a a file named " index.d.ts "
-adding " declare module 'react-native-nfc-card-reader' "

Error:cann't build your project, undefined SDK Version for 'react-native-nfc-card-reader'
Solution:
-cd node_modules/react-native-nfc-passport-reader/android/build.gradle
-Add the followings:
android {
    compileSdkVersion 33 //your sdk Version
    buildToolsVersion "33.0.0" //your buildTool Version
}

✔️What is Next?

I'd like to post a great way to dive into your first React Native project using TypeScript.

DEV Community