An Introduction to the React Native NFC Module Library

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the The newline Guide to NFCs with React Native course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to The newline Guide to NFCs with React Native, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course The newline Guide to NFCs with React Native

Hello, in this lesson we will install Reactive NFC Manager and then we'll do a quick walkthrough for our NFC library. First, go to your skeleton project, then install Reactive NFC Manager. 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, go to iOS directory, then do pod install. The pod we just entered stands for CocoaPod. For people not aware of CocoaPod, it's a package manager for iOS. Also like the MPN for JavaScript. For Android, thanks to the Reactive AutoLink feature, there's no extra installation step you need to do. You can learn more about AutoLink in this URL. Since a Reactive 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 platform IDE. For iOS, the IDE is Xcode. To open our project in Scode, you should identify the XC workspace and open it. You can open it by double-click the XC workspace file in Finder or open iOS/ yourpodgenem.exe workspace. Please be aware, a common mistake here is to accidentally open Xcode project rather than XC workspace. So please be careful. Once Xcode is opened in left panel, navigate to POTS, Development POTS, Re native NFC Manager. You can see the native codes are indeed included in our project. For Android, launch Android Studio. In the opening screen, choose Open and 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 parts being included in our project. Cool, we just confirmed that our native codes are included in our project. You may wonder, do I really need to use this platform IDE's? The answer is definitely yes, some day. Because when you work with projects that depend on native related libraries from time to time, you will need to perform some troubleshooting tasks and when encountering such a case, platform IDE will help you a lot. That's why I'd like to take this opportunity to show you where you can find the native codes in platform IDE. Even though you might not be super familiar with them, but the button line is, don't be afraid, those are just tools. After the Turing of platform IDE, let's do a quick walkthrough of our NFC library. Move to GitHub page, in the README we can see this library has two use cases. The first, the basic use case is to read tags with n-dev data. The second is the advanced use case, which allowed us to use specific NFC technology handler to do technology specific tasks. Let's also do some quick recap of our NFC knowledge mentioned so far. Let's again see the NFC spec overview diagram. First, n-dev is the universal data format for NFC tags. Both Android and iOS platform have good support for it. Second, as you can see, NFC actually has a pretty wild technology landscape. But for mobile apps, which are focused on dealing with NFC tags, what we need to understand is the type 2 to type 5 tag. We can consider a tag type to be a specific technology, which can be mapped to its own handler in our library. Although the library name might not be the same as type 2 handler, it does exist. And in order to deal with those specific NFC technologies or different tag types, some level of domain knowledge is required. We will explore the most well-known NFC technology that's the type 2 tag. Or some people might call it "nca tag" in more detail later in this course. Let's also take a look at what API is provided by the nca tag handler. As you can see, we primarily have a transcef function. And this function accepts ROW-BITE's data as input. Also ROW-BITE's data as output. This basically means we have to construct the ROW payload in order to use it. That's why we will need to understand these technology-specific protocols, at least to some degree. Oh, by the way, n-deaf itself is also considered as an NFC technology. So it has its own handler, which provides operations such as write and def make read-only and so on. Okay, let's back to our first app. Since the first app we are building for this module, only scans for tag existence. So we only need to use the basic set of API. The n-deaf 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 included in our NFC library. Let's move on to write some codes. [BLANK_AUDIO]