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

In this lesson, we will show you how to use NFC tags to trigger deep linking.

Before we dive into the implementation, let's first briefly talk about what exactly deep linking is.

According to Wikipedia, the definition for mobile deep linking is:

Using a uniform resource identifier (URI) that links to a specific location within a mobile app rather than simply launching the app.

 should open the Facebook app and jump to a screen about the user profile with this specific id.

This example URI can be divided into two parts, the 

 is used to define which app should be launched, which we also call a 

 in this course. The latter part of the URI can be considered as parameters for the launched app.

You might wonder how this deep linking stuff relates to NFC.

When a mobile device discovers NFC tags without your app running in the foreground, it will still parse the NDEF and try to launch an app based on the content in the first NdefRecord.

So, if we save a custom deep linking URI in our NFC tags and register our app with this custom URI, we can launch our app and carry data into it by scanning the NFC tags directly.

For example, if you're working on a restaurant app, you can use an NFC tag to trigger actions such as order, checkout, or edit feedback form, etc. You users don't need to open the app and click any button; they can simply scan the NFC tags.

In our lesson here, our deep linking URI will use the bundle id as our 

 and carry a message text as a parameter.

Now you should be able to modify your code to write this URI into NFC tags, but to save you some time, let's again use NFC Tools to write our deep linking URI into NFC tags.

 page on React Native's website. There is a section called 

, which mentions you need to add some code into your 

 delegation method from the website and paste it into your code. Please make sure you add this line below the 

#import <React/RCTLinkingManager.h>

...

- (BOOL)application:(UIApplication *)application
   openURL:(NSURL *)url
   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

In XCode, we still need to register our custom URL scheme for this project. First, copy our bundle id, and navigate to 

---
title: How to Build a Website NFC Tag And Use Deep Linking With NFC
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/1mhhemn8b7
---

In this lesson, we will show you how to use NFC tags to trigger deep linking.

-   How to set up iOS for deep linking
-   How to handle the deep linking event in React Native
-   How to set up Android for deep linking

Before we dive into the implementation, let's first briefly talk about what exactly deep linking is.

According to Wikipedia, the definition for mobile deep linking is:

> Using a uniform resource identifier (URI) that links to a specific location within a mobile app rather than simply launching the app.

For example, the URI here: `fb://profile/33138223345` should open the Facebook app and jump to a screen about the user profile with this specific id.

This example URI can be divided into two parts, the `fb://` and everything else.
The `fb://` is used to define which app should be launched, which we also call a `custom scheme` in this course. The latter part of the URI can be considered as parameters for the launched app.

You might wonder how this deep linking stuff relates to NFC.

When a mobile device discovers NFC tags without your app running in the foreground, it will still parse the NDEF and try to launch an app based on the content in the first NdefRecord.

So, if we save a custom deep linking URI in our NFC tags and register our app with this custom URI, we can launch our app and carry data into it by scanning the NFC tags directly.

For example, if you're working on a restaurant app, you can use an NFC tag to trigger actions such as order, checkout, or edit feedback form, etc. You users don't need to open the app and click any button; they can simply scan the NFC tags.

In our lesson here, our deep linking URI will use the bundle id as our `custom scheme` and carry a message text as a parameter.

It looks like this: `<your.bundle.id>://<message>`. For me, that will be: `com.richiehsieh.tapandgo`.

Now you should be able to modify your code to write this URI into NFC tags, but to save you some time, let's again use NFC Tools to write our deep linking URI into NFC tags.

## iOS setup

Let's go to the `Linking` page on React Native's website. There is a section called `enabling deep links`, which mentions you need to add some code into your `AppDelegate.m`. Let's do it now.

In your XCode, find `AppDelegate.m`. First, add the `import` statement to import the `RCTLinkingManager.h`, then copy the `openURL` delegation method from the website and paste it into your code. Please make sure you add this line below the `@implementation AppDelegate` line.

(AppDelegate.m)

```objective-c
#import <React/RCTLinkingManager.h>

...

- (BOOL)application:(UIApplication *)application
   openURL:(NSURL *)url
   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}
```

In XCode, we still need to register our custom URL scheme for this project. First, copy our bundle id, and navigate to `Info.plist`.

There is a section called `URL Types` at the bottom. Click `add`, and paste our bundle id into `identifier` and `URL Schemes`:

![image](https://user-images.githubusercontent.com/10307875/148337486-a70cf594-9424-4445-9faa-dc5ded16cd3a.png)

That's it!

## Handling deep linking events in JavaScript

After the setup, the native side can receive the linking event from iOS, but our JavaScript site doesn't do anything yet. Let's do it now.

First, import `Linking` from React Native. Then, create a new `useEffect` hook without any dependencies. In the hook, we define a function called `handleUrl` that will be called when we receive a deep link. For now, we simply do `console.warn`. Then, we call `Linking.getInitialURL`. This API returns a promise, which resolves to an initial URL launching our app. It might be null if our app is launched by the user clicking the app icon directly.

Next, we call `Linking.addEventListener`. This API is used to handle the URL event when our app is ALREADY launched, so it's different from the previous `getInitialURL` API.

Finally, return a cleanup function to remove all the listeners.

It's time to test it.

Let's create a dedicated screen to display the message from a deep link. This screen will receive routing params called `msg`, and we simply show the `msg` in the center of the screen.

Then, hook up this `DeepLinkingScreen` in the `AppNavigator` like before.

The last step is, of course, to actually navigate to `DeepLinkingScreen` when we receive a deep link. Go back to our `HomeScreen`, and in the `handleUrl` function, call `navigation.navigate`, parse the `msg` from the deep link, and pass it as a second parameter.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

The newline Guide to NFCs with React Native

Module 1: Introduction

Introduction:

Start Here

Lesson 1: (5:40)

Course Overview

Lesson 2: (10:37)

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

Module 2: Tag-Counter Game App

Lesson 1: (1:41)

Tag Counter Game App

Lesson 2: (11:10)

Set up a React Native NFC iOS and Android App

Lesson 3: (7:42)

An Introduction to the React Native NFC Module Library

Lesson 4: (10:03)

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

Lesson 5: (16:36)

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

Lesson 6: (3:14)

App1 Conclusion

Module 3: Tap-And-Go App

Lesson 1: (1:40)

Tap-And-Go App

Lesson 2: (7:10)

How to Code an NDEF Message With the NFC Tools App

Lesson 3: (9:30)

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

Lesson 4: (11:46)

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

Lesson 5: (18:19)

How to Read NFC Tags and Write NDEF Data With NfcManager

Lesson 6: (12:28)

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

Lesson 7: (3:57)

App2 Conclusion

Module 4: NfcPokemon App

Lesson 1: (2:12)

NFC Pokemon App

Lesson 2: (6:51)

The User Flow of an NFC Tag Reader and Writer App

Lesson 3: (17:20)

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

Lesson 4: (17:29)

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

Lesson 5: (14:48)

How to Add Memory Protection to NFC Tags For Copy Protection

Lesson 6: (4:30)

App3 Conclusion

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