Skip to content
main
Switch branches/tags
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Jun 21, 2017

README.md

react-native-nfc-manager

npm version build issues

Bring NFC feature to React Native. Inspired by phonegap-nfc and react-native-ble-manager

Contributions are welcome!

Install

javascript part

npm i --save react-native-nfc-manager

native part

This library use native-modules, so you will need to do pod install for iOS:

cd ios && pod install && cd ..

For Android, it should be properly auto-linked, so you don't need to do anything.

Setup

Please see here

Demo

Please see this project: React Native NFC ReWriter App

Basic Usage

If all you want to do is to read NDEF data, you can use this example:

import NfcManager, {NfcEvents} from 'react-native-nfc-manager';

// Pre-step, call this before any NFC operations
async function initNfc() {
  await NfcManager.start();
}

function readNdef() {
  const cleanUp = () => {
    NfcManager.setEventListener(NfcEvents.DiscoverTag, null);
    NfcManager.setEventListener(NfcEvents.SessionClosed, null);
  };

  return new Promise((resolve) => {
    let tagFound = null;

    NfcManager.setEventListener(NfcEvents.DiscoverTag, (tag) => {
      tagFound = tag;
      resolve(tagFound);
      NfcManager.setAlertMessageIOS('NDEF tag found');
      NfcManager.unregisterTagEvent().catch(() => 0);
    });

    NfcManager.setEventListener(NfcEvents.SessionClosed, () => {
      cleanUp();
      if (!tagFound) {
        resolve();
      }
    });

    NfcManager.registerTagEvent();
  });
}

Anything else, ex: write NDEF, send custom command, please read next section.

Advanced Usage

In high level, there're 3 steps to perform advanced NFC operations:

  1. request your specific NFC technology
  2. select the proper NFC technology handler, which is implemented as getter in main NfcManager object, including:
    • ndefHandler
    • nfcAHandler
    • isoDepHandler
    • iso15693HandlerIOS
    • mifareClassicHandlerAndroid
    • mifareUltralightHandlerAndroid
  3. call specific methods on the NFC technology handler
  4. clean up your tech registration

For example, here's an example to write NDEF:

import NfcManager, {NfcTech, Ndef} from 'react-native-nfc-manager';

// Pre-step, call this before any NFC operations
async function initNfc() {
  await NfcManager.start();
}

async function writeNdef({type, value}) {
  let result = false;

  try {
    // Step 1
    await NfcManager.requestTechnology(NfcTech.Ndef, {
      alertMessage: 'Ready to write some NDEF',
    });

    const bytes = Ndef.encodeMessage([Ndef.textRecord("Hello NFC")]);

    if (bytes) {
      await NfcManager
        .ndefHandler // Step2
        .writeNdefMessage(bytes); // Step3

      if (Platform.OS === 'ios') {
        await NfcManager.setAlertMessageIOS('Successfully write NDEF');
      }
    }

    result = true;
  } catch (ex) {
    console.warn(ex);
  }

  // Step 4
  NfcManager.cancelTechnologyRequest().catch(() => 0);
  return result;
}

To see more examples, please see React Native NFC ReWriter App

API

Please see here

FAQ

Please see here

Legacy (v1, v2) docs

v2

v1