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

[00:00 - 00:14] Hello, in this lesson we will dive into codes. We will show you how to, first, check NFC availability, then scan for NFC tags.

[00:15 - 00:23] Third, implement our game logic. Okay, I have launched our app in iOS simulator.

[00:24 - 00:32] So you can see the template code generated by ReNative CLI is running. Let's get rid of it.

[00:33 - 00:44] Create a src directory and a new app.js inside it. Then write some most basic JSX.

[00:45 - 01:05] Just let everything be centered on the screen and says hello NFC. Then go back to the original index.js and point the app from the original one into the new src/app.js.

[01:06 - 01:16] Then we would like to detect whether the target mobile device has NFC support or not. Let's create a has NFC state.

[01:17 - 01:33] This state has an initial value to be no, which means we are not yet confirmed whether NFC is supported or not. Once we do, this state will be a boolean value true or false.

[01:34 - 01:49] Then we adjust our UI according to this value. Next step is to actually check the NFC availability.

[01:50 - 02:13] By importing the ReNative NFC manager, we can use the is supported API and it will resolve a boolean value to indicate whether the underlying device supports NFC or not. This the availability won't change during the whole app lifecycle.

[02:14 - 02:27] We can do this inside a use effect hook with no dependency. This basically simulates the component-dit mount behavior for ReAdd class component.

[02:28 - 02:48] And please be aware, the is supported API or most of the APIs for a native module is an async function. Because our JavaScript code will need to cross the bridge and ask the corresponding native part for the result.

[02:49 - 03:01] We can see the simulator is refreshed and the result is not supported. Let's run the code on a real iOS device.

[03:02 - 03:22] As you can see, the reason iPhone from iPhone 8 all supports NFC. Once we can confirm the devices that support NFC, we can do the native module initialization by calling the NFC manager.start function.

[03:23 - 03:47] Quick review, we just use the is supported API to check the NFC availability. And if the device supports it, we then call start to initialize our NFC native module.

[03:48 - 04:04] It's time to start our actual game component. Let's quickly a src/game.js by copying the existing code and removing the unnecessary parts.

[04:05 - 04:24] Then use this game component in our app.js when NFC is available. Now we are finally ready to scan NFC tags.

[04:25 - 04:40] First import NFC manager and NFC events from real native NFC manager. Then use set event listener to listen to nsc events.discover tag event.

[04:41 - 04:51] For now, we just log the message to the console. A small trick here is to use console.worn for logging rather than console.log.

[04:52 - 05:03] So we can see the yellow screen UI pop up without enabling debugger. The actual tag scanning is through the registered tag event API.

[05:04 - 05:19] Once it discovers any NFC tags, the native side will emit discover tag event with the tag data to JavaScript side. Okay, let's test it on a real device.

[05:20 - 05:33] Please remember, the NFC container for an iPhone is on the top of the device. So the proper position to scan a tag is probably like this picture.

[05:34 - 05:49] Now let's scan a tag. Cool, that's indeed something happened.

[05:50 - 06:00] We can see once we hit our start button, the iOS and the C prompt pop up. And the icon changed when the tag is scanned.

[06:01 - 06:12] Let's see what's in our warning message there. It's an object which contains a n-depth message property which is an array.

[06:13 - 06:26] The object in this array contains properties such as payload, type, tnf and id. Don't worry about them, we will dip dive into these properties in our next app.

[06:27 - 06:46] Next, let's move the event listener setup and clean up code into an use effect hook. It's about time to write our game logic.

[06:47 - 06:59] The objective of our game is to calculate how much time player needs to scan five NFC tags. The shorter times means a better score.

[07:00 - 07:16] First, create a start state to track whether a player hits start button. And our use effect hook should depend on this start state.

[07:17 - 07:28] And rerun the hook logic when it is changed. Because in such a case, it basically means the user restart the game.

[07:29 - 07:44] Then we use a variable called count inside the closure of our hook to track the remaining count left for a player to scan. Once the count becomes zero, the game is finished.

[07:45 - 08:04] And we should stop the NFC scanning by calling nsc-manager.unregistered tag event. As well as calculate the total elapsed time.

[08:05 - 08:20] And of course, we will have to also render the duration into react elements. Before testing it on a real device, we noticed one thing.

[08:21 - 08:33] That is, during the game playing, the user cannot see any UI updates. Because the iOS default scan UI is on top of our game component.

[08:34 - 08:59] In order to provide user some messages during the game playing, we can use nsc- manager.set-alert-message-is to update iOS NFC scan prompt. Okay, let's do a final test on the real device again.

[09:00 - 09:12] Cool, all works pretty well. By the way, personal best record is about 5 seconds.

[09:13 - 09:26] See if you can beat me. In review, registered tag event is used to start the detection process of our NFC tags.

[09:27 - 09:38] The unregistered tag event is the method to cancel it. Our callback function is passed through the setEventListener function.

[09:39 - 09:52] The event we are looking for is the undiscovered tag event. We can also use setLearnMessage.is to show some visual cue for our users.

[09:53 - 09:57] That's it for the iOS part. In the next lesson, we will move on to Android.