npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-nfc-manager-wat

v1.0.4

Published

A NFC module for react native.

Downloads

7

Readme

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!

Made with ❤️ by whitedogg13 and revteltech

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

Android 12

We start to support Android 12 from v3.11.1, and you will need to update compileSdkVersion to 31, otherwise the build will fail:

buildscript {
    ext {
        ...
        compileSdkVersion = 31
        ...
    }
    ...
}

The reason for this is because Android puts new limitation on PendingIntent which says Starting with Build.VERSION_CODES.S, it will be required to explicitly specify the mutability of PendingIntents

The original issue is here

BTW, if you don't care about Android 12 for now, you can use v3.11.0 as a short term solution.

[Demo App] NfcOpenReWriter

We have a full featured NFC utility app using this library available for download.

It also open sourced in this repo: React Native NFC ReWriter App

Learn

We have published a React Native NFC course with newline.co, check it out!

  • Free course (1 hour) about basic NFC setup and concept here
  • Full course (3 hours) for more (NDEF, Deep Linking, NTAG password protection, signature with UID) here

Usage

The simplest (and most common) use case for this library is to read NFC tags containing NDEF, which can be achieved via the following codes:

import React from 'react';
import {View, Text, TouchableOpacity, StyleSheet} from 'react-native';
import NfcManager, {NfcTech} from 'react-native-nfc-manager';

// Pre-step, call this before any NFC operations
NfcManager.start();

function App() {
  async function readNdef() {
    try {
      // register for the NFC tag with NDEF in it
      await NfcManager.requestTechnology(NfcTech.Ndef);
      // the resolved tag object will contain `ndefMessage` property
      const tag = await NfcManager.getTag();
      console.warn('Tag found', tag);
    } catch (ex) {
      console.warn('Oops!', ex);
    } finally {
      // stop the nfc scanning
      NfcManager.cancelTechnologyRequest();
    }
  }

  return (
    <View style={styles.wrapper}>
      <TouchableOpacity onPress={readNdef}>
        <Text>Scan a Tag</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Pleaes notice when running above codes, iOS and Android has different behaviors:

  • iOS will pop up a system scanning UI
  • Android provides NO system scanning UI

Regarding the system scannning UI, both platforms should be able to scan your NFC tags succesfully and print out its content.

Old Style (registerTagEvent) To Scan NFC Tags

There's an alterntaive style to scan NFC tags through NfcManager.registerTagEvent, like this:

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

// The following function resolves to a NFC Tag object using old event listener approach.
// You can call it like this:
//    `const nfcTag = await listenToNfcEventOnce()`

function listenToNfcEventOnce() {
  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.unregisterTagEvent();
    });

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

    NfcManager.registerTagEvent();
  });
}

As you can see, the above approach is more verbose and hard-to-read, so we recommend using NfcManager.requestTechnology instead of NfcManager.registerTagEvent in your application.

Advanced Usage Concept

In higher level, there're 4 steps to use this library:

  1. request your particular NFC technologies through NfcManager.requestTechnology, for example:

    • Ndef
    • NfcA
    • NfcB (Android-only)
    • NfcF (Android-only)
    • NfcV (Android-only)
    • IsoDep
    • MifareClassic (Android-only)
    • MifareUltralight (Android-only)
    • MifareIOS (ios-only)
    • Iso15693IOS (ios-only)
    • FelicaIOS (ios-only)
  2. select the proper NFC technology handler, which is implemented as getter in main NfcManager object, for example:

    • ndefHandler (for Ndef tech)
    • nfcAHandler (for NfcA tech)
    • isoDepHandler (for IsoDep tech)
    • iso15693HandlerIOS (for Iso15693IOS tech)
    • mifareClassicHandlerAndroid (for mifareClassic tech)
    • mifareUltralightHandlerAndroid (for mifareUltralight tech)
    • ... and so on
  3. call specific methods on the NFC technology handler (for example NfcManager.ndefHandler.writeNdefMessage). To view all available methods for some tech handler, check out the API List

  4. clean up your tech registration through NfcManager.cancelTechnology

Advanced Usage Example: NDEF-Writing

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

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

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

  try {
    // STEP 1
    await NfcManager.requestTechnology(NfcTech.Ndef);

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

    if (bytes) {
      await NfcManager.ndefHandler // STEP 2
        .writeNdefMessage(bytes); // STEP 3
      result = true;
    }
  } catch (ex) {
    console.warn(ex);
  } finally {
    // STEP 4
    NfcManager.cancelTechnologyRequest();
  }

  return result;
}

Advanced Usage Example: Mifare Ultralight

Here's another example to read a Mifare Ultralight tag:

async function readMifare() {
  let mifarePages = [];

  try {
    // STEP 1
    let reqMifare = await NfcManager.requestTechnology(
      NfcTech.MifareUltralight,
    );

    const readLength = 60;
    const mifarePagesRead = await Promise.all(
      [...Array(readLength).keys()].map(async (_, i) => {
        const pages = await NfcManager.mifareUltralightHandlerAndroid // STEP 2
          .mifareUltralightReadPages(i * 4); // STEP 3
        mifarePages.push(pages);
      }),
    );
  } catch (ex) {
    console.warn(ex);
  } finally {
    // STEP 4
    NfcManager.cancelTechnologyRequest();
  }

  return mifarePages;
}

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

API

Please see here

FAQ

Please see here

Expo

This package cannot be used in the "Expo Go" app because it requires custom native code.

After installing this npm package, add the config plugin to the plugins array of your app.json or app.config.js:

{
  "expo": {
    "plugins": ["react-native-nfc-manager"]
  }
}

Next, rebuild your app as described in the "Adding custom native code" guide.

Notice: This Config Plugin will ensure the minimum Android SDK version is 31.

Props

The plugin provides props for extra customization. Every time you change the props or plugins, you'll need to rebuild (and prebuild) the native app. If no extra properties are added, defaults will be used.

  • nfcPermission (string | false): Sets the iOS NFCReaderUsageDescription permission message to the Info.plist. Setting false will skip adding the permission. Defaults to Allow $(PRODUCT_NAME) to interact with nearby NFC devices (Info.plist).
  • selectIdentifiers (string[]): Sets the iOS com.apple.developer.nfc.readersession.iso7816.select-identifiers to a list of supported application IDs (Info.plist).
  • systemCodes (string[]): Sets the iOS com.apple.developer.nfc.readersession.felica.systemcodes to a user provided list of FeliCa™ system codes that the app supports (Info.plist). Each system code must be a discrete value. The wild card value (0xFF) isn't allowed.

Example

{
  "expo": {
    "plugins": [
      [
        "react-native-nfc-manager",
        {
          "nfcPermission": "Custom permission message",
          "selectIdentifiers": ["A0000002471001"],
          "systemCodes": ["8008"]
        }
      ]
    ]
  }
}