Bring NFC feature to React Native. Inspired by phonegap-nfc and react-native-ble-manager
Contributions are welcome!
We also have a slack channel, you're welcome to chat with us for any issue or idea! join us here
npm i --save react-native-nfc-manager
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.
Please see here
We have a full featured NFC utility app available for download.
It also open sourced in this repo: React Native NFC ReWriter App
Super useful library to help you share states between sibling
and nested
React components.
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.
In high level, there're 3 steps to perform advanced NFC operations:
- request your specific NFC technology
- select the proper NFC technology handler, which is implemented as getter in main
NfcManager
object, including:- ndefHandler
- nfcAHandler
- isoDepHandler
- iso15693HandlerIOS
- mifareClassicHandlerAndroid
- mifareUltralightHandlerAndroid
- call specific methods on the NFC technology handler
- 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
Please see here
Please see here
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.
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 iOSNFCReaderUsageDescription
permission message to theInfo.plist
. Settingfalse
will skip adding the permission. Defaults toAllow $(PRODUCT_NAME) to interact with nearby NFC devices
(Info.plist).selectIdentifiers
(string[]): Sets the iOScom.apple.developer.nfc.readersession.iso7816.select-identifiers
to a list of supported application IDs (Info.plist).systemCodes
(string[]): Sets the iOScom.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.
{
"expo": {
"plugins": [
[
"react-native-nfc-manager",
{
"nfcPermission": "Custom permission message",
"selectIdentifiers": ["A0000002471001"],
"systemCodes": ["8008"]
}
]
]
}
}