Skip to content

Latest commit

 

History

History
150 lines (107 loc) · 3.78 KB

README.md

File metadata and controls

150 lines (107 loc) · 3.78 KB
Raw

⚠️ Deprecated ⚠️

This project is deprecated. It has not been updated since React Native 0.48 and probably doesn't work on recent version of React Native anymore.

I would suggest to use react-native-nfc-manager as alternative.

Build Status npm version

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

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==", // base64 encoded for 55, URI record
        "payload": "UmVhY3QgTmF0aXZlIE5GQyBpT1M=", // base64 encoded for "React Native NFC iOS"
        "identifier": null,  // No identifier in the tag
        "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);
// "React Native NFC iOS"

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);
});

// Show the NFC reader
readerSession.begin();

// Close the NFC reader
readerSession.invalidate();

// Remove the event listener
readerSession.removeEventListener('NDEFMessages', listener);

// Or Remove all events listeners
readerSession.removeAllListeners('NDEFMessages');

// ⚠️ Release the native instance to free memory
readerSession.release();

Set the Alert Message

As with the native CoreNFC API you can set the alert message

// With the Simple API
const messages = await NFCNDEFReaderSession.readTag({
  alertMessage: 'Please put your NFC Tag',
});

// As you instantiate a new NFCNDEFReaderSession
const readerSession = new NFCNDEFReaderSession({
  alertMessage: 'Please put your NFC Tag',
});

// Change reader session alert message
readerSession.setAlertMessage('New alert message');