React Native NFC for iOS
⚠️ Apple CoreNFC is only available for iOS11 on iPhone 7 and iPhone 7 Plus devices.
It does not seems to be available on simulator at the moment, but it should be available later.
Demo
How to use
Installation
Install the module
npm install --save react-native-nfc-ios
Link the native module to your project
react-native link react-native-nfc-ios
Prepare your Xcode project
Add the NFC capability key to your .entitlements
file
<key>com.apple.developer.nfc.readersession.formats</key>
<array>
<string>NDEF</string>
</array>
Add the NFCReaderUsageDescription
key to your project's Info.plist
<key>NFCReaderUsageDescription</key>
<string>Ready to use NFC 🚀</string>
Lean about NDEF Messages Structure (NFC Data Exchange Format)
As CoreNFC, the API will return arrays of messages, each message containing an array of records.
[
{
"records": [
{
"type": "VQ==",
"payload": "UmVhY3QgTmF0aXZlIE5GQyBpT1M=",
"identifier": null,
"typeNameFormat": "WELL_KNOWN_RECORD",
}
]
}
]
Every record will have a Base64 encoded type
, payload
and identifier
.
The typeFormatName
will be one of the following constant :
EMPTY_RECORD
WELL_KNOWN_RECORD
MIME_MEDIA_RECORD
ABSOLUTE_URI_RECORD
EXTERNAL_RECORD
UNKNOWN_RECORD
UNCHANGED_RECORD
You can import those constants form the module.
import { EMPTY_RECORD } from 'react-native-nfc-ios';
API
Promise API - One tag at a time
import base64 from 'base-64';
import { NFCNDEFReaderSession } from 'react-native-nfc-ios';
const messages = await NFCNDEFReaderSession.readTag();
const payloadB64 = messages[0].records[0].payload;
const payload = base64.decode(payloadB64);
console.log(payload);
CoreNFC binding API - Aka Event API
This API is designed to stay as close as possible to CoreNFC.
import { NFCNDEFReaderSession } from 'react-native-nfc-ios';
const readerSession = new NFCNDEFReaderSession();
const listener = readerSession.addEventListener('NDEFMessages', (messages) => {
console.log(messages);
});
readerSession.begin();
readerSession.invalidate();
readerSession.removeEventListener('NDEFMessages', listener);
readerSession.removeAllEventListeners('NDEFMessages');
readerSession.release();
Set the Alert Message
As with the native CoreNFC API you can set the alert message
const messages = await NFCNDEFReaderSession.readTag({
alertMessage: 'Please put your NFC Tag',
});
const readerSession = new NFCNDEFReaderSession({
alertMessage: 'Please put your NFC Tag',
});
readerSession.setAlertMessage('New alert message');