NFC Library Walkthrough
In this lesson, we will:
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.
For iOS, in your terminal:
pod we just entered stands for
cocoapad. If you're not aware of
cocoapad, it is a package manager for iOS similar to the
For Android, thanks to React Native's feature, there's no extra installation step.
You can learn more about
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
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.
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
Project view, and you should be able to find the native code included in our project:
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:
Basic: read tags with NDEF data
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:
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
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!