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 set up our tap-and-go project skeleton, including:

If you're already familiar with the above libraries, feel free to skip this lesson.

, I suggest you watch the video and follow along.

 and do all the NFC-specific configuration as well as library installation, just like we mentioned in the previous 

 library is installed, and your skeleton project should run properly as well.

Next, install our library for navigation. The library we will use is 

The installation and configuration process is well-documented in 

. You should be able to follow along smoothly. And since we're using 

, we should follow the corresponding sections in the document.

 is a complex library, so it also depends on lots of other libraries. Here I list all the dependencies. Let's install all of them right now.

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/native @react-navigation/stack

Since most of the dependencies listed here contain native code, we need to perform a 

 website, go to the next page, and copy the 

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Come back to our app and paste all the code into it. Then, go to 

Oops, there's an error. What happened? Maybe it's because we just installed those new libraries, and our 

 packager failed to hot-reload all of them.

Let's restart the packager and try it again.

It still fails, but the error is changed. It says:

requireNativeComponent: "RNSScreen" was not found in UIManager

This issue is because we haven't reloaded our native code yet. Even though the JavaScript part has been updated, it still needs the corresponding native code to work properly.

Let's rerun the app using XCode. Remember, after you install any libraries with native code or assets, you need to restart the packager and rerun the app with your platform IDE to make sure the native code is reloaded.

---
title: Tap-And-Go Project Setup With React Native and NFC Manager
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/584xcdsys7
---

In this lesson, we will set up our tap-and-go project skeleton, including:

-   Install and set up the navigation library: `react-navigation`.
-   Install and set up the UI component library: `react-native-vector-icons` and `react-native-paper`.
-   Write our HomeScreen UI and make our first screen navigation.

If you're already familiar with the above libraries, feel free to skip this lesson.

However, if your `react-native` experience is mostly around `expo`, I suggest you watch the video and follow along.

## Set up react-navigation

First, you will need to create a new `react-native` project using `react-native-cli` and do all the NFC-specific configuration as well as library installation, just like we mentioned in the previous `TagCounterGame` app.

After all this, you should see the `react-native-nfc-manager` library is installed, and your skeleton project should run properly as well.

Next, install our library for navigation. The library we will use is `react-navigation`.

The installation and configuration process is well-documented in `reactnavigation.org/docs/getting-started`. You should be able to follow along smoothly. And since we're using `react-native-cli`, we should follow the corresponding sections in the document.

As you can see, `react-navigation` is a complex library, so it also depends on lots of other libraries. Here I list all the dependencies. Let's install all of them right now.

    npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/native @react-navigation/stack

Since most of the dependencies listed here contain native code, we need to perform a `pod install`.

Now we'd like to use `react-navigation` in our project. Create a `src/App.js` file. Then, go back to `reactnavigation.org` website, go to the next page, and copy the `hello-world` example.

(src/App.js)

```JavaScript
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;
```

Come back to our app and paste all the code into it. Then, go to `index.js` and point the `App` component from `App.js` to `src/App.js`.

Oops, there's an error. What happened? Maybe it's because we just installed those new libraries, and our `react-native` packager failed to hot-reload all of them.

Let's restart the packager and try it again.

It still fails, but the error is changed. It says:

    requireNativeComponent: "RNSScreen" was not found in UIManager

This issue is because we haven't reloaded our native code yet. Even though the JavaScript part has been updated, it still needs the corresponding native code to work properly.

Let's rerun the app using XCode. Remember, after you install any libraries with native code or assets, you need to restart the packager and rerun the app with your platform IDE to make sure the native code is reloaded.

Now it works!

## Set up icons and UI component libraries

Next, we'd like to install `react-native-paper` as our primary UI library, and this library depends on another library, `react-native-vector-icons`, which provides lots of awesome icons.

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

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