This project has the goal of making it easy (or easier) to scan NFC tags and read the NDEF records they contain. This is forked from the project react-native-rfid-nfc by SMARTRACTECHNOLOGY.
To read the NDEF data it makes use of the library ndef-tools-for-android.
This library is compatible and was tested with React Native projects with version >= 0.40.0
Install the plugin via NPM:
$ npm install react-native-rfid-nfc-scanner --save
and then link it:
$ react-native link react-native-rfid-nfc-scanner
add the following to info.plist
<key>NFCReaderUsageDescription</key>
<string>NFC NDEF Reading.</string>The following entry should be created automatically in your YourAppName.entitlements file once you enable NFC capability
in your app but if not add the following to YourAppName.entitlements
<dict>
<key>com.apple.developer.nfc.readersession.formats</key>
<array>
<string>NDEF</string>
</array>
</dict>Note: If you are having issues getting this to run and you don't have any swift files in your project, just create a new one as simple as this to get the application building with the swift packages (weird bug found while developing)
//
// SwiftFile.swift
// MyAppName
//
// Created by User on Date.
// Copyright © 2018 Facebook. All rights reserved.
import FoundationTake a moment to read this Android documentation about NFC Basics, especially the How NFC Tags are Dispatched to Applications section.
The NFC scanner runs in the foreground for in app scanning.
Add the permission to read NFC data:
<uses-permission android:name="android.permission.NFC" />Add the following attribute to your <activity> section to ensure that all NFC intents are delivered to the same activity.
android:launchMode="singleTask"
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.reactnativenfcdemo"
android:versionCode="1"
android:versionName="1.0">
<uses-permission android:name="android.permission.NFC" />
<uses-sdk
android:minSdkVersion="16"
android:targetSdkVersion="22" />
<application
android:name=".MainApplication"
android:allowBackup="true"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:screenOrientation="portrait"
android:label="@string/app_name"
android:launchMode="singleTask"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<meta-data android:name="android.nfc.action.TECH_DISCOVERED" android:resource="@xml/nfc_tech_filter" />
</activity>
</application>
</manifest>There are 2 ways to use this component. You can use the controller or the underlying scanner object.
To use the NfcRfidScanner class import and create one:
import {NfcRfidScanner} from "react-native-rfid-nfc-scanner";
const scanner = new NfcRfidScanner();
scanner.addListener(
name:String, listenerCallback:Function, errorCallback:Function)This will register a method and error handler to run when an RFID card is scanned
scanner.init()- starts the scanner
scanner.isEnabled()- tells you if the device can use an RFID scanner
scanner.getStatus()- tells you loading status of the device RFID scanner
scanner.clearListeners()The underlying object this was built on is still accessible with
import NFC from "react-native-rfid-nfc-scanner";You can still access the NFC api which has also been expanded.
NFC.initialize();- Start the scanner (For both android and ios)
NFC.stopScan();- Stops the scanner (For android)
NFC.isEnabled();- tells you if the device can use an RFID scanner
NFC.checkDeviceStatus();- Gets the device status (Described below)
NFC.addListener(name, callback, error);- add a scan listener
NFC.removeListener(name);- Remove a specific user (Fixed in iOS)
NFC.removeAllListeners();- Remove all scan listeners
- waiting - Attempting to start up the NFC scanner
- ready - Scanner is ready to use
- missing - The Scanner attempted to start but could not create a reading session
- unavailable - The scanner is not available on this version of the OS
Upon a successful scan, the callback will recieve a payload in the following format:
{
"id": "[String] => scan ID",
"type": "[String] => scan type from device",
"origin": "[String] => 'ios' or 'android'",
"scanned": "[String] => scanned data",
"from_device": "[Object] => payload recieved from the device scan"
}{
"id": "unavailable",
"type": "NFC",
"encoding": "UTF-8",
"origin": "ios",
"scanned": "2033085@MBtilk2XLGLvfxn3edK^qj3Xab/S4B9E92+",
"from_device": {
"origin": "ios",
"data": [
[
{
"locale": "en",
"encoding": "UTF-8",
"type": "TEXT",
"data": "2033085@MBtilk2XLGLvfxn3edK^qj3Xab/S4B9E92+"
}
]
],
"id": "unavailable",
"type": "NFC"
}
}{
"id": "04E49EFA2E4480",
"type": "NDEF",
"encoding": "UTF-8",
"origin": "android",
"scanned": "2033085@MBtilk2XLGLvfxn3edK^qj3Xab/S4B9E92+",
"from_device": {
"origin": "android",
"data": [
[
{
"locale": "en",
"encoding": "UTF-8",
"type": "TEXT",
"data": "2033085@MBtilk2XLGLvfxn3edK^qj3Xab/S4B9E92+"
}
]
],
"id": "04E49EFA2E4480",
"type": "NDEF"
}
}{
"id": "AD10EA35500104E0",
"type": "NfcV",
"encoding": "UTF-8",
"origin": "android",
"scanned": "AD10EA35500104E0",
"from_device": {
"origin": "android",
"data": [
[
{
"id": "AD10EA35500104E0",
"description": "TAG: Tech[android.nfc.tech.NfcV, android.nfc.tech.NdefFormatable]",
"techList": [
"android.nfc.tech.NfcV",
"android.nfc.tech.NdefFormatable"
]
}
]
],
"id": "AD10EA35500104E0",
"type": "TAG"
}
}If an error handler is provided the response will look like this:
{ "error": "Some error message" }- Support more record types in iOS
- Support writing tags
- Advanced NFC operations
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent