This project is a robust React Native template demonstrating modern, user-friendly NFC tag and EMV (credit card) reading.
It uses a custom React hook for NFC operations and an animated modal for rich user experience.

Below you can see a step-by-step NFC reading flow.
The screenshots are shown side by side and resized for a compact overview:

1. Start NFC     2. Scanning     3. Result

You can watch a full demo of the NFC reader in action below:

Note: Make sure you have completed the Set Up Your Environment guide before proceeding.

Start the Metro JavaScript build tool:

# Using npm
npm start

# OR using Yarn
yarn start

Open a new terminal and run:

npm run android
# OR
yarn android

First install CocoaPods dependencies if not already:

bundle install
bundle exec pod install

Then:

npm run ios
# OR
yarn ios

If everything is set up correctly, your app will run in the Android Emulator, iOS Simulator, or a connected device.

All NFC logic is handled in a custom hook (useNfc).
This hook:

• Checks if NFC is enabled and reacts to changes
• Guides the user to device settings if NFC is off
• Reads both classic NFC tags and credit cards (EMV protocol)
• Parses and structures all read data for easy display
• Manages progress animation and step text during scanning
• Handles errors and success states robustly
• Offers utility functions for copying and modal control

Typical flow:

• When scanning starts, the hook checks if NFC is enabled.
• If not, the user is prompted to enable it.
• The hook auto-detects if the card is EMV or a standard tag.
• Progress bar and step messages inform the user during the process.
• On completion, success or error feedback is shown.
• All data (card number, tag ID, etc.) can be copied to clipboard.

A custom modal provides a rich UI for NFC scanning:

• While scanning: Animated NFC icon, progress bar, step message, and cancel button
• On completion: Success/failure animation and detailed data card
• Data rows: Each row is easily copyable and styled for clarity
• Modal smoothly animates in/out, acting like a bottom sheet
• Data display adapts to both credit cards and NFC tags

UX features:

• Progress and step feedback during scanning
• Clear animations for error or success
• Data display is modern, readable, and copy-enabled

.
├── hooks/
│   └── useNfc.ts
├── components/
│   └── NfcModal.tsx
├── assets/
│   ├── nfc-scan.json
│   ├── success.json
│   └── failure.json
├── screenshots/
│   ├── scan.gif
│   ├── success.png
│   └── taginfo.png
├── App.tsx
└── README.md

• Credit Card (EMV) Reading
• Classic NFC Tag Reading (NDEF, Mifare, Ultralight, etc.)
• Animated progress bar & step messaging
• Lottie animations for error/success
• Easy copy to clipboard
• Modern, user-friendly modal
• Clean, customizable, and easily extendable codebase

• React Native Website
• react-native-nfc-manager
• Lottie for React Native
• Clipboard API