Matti Hämäläinen
13.02.2020 · Matti Hämäläinen

Coding NFC in React Native, and what I learned on the way

These are some of the lessons I learned when developing an NFC reader app with React Native for both Android and iOS.

NFC, short for Near field communications, is an essential tool for some services in the mobile market. It can be used for event or transit tickets, digital business cards, automating smart home and phone actions, you name it. You may also find an existing solution for some simpler features, if the feature doesn’t need to be integrated to any platform.

Recently I researched and tested out developing NFC for the first time in my life. Here are some things I wish I knew before I started. (You might notice that I don’t share any links to stuff I used in this post, but there’s a ton of resources available online.) I used React Native. When conducting research, I tried a few different packages and settled on react-native-nfc-manager which is one of the most popular packages.

 

Do the legwork first

I started out by just taking the first library I came across and started implementing it to the bootstrapped app. As it turns out this is not the best way to approach NFC. Most of the stuff I worked on in the beginning had to be thrown out and rewritten. When implementing NFC to an app it is really important to do the research first. 

 

Understand the hardware specifications

There are two types of NFC, active and passive. Active ones are devices connected to the network and are actively transmitting data. Passive NFC is usually found in the form of NFC tags. There are 5 different types of tags and all of them have different capacity and uses.

At first you need to figure out what is the purpose of the app and then select the chip type based on your specific criteria. All tag types have multiple different chip manufacturers and they all have their own documentation. When you have chosen the tag type and the chipset, you can then focus on creating the functions based on the manufacturer’s specifications.

The chip I used was Type 2 NXP-NTAG203. It’s an outdated standard but has the same capabilities as the newer NXP-NTAG213 without all of the password protection capabilities.

 

Right tools for the job

Tools for the iOS side required Apple Developer Program, since the NFC capabilities are not available for free users. I used an enterprise account from the company, but the personal license has this functionality as well and costs €100 annually. For the Android side you aren’t required to get any additional licensing and it should work mostly with the same configuration as with iOS. However, you might want to create an Android only prompt, since the same iOS variant doesn’t work for Android.


NFC tag libraries

Some functionality for the chips is fairly easy to make as the library comes with many functionalities out of the box. Custom features need some work, though. You need to refer to the chipset manual to see how to write on them. For example, on my chip type you need to write code for the pagination of the chip. So you write the first page, then the page address, then your CRC and data blocks and after that the end page.

 

It’s faster than you think

All in all, this project took me about four days to complete. It was faster to make than I anticipated. Most of the work could’ve been done even faster if I knew the things I know now and that are outlined in this post. The work will go much quicker when you have done the requisite research.

 

Wrapping up

This felt like a really fun exercise on more sophisticated mobile development. I enjoyed my time trawling through libraries and figuring out how to get the demo to function. I would definitely be open to do more with NFC and feel that there is a lot of potential in implementing this functionality to projects.
 

Category
Technology

Want to know more about this topic? Please leave your contact info and we'll get back to you.

Latest blog posts