E-passport Reader
Published: 2023-12-11 16:53:12

## 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
```bash
npx create-expo-app --template
```

### Method 2: Adding TypeScript
#### STEP1:
```bash
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
```bash
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](https://reactnative.dev/docs/environment-setup)

Once you installed your first template, you can execute your first App by the following commands:
```bash
#using npm
npm run start

#in another terminal
npm run android
```
## How to install module
```bash
#using npm 
npm i react-native-nfc-passport-reader

#using yarn
yarn i react-native-nfc-passport-reader
```
## ✔️Usage
```bash
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](https://codewithandrea.com/articles/keytool-command-not-found-how-to-fix-windows-macos/)

### -Install JDK
[Download JDK](https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.html)
### -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](https://instamobile.io/android-development/generate-react-native-release-build-android/)

## ✔️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.