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 focus on the Android side. We will see the difference between Android and iOS and discuss how to provide a similar experience for our NFC game app. 

Let's first run our previous work on a real Android device.

 button several times, but it looks like there's nothing happened. 

What's wrong here? Actually, it's nothing wrong. It's because Android provides no built-in NFC scanning UI, so even though our app is ready to scan NFC tags, there's no visual cue for our users.

So, our first step in this lesson is to build a component to mimic the behavior for iOS NFC scanning UI.

. This component will use React Native's built-in 

 component to present content above the enclosing view.

 component and provide some basic styling for our inner 

Let's move on to style our content inside the 

Then, the next step is to apply our styles to our components.

Oops, it looks like there is something wrong with the backdrop. That's because we haven't applied the 

 part into it. To write this kind of "cover-all" style, here's a little trick: we can use the 

import React from 'react';
import {
  View,
  Text,
  Modal,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
} from 'react-native';

function AndroidPrompt(props) {
  return (
    <Modal visible={true} transparent={true}>
      <View style={styles.content}>
        <View style={[styles.backdrop, StyleSheet.absoluteFill]} />

        <View style={styles.prompt}>
          <Text style={styles.hint}>Hello NFC</Text>

          <TouchableOpacity style={styles.btn}>
            <Text>CANCEL</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  content: {
    flex: 1,
  },
  backdrop: {
    backgroundColor: 'rgba(0,0,0,0.3)',
  },
  prompt: {
    position: 'absolute',
    bottom: 0,
    left: 20,
    width: Dimensions.get('window').width - 2 * 20,
    backgroundColor: 'white',
    borderRadius: 8,
    paddingVertical: 60,
    paddingHorizontal: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
  hint: {
    fontSize: 24,
    marginBottom: 20,
  },
  btn: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    padding: 15,
  },
});

export default AndroidPrompt;

The next step is to design the interface between our 

 passing as the primary interface between components. That's because of React's declarative nature. However, in our case, providing an imperative API set will be much easier.

The API we want to expose is something like React Native's built-in 

, and it will appear. From the caller's perspective, we don't need to preserve a state like 

. We'd like to do something similar for our 

In order to accomplish this, we will use 

. Once a function component is wrapped with 

, it will receive a second argument, which is the 

. Since those states are within the current component, we need to provide a method to let the parent component access them.

 hook to accomplish this inside the hook. If we have a 

 object and put our state mutation functions inside the 

 object. So our parent component can use 

And of course, we should pass our internal 

Now, it's time to test them. Head back to our 

Then, quickly create a test button. From the test button's 

As you can see, we can now toggle on our 

 component from the parent and toggle it off by pressing its own cancel button, without tracking the 

---
title: How to Build an Android NFC Tag Scanner App With React Native
isPublicLesson: true
privateVideoUrl: https://fullstack.wistia.com/medias/osyz2zc0g9
useMdx: true
---

In this lesson, we will focus on the Android side. We will see the difference between Android and iOS and discuss how to provide a similar experience for our NFC game app. 

## The difference between iOS and Android

Let's first run our previous work on a real Android device.

As you can see, I have pressed the `START` button several times, but it looks like there's nothing happened. 

What's wrong here? Actually, it's nothing wrong. It's because Android provides no built-in NFC scanning UI, so even though our app is ready to scan NFC tags, there's no visual cue for our users.

So, our first step in this lesson is to build a component to mimic the behavior for iOS NFC scanning UI.

## Implement the AndroidPrompt component

Let's call it `AndroidPrompt`. This component will use React Native's built-in `Modal` component to present content above the enclosing view.

Inside the `Modal`, we place a `View` and a `Text` with the string `Hello NFC`.

Then we set both `transparent` and `visible` props to be true for the `Modal` component and provide some basic styling for our inner `View`.

After the basic setup, let's add our `AndroidPrompt` component into our `App.js`. 

Okay, now our `AndroidPrompt` shows up on the screen.

Let's move on to style our content inside the `Modal`. 

The building blocks are: 

-   a full `View` component with `flex: 1` as its container
-   a backdrop inside the container.
-   the actual prompt UI is rendered above the backdrop, and there are two components inside it, one hint text and one cancel button, just like on iOS.

Then, the next step is to apply our styles to our components.

Oops, it looks like there is something wrong with the backdrop. That's because we haven't applied the `position: absolute` part into it. To write this kind of "cover-all" style, here's a little trick: we can use the `StyleSheet.absoluteFill`. It's very convenient in such a case.

