This project is a simple Proof of Concept (POC) application designed to demonstrate the reading of data from NFC tags, cards, and other devices emitting NFC signals. The application uses the react-native-nfc-manager library to interface with NFC hardware on Android devices.
The primary goal of this POC is to perform a generic NFC reading operation within a configurable timeout period (default set to 10 seconds). It aims to provide a minimal but functional demonstration of NFC tag detection and data reading, including handling cases where no tag is found within the timeout.
Note: Make sure you have prepared your environment with the steps described below before proceeding.
Before running the project, ensure your development environment is properly configured as follows:
- Download and install the latest Java Development Kit (JDK) required by Android Studio and React Native.
- Set the
JAVA_HOMEenvironment variable to point to your JDK installation folder. - Verify installation by running
java -versionin your terminal.
- Download and install Android Studio.
- During installation, include the Android SDK, SDK Platform tools, and Android SDK Build-Tools components.
- Configure Android Studio for React Native development by installing necessary SDK packages and ensuring you have an Android virtual device (optional if working with a real device).
- Enable Developer options on your device by tapping the build number in Settings > About phone multiple times.
- Within Developer options, enable USB Debugging.
- Connect the device to your computer via USB.
- On your device, authorize the computer if prompted for USB debugging permissions.
- Ensure your computer has the appropriate USB drivers installed (especially for Windows).
- Verify connection by running
adb devicesto see if your device is listed. - If your device shows as unauthorized, accept the debugging prompt on your device.
First, you need to run Metro, the JavaScript bundler for React Native.
Run this from the root directory of the project:
# Using npm
npm start
# OR using Yarn
yarn startWith Metro running, open a new terminal and use one of the following commands to build and run your app on your Android device:
# Using npm
npm run android
# OR using Yarn
yarn androidNow that you have successfully run the app, let's make changes!
Open App.tsx (or the relevant entry file) in your editor and make any changes you need. The app supports Fast Refresh so you can see your updates live.
Open the NfcComponent.tsx file in your text editor of choice. This file contains the main NFC reading logic, including tag detection, timeout handling, and error display.
When you save changes to this file, your app will automatically update and reflect these changes — this is powered by Fast Refresh.
If you run into issues running the app:
- Confirm your device is properly connected and recognized by
adb devices. - Verify Java SDK and Android Studio installations and environment variables.
- Check NFC support on your device.
- Review permissions and USB Debugging status.
- See the React Native troubleshooting guide.
- React Native Official Documentation
- react-native-nfc-manager Documentation and Examples
- Android Developer Setup
- NFC Basics
This README provides a concise yet comprehensive guide on both setting up your environment and understanding the purpose and capabilities of this NFC reading proof of concept application. 12345678
Footnotes
-
https://www.npmjs.com/package/react-native-nfc-manager/v/3.13.1 ↩
-
https://innovision-software.com/blog/implementing-nfc-react-native ↩
-
https://www.clouddefense.ai/code/javascript/example/react-native-nfc-manager ↩
-
https://github.com/revtel/react-native-nfc-manager/wiki/Examples ↩
-
https://codesandbox.io/examples/package/react-native-nfc-manager ↩
-
https://www.newline.co/courses/newline-guide-to-nfcs-with-react-native/tap-and-go-project-setup-with-react-native-and-nfc-manager ↩