Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/revtel/react-native-nfc-manager
React Native NFC module for Android & iOS
https://github.com/revtel/react-native-nfc-manager
android ios nfc react-native
Last synced: 3 days ago
JSON representation
React Native NFC module for Android & iOS
- Host: GitHub
- URL: https://github.com/revtel/react-native-nfc-manager
- Owner: revtel
- License: mit
- Created: 2017-06-17T00:05:59.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-09-26T18:38:32.000Z (4 months ago)
- Last Synced: 2024-10-29T15:29:22.527Z (2 months ago)
- Topics: android, ios, nfc, react-native
- Language: Java
- Homepage:
- Size: 2.69 MB
- Stars: 1,380
- Watchers: 33
- Forks: 317
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-nfc-manager - React Native NFC module for Android & iOS.  (Components / Device)
README
# react-native-nfc-manager
[](https://www.npmjs.com/package/react-native-nfc-manager)
[](https://travis-ci.org/whitedogg13/react-native-nfc-manager)
[](https://github.com/whitedogg13/react-native-nfc-manager/issues)
Bring NFC feature to React Native. Inspired by [phonegap-nfc](https://github.com/chariotsolutions/phonegap-nfc) and [react-native-ble-manager](https://github.com/innoveit/react-native-ble-manager)
Contributions are welcome!
Made with ❤️ by [whitedogg13](https://github.com/whitedogg13) and [revteltech](https://github.com/revtel)
> Special thanks to [javix64](https://github.com/javix64) for restructuring the documentation!
## Table of Contents
1. [Installation](#installation)
2. [Getting Started](#gettingstarted)
3. [Setup](#setup)
4. [Documentation](#docs)
5. [Nfc compatibility](#nfccompatibility)
6. [Usage Concept](#usageconcept)
7. [API](#api)
8. [App demo](#appdemo)
9. [Learn](#learn)
## Installation
```shell
npm i --save react-native-nfc-manager
```
### iOS
This library use native-modules, so you will need to do `pod install` for iOS:
```shell
cd ios && pod install && cd ..
```
### Android
It should be properly auto-linked, so you don't need to do anything.
## Setup
### iOS
1. In [apple developer site](https://developer.apple.com/), enable capability for NFC
2. in Xcode, add `NFCReaderUsageDescription` into your `info.plist`, for example:
```
NFCReaderUsageDescription
We need to use NFC
```
More info on Apple's [doc](https://developer.apple.com/documentation/bundleresources/information_property_list/nfcreaderusagedescription?language=objc)
Additionally, if writing ISO7816 tags add application identifiers (aid) into your `info.plist` as needed like this.
```
com.apple.developer.nfc.readersession.iso7816.select-identifiers
D2760000850100
D2760000850101
```
More info on Apple's [doc](https://developer.apple.com/documentation/corenfc/nfciso7816tag)
**Note:** If you are using `NfcTech.FelicaIOS`, you must also add the following code to your `Info.plist` file, otherwise the library will crash:
```xml
com.apple.developer.nfc.readersession.felica.systemcodes
8005
8008
0003
fe00
90b7
927a
12FC
86a7
```
An incomplete list of aid's can be found here. [Application identifier](https://www.eftlab.com/knowledge-base/211-emv-aid-rid-pix/)
3. in Xcode's `Signing & Capabilities` tab, make sure `Near Field Communication Tag Reading` capability had been added, like this:
If this is the first time you toggle the capabilities, the Xcode will generate a `.entitlement` file for you:
4. in Xcode, review the generated entitlement. It should look like this:
More info on Apple's [doc](https://developer.apple.com/documentation/bundleresources/entitlements/com_apple_developer_nfc_readersession_formats?language=objc)
### Android
Simple add `uses-permission` into your `AndroidManifest.xml`:
```xml
```
#### **Support 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](https://developer.android.com/reference/android/app/PendingIntent#FLAG_MUTABLE) which says `Starting with Build.VERSION_CODES.S, it will be required to explicitly specify the mutability of PendingIntents`
> The original issue is [here](https://github.com/revtel/react-native-nfc-manager/issues/469)
If you don't care about **Android 12** for now, you can use **`v3.11.0`** as a short term solution.
## Getting Started
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:
```javascript
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 (
Scan a Tag
);
}
const styles = StyleSheet.create({
wrapper: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default App;
```
## DOCUMENTATION
Check the full documentation that contains `examples`, `faq` and other topics like `Expo` in our [Wiki](https://github.com/revtel/react-native-nfc-manager/wiki)
## Nfc Compatibility
|NFC Technologies | Android | iOS |
|--- |--- |--- |
| `Ndef` | ✅ | ✅ |
| `NfcA` | ✅ | ✅ |
| `IsoDep` | ✅ | ✅ |
| `NfcB` | ✅ | ❌ |
| `NfcF` | ✅ | ❌ |
| `NfcV` | ✅ | ❌ |
| `MifareClassic` | ✅ | ❌ |
| `MifareUltralight`| ✅ | ❌ |
| `MifareIOS` | ❌ | ✅ |
| `Iso15693IOS` | ❌ | ✅ |
| `FelicaIOS` | ❌ | ✅ |
## Usage concept
In higher level, there're 4 steps to use this library:
0. (Recommended but not necessary) Before all next steps, use `NfcManager.start()` to start listen a tag.
1. Request your particular NFC technologies through `NfcManager.requestTechnology`. Let's request `Ndef` techonogy.
```javascript
NfcManager.requestTechnology(NfcTech.Ndef);
```
2. Select the proper NFC technology handler, which is implemented as getter in main `NfcManager` object.
```javascript
NfcManager.ndefHandler
```
3. Call specific methods on the NFC technology handler.
```javascript
NfcManager.ndefHandler.getNdefMessage()
```
4. Clean up your tech registration through:
```javascript
NfcManager.cancelTechnologyRequest()
```
## API
The following table shows the handler for each technology, so if you need to use a technology, go to [index.d.ts](index.d.ts) and search for it.
|NFC Technologies | Handlers |
|--- |--- |
| `Ndef` | `NdefHandler` |
| `NfcA` | `NfcAHandler` |
| `IsoDep` | `IsoDepHandler` |
| `NfcB` | - |
| `NfcF` | - |
| `NfcV` | `NfcVHandler` |
| `MifareClassic` | `MifareClassicHandlerAndroid` |
| `MifareUltralight`| `MifareUltralightHandlerAndroid` |
| `MifareIOS` | - |
| `Iso15693IOS` | `Iso15693HandlerIOS` |
| `FelicaIOS` | - |
## App Demo - NfcOpenReWriter
We have a full featured NFC utility app using this library available for download. The source code is here: [**React Native NFC ReWriter App**](https://github.com/revtel/react-native-nfc-rewriter)
## Learn
We have published a React Native NFC course with [newline.co](https://www.newline.co/), check it out!
- Free course (1 hour) about basic NFC setup and concept [here](https://www.youtube.com/watch?v=rAS-DvNUFck)
- Full course (3 hours) for more (NDEF, Deep Linking, NTAG password protection, signature with UID) [here](https://www.newline.co/courses/newline-guide-to-nfcs-with-react-native)