Learn how to build mobile apps to interact with NFC tags

Course Overview

What is NFC? An Introduction to NFC Tags, Cards, and Readers

Introduction

Tag Counter Game App

Set up a React Native NFC iOS and Android App

An Introduction to the React Native NFC Module Library

How to Build an iOS NFC Tag Scanner App With React Native

How to Build an Android NFC Tag Scanner App With React Native

App1 Conclusion

Tag-Counter Game App

Tap-And-Go App

How to Code an NDEF Message With the NFC Tools App

A Deep Dive Into NDEF and NdefRecord to Share Data via NFC

Tap-And-Go Project Setup With React Native and NFC Manager

How to Read NFC Tags and Write NDEF Data With NfcManager

How to Build a Website NFC Tag And Use Deep Linking With NFC

App2 Conclusion

Tap-And-Go  App

NFC Pokemon App

The User Flow of an NFC Tag Reader and Writer App

Intro to Type 2 NFC Tags: Read and Write NFC Tags With React

How to Sign and Verify NFC Data With React Native and elliptic

How to Add Memory Protection to NFC Tags For Copy Protection

App3 Conclusion

NfcPokemon  App

react

react-native

react-native-elements

react-native-nfc-manager

react-native-paper

## What we will cover in this course

First, I will provide an overview of NFC technology, so you can understand basic concepts and terms. After that, we will build three apps throughout this course.

### App 1: Tag Counter

![image](https://user-images.githubusercontent.com/10307875/148626752-38646752-bb16-4db2-8324-9fc19efdef04.png)

App 1 is a game app to count how much time a user needs to scan five NFC tags. You will learn:
- how to properly set up an NFC project 
- how to trigger NFC scanning
- the difference from iOS and Android regarding NFC feature

### App 2: Tap-and-Go

![image](https://user-images.githubusercontent.com/10307875/148627270-2dc43df8-8d5c-479d-8dd6-041b236d7009.png)

App 2 is about NFC Data Exchange Format (NDEF), which is the standard NFC data format supported by both iOS and Android. NDEF can be used for almost any NFC tag. We will build an NDEF reader-writer app, and you will learn:
- how to write specific NDEF URI into NFC tags 
- how to read NDEF URI and trigger corresponding actions, for example, opening an URL, making a phone call, or sending a message. 
- how to use deep linking with NFC tags.

### App 3: NFC Pokemon

![image](https://user-images.githubusercontent.com/10307875/148627203-562e742d-973e-406c-8e9e-a871ccdaf6d9.png)

App 3 dives into low-level NFC programming, which directly manipulates the NFC tag’s internal memory and uses proprietary NFC commands. 
The app we'll build is called "NFC Pokemon," which is a digital identity management platform. It can seal a specific Pokemon, for example, a Pikachu, into an NFC tag. 

When building this app, you will learn:
- how to use low-leve tag command to directly manipulate NFC tag's internal memory
- how to create digital signatures in React Native
- how to use proprietary password protection command for NXP NTAG 213 / 215

NFC technology is everywhere in our daily life, from transportation, access control, to payment system. However, understanding NFC is still a hard topic because of its wide technology landspace. 

So in this course, We will guide you from the simplest case like using common NDEF format, all the way to a complex digital identity management app which leverages some unique NFC features.

The newline Guide to NFCs with React Native

How to integrate NFC feature into your React Native app

How to handle the differences between Android and iOS regarding NFC feature

Understand NDEF and use it across iOS and Android

Understand low-level NFC programming and communicate with NFC tags directly

How to use asymmetric cryptography library with React Native

How to use password protection commands from NTAG 21x NFC tags

We have almost finished our final app, so it's a good time to review what we have learned so far.

First, we learned there are two ways to create a React Native skeleton project. We also learned how to choose between them by understanding whether your project depends on a third-party library with native code.

Then, we learned how to configure a React Native project with NFC.

 capability in both the Apple developer website as well as in our XCode project. Remember to add the privacy string into 

After configuring our NFC project, we install 

We walked you through how to identify the native part in platform IDEs 

. We also did a quick review of the NFC technology stack.

---
title: App1 Conclusion 
isPublicLesson: true
privateVideoUrl: https://fullstack.wistia.com/medias/mnw1zptkl8
useMdx: true
---

We have almost finished our final app, so it's a good time to review what we have learned so far.

## Recap

First, we learned there are two ways to create a React Native skeleton project. We also learned how to choose between them by understanding whether your project depends on a third-party library with native code.

Then, we learned how to configure a React Native project with NFC.

For Android, we simply add `uses-permission` into our `AndroidManifest.XML`, and it's done.

For iOS, we add `NFC Tag Reading` capability in both the Apple developer website as well as in our XCode project. Remember to add the privacy string into `Info.plist` as well.

Richie 

Hello, we have almost finished our final app.

It's a good time to review what we have learned so far.

First, we learned there are two ways to create Reinative Skeleton Project.

We also mentioned how to choose between them.

Basically, you will need to understand whether your project depends on third

Then, we learned how to configure a Reinative Project with NFC.

For Android, we simply add users permission into AndroidManifest.xml and it's

For iOS, we will have to add NFC tag reading capabilities in both Apple

Remember to add the privacy string into info.plist as well.

After configuring our NFC project, we install Reinative NFC Manager.

We walk you through how to identify the native part in platform IDE,

SQL and Android Studio. We also do a quick review of NFC Technologies stack.

Then, we used API provided from Reinative NFC Manager to implement our tech

Those APIs are, is supported, is enabled.

Start, set EventListener, register tag event,

Please remember that most of these APIs are async functions.

After the iOS app, we mentioned that Android provides no system scan UI,

During this process, there are several fun parts.

First, how to use React ref to construct imperative API

and how to use animated front-run native.

Awesome! Before we wrap it up, let's do some final styling

That's the fun part, and I hope you enjoy it as much as I do.

In the next module, we will explore n-depth,

which is the most widely used data structure for NFC tags.