NFC on Android with React and TypeScript using Capacitor or Cordova

Web App

npx create-react-app react-nfc --typescript
cd react-nfc
npm i phonegap-nfc
npm i --save-dev @types/phonegap-nfc
App.tsx
App.css
npm run build

Mobile Wrappers

Preparing the Android device

  • Activate the Developer Mode: open the Android settings, go in System → About device, then tap Build number quickly seven times.
  • Activate USB Debugging: in Settings → System → Developer options, turn USB debugging ON.
  • Connect the device to the computer.
  • If a notification USB charging this device appears, tap on it and select Transfer files.
  • Answer OK when Android asks Allow USB debugging?.

Capacitor

npm i @capacitor/core @capacitor/cli
npx cap init --web-dir build
npx cap add android
Our web app on an Android device with NFC not enabled
npm run build
npx cap sync

Resources with Capacitor

Cordova

ReactDOM.render(<App />, document.getElementById("root"));
document.addEventListener(
"deviceready",
() => ReactDOM.render(<App />, document.getElementById("root")),
false
);
"homepage" : "./",
npm run build
  • Create the ANDROID_SDK_ROOT variable
  • Add the bin folder of graddle in the PATH
  • Make sure the graddle executable is actually executable
export ANDROID_SDK_ROOT=<path-to-the-android-sdk>
export PATH=$PATH:<path-to-android-studio>/gradle/gradle-<version>/bin
chmod +x <path-to-android-studio>/gradle/gradle-<version>/bin/gradle
npx cordova create Cordova com.example ReactNfc
cd Cordova
npx cordova plugin add phonegap-nfc
npx cordova platform add android
<script src="cordova.js"></script>
<script src="cordova.js"></script></body></html>
npx cordova run
npm i cordova
"cordova": "node_modules/cordova/bin/cordova"
npm run cordova run
sudo npm install -g cordova

Further Readings

Notes

  • An error occurred when I was initialising Capacitor with the PhoneGap NFC plugin. I had to open the file node_modules/@capacitor/cli/dist/android/update.js and replace line 208 from:
const pathParts = getPathParts(configElement.$.parent);
const pathParts = getPathParts(configElement.$.parent || configElement.$.target);
  • An error occurred when I was initialising Cordova with the PhoneGap NFC plugin. I had to open the file Cordova/plugins/phonegap-nfc/plugin.xml and comment out the following section (starting at line 39):
<edit-config file="AndroidManifest.xml" target="/manifest/uses-sdk" mode="merge">
<uses-sdk android:minSdkVersion="19" />
</edit-config>
npx cordova platform add android

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Flat Time: Instant Unit Testing of Timer Based Logic

Making your first Test

Reduce Cost and Increase Productivity with Value Added IT Services from buzinessware — {link} -

Weekly Tech Report

How to Setup a Perfect Kubernetes Cluster using KOPS on AWS

How to Secure Nginx with Certbot on Ubuntu

Finding the unknown unknowns

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Zwyx

Zwyx

More from Medium

Top 10 Tools I found productive when working with TypeScript

Mouse Click and Hold in Javascript With React Example

React Hooks (useState and useEffect) Concepts In-depth

Axios vs fetch(): Which is best for making HTTP requests?