In this lesson, we will:

  • Install react-native-nfc-manager

  • Do a quick walk-through for our NFC library

Install NFC library#

Go to your skeleton project:

(You should be in v3)

And that will be the only library we depend on for this first app.

Besides JavaScript installation, we also need to do native library installation.

For iOS, in your terminal:

The pod we just entered stands for cocoapad. If you're not aware of cocoapad, it is a package manager for iOS similar to the npm for JavaScript.

For Android, thanks to React Native's feature, there's no extra installation step.

You can learn more about autolink here.

Since a react-native app is also a native app, before we shift our focus back to JavaScript, I want to take this opportunity to show you where you can find the native code in the platform IDE.

For iOS, the IDE is XCode. To open our project in XCode, you should identify the xcworkspace and open it. You can open it by double-clicking the xcworkspace file in finder or open ios/xxx.xcworkspace.

A common mistake here is to accidentally open xcodeproj rather than xcworkspace, so please be careful.

Once XCode is opened, in left panel, navigate to Pods > Development Pods > react-native-nfc-manager.

find-lib-xcode

You can see the native code is indeed included in our project.

For Android, launch Android Studio. In the opening screen, choose Open an existing Android Studio Project, and choose your android directory to open:

Again, also in the left panel, make sure you select project, with either android or Project view, and you should be able to find the native code included in our project:

find-lib-android

Cool, we just confirmed that our native code is included in our project.

You might wonder, do I really need to use these platform IDEs, XCode and Android Studio? The answer is definitely yes, someday. When you work with projects that depend on native-related libraries, you will need to perform some troubleshooting tasks from time to time, and in such cases, platform IDEs will help you a lot.

That's why I'd like to take this opportunity to show you where you can find the native code in platform IDEs. Even if you aren't super familiar with them, the bottom line is: don't be afraid; they are just tools!

Quick library walkthrough#

After touring the platform IDEs, let's do a quick walkthrough of our NFC library.

Go to the NFC Manager GitHub page. In the readme, we can see this library has two use cases:

  1. Basic: read tags with NDEF data

  2. Advanced: use specific NFC technology handler to do technology-specific tasks

Let's also do some quick recap of our NFC knowledge mentioned so far:

Please see this NFC spec overview diagram:

nfc-spec-overview

First, NDEF is the universal data format for NFC tags. Both Android and iOS platforms have good support for it.

Second, as you can see, NFC actually has a pretty wide technology landscape. For mobile apps, which deal with NFC tags, we need to understand this block: Type 2 ~ 5 Tag. A tag type is a specific technology that can be mapped to its own handler in our library. Although the handler name might not be the same as "type-2" handler, it will exist.

And in order to deal with these specific NFC technologies or different tag types, some level of domain knowledge is required.

We will explore the most well-known NFC technology, type-2 tag, or some people might call it NfcA tag, in more detail later in this course.

Let's take a look at what API is provided by the NfcA tech handler. As you can see, we primarily have a transcieve function, and this function accepts raw bytes data as input and as output. This means we have to construct the raw payload in order to use it. That's why we will need to understand these technology-specific protocols, at least to some degree.

By the way, NDEF itself is also considered an NFC technology, so it has its own handler, which provides operations such as writeNdef, makeReadOnly, and so on.

Okay, let's back to our first app. Since the first app we're building for this module only scans for tag existence, we only need to use the basic set of APIs. The NDEF part will be discussed in the second app, and the technology-specific handlers will be discussed in the third app in this course.

Now you have a basic understanding of what's included in our NFC library, let's move on to write some code!

Start a new discussion. All notification go to the author.