Bring NFC feature to React Native. Inspired by phonegap-nfc and react-native-ble-manager
Contributions are welcome!
npm i --save react-native-nfc-managerThis 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
Please see this project: React Native NFC ReWriter App
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
NfcManagerobject, 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