Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-native-nfc
Advanced tools
Readme
This project has the goal of making it easy (or easier) to scan NFC tags and read the NDEF records they contain.
To read the NDEF data it makes use of the library ndef-tools-for-android.
This library is compatible and was tested with React Native projects with version >= 0.40.0
Install the plugin via NPM:
$ npm install react-native-nfc --save
and then link it:
$ react-native link react-native-nfc
Take a moment to read this Android documentation about NFC Basics, especially the How NFC Tags are Dispatched to Applications section.
Add the permission to read NFC data:
<uses-permission android:name="android.permission.NFC" />
Add the following attribute to your <activity>
section to ensure that all NFC intents are delivered to the same activity.
android:launchMode="singleTask"
Add the following intent filters and metadata tag to instruct Android that you want to catch NFC intents that contain NDEF records and generic payloads about NFC tech, as a fallback in case NDEF messages could not be parsed (see here for more info about this).
<intent-filter>
<action android:name="android.nfc.action.NDEF_DISCOVERED"/>
<category android:name="android.intent.category.DEFAULT"/>
</intent-filter>
<intent-filter>
<action android:name="android.nfc.action.TECH_DISCOVERED"/>
</intent-filter>
<meta-data android:name="android.nfc.action.TECH_DISCOVERED" android:resource="@xml/nfc_tech_filter" />
Create the file android/src/main/res/xml/nfc_tech_filter.xml
and add the following content:
<resources xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2">
<tech-list>
<tech>android.nfc.tech.IsoDep</tech>
<tech>android.nfc.tech.NfcA</tech>
<tech>android.nfc.tech.NfcB</tech>
<tech>android.nfc.tech.NfcF</tech>
<tech>android.nfc.tech.NfcV</tech>
<tech>android.nfc.tech.Ndef</tech>
<tech>android.nfc.tech.NdefFormatable</tech>
<tech>android.nfc.tech.MifareClassic</tech>
<tech>android.nfc.tech.MifareUltralight</tech>
</tech-list>
</resources>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.reactnativenfcdemo"
android:versionCode="1"
android:versionName="1.0">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.NFC" />
<uses-sdk
android:minSdkVersion="16"
android:targetSdkVersion="22" />
<application
android:name=".MainApplication"
android:allowBackup="true"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:screenOrientation="portrait"
android:label="@string/app_name"
android:launchMode="singleTask"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<intent-filter>
<action android:name="android.nfc.action.NDEF_DISCOVERED"/>
<category android:name="android.intent.category.DEFAULT"/>
</intent-filter>
<intent-filter>
<action android:name="android.nfc.action.TECH_DISCOVERED"/>
</intent-filter>
<meta-data android:name="android.nfc.action.TECH_DISCOVERED" android:resource="@xml/nfc_tech_filter" />
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
</manifest>
What you need to do is to register a listener on the NFC module, like this:
function listener(payload){
// TODO
}
NFC.addListener(listener);
This is a more complex example:
import NFC, {NfcDataType, NdefRecordType} from "react-native-nfc";
import React, {Component} from "react";
import {ToastAndroid} from "react-native";
NFC.addListener((payload) => {
switch (payload.type) {
case NfcDataType.NDEF:
let messages = payload.data;
for (let i in messages) {
let records = messages[i];
for (let j in records) {
let r = records[j];
if (r.type === NdefRecordType.TEXT) {
// do something with the text data
} else {
ToastAndroid.show(
`Non-TEXT tag of type ${r.type} with data ${r.data}`,
ToastAndroid.SHORT
);
}
}
}
break;
case NfcDataType.TAG:
ToastAndroid.show(
`The TAG is non-NDEF:\n\n${payload.data.description}`,
ToastAndroid.SHORT
);
break;
}
});
// ... the rest of the app code
Notice: Once you've integrated the plugin in this way you'll be able to receive the data read via NFC by your Android device. You will receive the data even if your app is closed (or killed) and is started as a consequence of a NFC event. If you want to receive the data in a given time,just change the position where you addListener to NFC,such as doing it in the componentDidMount in a page of your program.
import NFC, {NfcDataType, NdefRecordType} from "react-native-nfc";
export default class NfcScanPage extends Component {
constructor(props){
super(props);
}
render() {
return (
....
);
}
componentDidMount(){
this.bindNfcListener();
}
bindNfcListener(){
NFC.addListener((payload)=>{
alert(payload.data.id);
})
}
}
The listener receives a JSON object that has a type property with possible values:
Property | Values |
---|---|
type | Always NfcDataType.NDEF |
id | The id of the tag in hex format. |
data | Contains an array of messages. Each message is an array of records. |
Each record object contains always the properties type and data.
Here is the list of currently supported records:
Type | Data | Other properties |
---|---|---|
NdefRecordType.TEXT | The text string | encoding and locale |
NdefRecordType.URI | The URI string | - |
NdefRecordType.MIME | Base64 data of the mime data | - |
Property | Values |
---|---|
type | Always NfcDataType.TAG |
techList | List of strings about the discoverred tech |
description | string description of the tag useful for debug |
FAQs
This project has the goal of making it easy (or easier) to scan NFC tags and read the NDEF records they contain
The npm package react-native-nfc receives a total of 12 weekly downloads. As such, react-native-nfc popularity was classified as not popular.
We found that react-native-nfc demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.