Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/barodeur/react-native-nfc-ios
Easy to use CoreNFC for React Native
https://github.com/barodeur/react-native-nfc-ios
corenfc ios nfc react react-native xcode
Last synced: 5 days ago
JSON representation
Easy to use CoreNFC for React Native
- Host: GitHub
- URL: https://github.com/barodeur/react-native-nfc-ios
- Owner: barodeur
- License: mit
- Created: 2017-08-01T13:26:55.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-09-20T13:34:41.000Z (about 3 years ago)
- Last Synced: 2024-11-07T15:56:32.526Z (about 1 month ago)
- Topics: corenfc, ios, nfc, react, react-native, xcode
- Language: JavaScript
- Homepage:
- Size: 227 KB
- Stars: 60
- Watchers: 5
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-react-native - react-native-nfc-ios ★52 - Easy to use CoreNFC for React Native (Components / System)
- awesome-react-native-native-modules - react-native-nfc-ios ★32
- awesome-react-native - react-native-nfc-ios ★52 - Easy to use CoreNFC for React Native (Components / System)
- awesome-react-native - react-native-nfc-ios ★52 - Easy to use CoreNFC for React Native (Components / System)
- awesome-react-native - react-native-nfc-ios ★52 - Easy to use CoreNFC for React Native (Components / System)
README
# ⚠️ 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`](https://www.npmjs.com/package/react-native-nfc-manager) as alternative.
---
[](https://travis-ci.org/barodeur/react-native-nfc-ios)
[](https://badge.fury.io/js/react-native-nfc-ios)
# 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
## 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
```xml
com.apple.developer.nfc.readersession.formats
NDEF
```
Add the `NFCReaderUsageDescription` key to your project's `Info.plist`
```xml
NFCReaderUsageDescription
Ready to use NFC 🚀
```
### 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.
```javascript
[
{
"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.
```javascript
import { EMPTY_RECORD } from 'react-native-nfc-ios';
```
## API
### Promise API - One tag at a time
```javascript
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.
```javascript
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
```javascript
// 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');
```