For now, the codes look like this:

```javascript
import React from 'react';
import {
  View,
  Text,
  Modal,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
} from 'react-native';

function AndroidPrompt(props) {
  return (
    <Modal visible={true} transparent={true}>
      <View style={styles.content}>
        <View style={[styles.backdrop, StyleSheet.absoluteFill]} />

        <View style={styles.prompt}>
          <Text style={styles.hint}>Hello NFC</Text>

          <TouchableOpacity style={styles.btn}>
            <Text>CANCEL</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  content: {
    flex: 1,
  },
  backdrop: {
    backgroundColor: 'rgba(0,0,0,0.3)',
  },
  prompt: {
    position: 'absolute',
    bottom: 0,
    left: 20,
    width: Dimensions.get('window').width - 2 * 20,
    backgroundColor: 'white',
    borderRadius: 8,
    paddingVertical: 60,
    paddingHorizontal: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
  hint: {
    fontSize: 24,
    marginBottom: 20,
  },
  btn: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    padding: 15,
  },
});

export default AndroidPrompt;
```

## Design the component interface

The next step is to design the interface between our `AndroidPrompt` and its parent.

Normally in React, we use `props` passing as the primary interface between components. That's because of React's declarative nature. However, in our case, providing an imperative API set will be much easier.

The API we want to expose is something like React Native's built-in `Alert` module. For `Alert`, we simply call `Alert.alert`, and it will appear. From the caller's perspective, we don't need to preserve a state like `isAlertVisible` and pass it as props into `Alert`. We'd like to do something similar for our `AndroidPrompt` component here.  

In order to accomplish this, we will use `ref`.

First, wrap the original `AndroidPrompt` component with `React.forwardRef`. Once a function component is wrapped with `forwardRef`, it will receive a second argument, which is the `ref` object passing from its parent. 

Then, we create our internal state, `visible`, and `hintText`. Since those states are within the current component, we need to provide a method to let the parent component access them.

We can use a `useEffect` hook to accomplish this inside the hook. If we have a `ref` object passed in, we can set the `current` property of the `ref` object and put our state mutation functions inside the `current` object. So our parent component can use `setVisible` and `setHintText`. 

And of course, we should pass our internal `visible` state into the `Modal` component and display our internal `hintText` state. We also need to toggle the `visible` state back to `false` and clear the `hintText` when the `cancel` button is pressed.

Now, it's time to test them. Head back to our `App.js`. We first call `useRef` hook to obtain a `ref` object and pass it into the `AndroidPrompt` component.

Then, quickly create a test button. From the test button's `onPress` handler, we can simply call `current.setVisible(true)`. 

As you can see, we can now toggle on our `AndroidPrompt` component from the parent and toggle it off by pressing its own cancel button, without tracking the `visible` state from the parent component.

The current code looks like this:

```javascript
// omit imports

function AndroidPrompt(props, ref) { // notice the second argument
  const {hintText} = props;
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => { 
    if (ref) {
      ref.current = { // allow clients code to call internal .setVisible()
        setVisible,
      };
    }
  }, [ref]);

  return (
    <Modal visible={visible} transparent={true}>
      <View style={styles.content}>
        <View style={[styles.backdrop, StyleSheet.absoluteFill]} />

        <View style={styles.prompt}>
          <Text style={styles.hint}>{hintText || 'Please Scan NFC'}</Text>

          <TouchableOpacity
            style={styles.btn}
            onPress={() => setVisible(false)}>
            <Text>CANCEL</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  );
}

// omit the styling codes

export default React.forwardRef(AndroidPrompt); // wrap component with forwardRef
```

## Animating the AndroidPrompt component

Now, it's the fun part. We'd like to add some animation into our `AndroidPrompt` component. 

Import the `Animated` module from `react-native`. We also need an `Animated.Value`, initially set to 0.

Then, we create a `_visible` state. I will explain this in just a second. For now, just consider that we will use this `_visible` state instead of the previous `visible` state.

Can I get the access to the git repo for the code

saksham-ucr

 Also I am encountering the error "Value for opacity cannot be cast from ReadableNativeMap to Double", whihc means that somehow animValue is being considered a map?

Hi, I copied all the code and I could not get the modal to appear when I first the first app opens.I have to change some code to cause a react-native re-render and then the modal works.Any idea what's going on?

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 an Android NFC Tag Scanner App With React Native