In this lesson, we're going to write our first NDEF message into NFC tags. The intention is to give you an idea of how the NDEF message is created and used.

We will: 1. write our first NDEF message using a third-party app 2. read it back and print the content out using our previous TagCounter app 3. write a test case to decode the NDEF message inside it

Writing NDEF using NFC tools#

The app we will use is "NFC Tools". You can easily find it in the App Store or Google Play Store.

After installing the app, launch it, press write > add a record > URL,

Let's write "https://reactnative.dev" into it.

Come back to the previous screen and press write.

Before we print it out using our own app, we try to scan this NFC tag without launching any app.

As you can see, the operating system itself automatically discovers this tag, and it also understands the content in our tag is actually a web link to "reactnative.dev".

Click it. It successfully launches the React Native website.

This little experiment tells us that our operating system understands NDEF and can even take actions depending on the content inside the NDEF.

Print out the data#

Then, go back to our previous TagCounterGame project. In the event listener of our Game component, print out the tag object.

React.useEffect(() => {

    let count = 5;

    NfcManager.setEventListener(NfcEvents.DiscoverTag, (tag) => {

      console.warn(JSON.stringify(tag)); // <--- Add this line!

      count--;

      ...

    });

    return () => {

      NfcManager.setEventListener(NfcEvents.DiscoverTag, null);

    };

  }, [start]);

As we have seen before, this tag object contains a "NdefMessage" property.

Write a test to parse the data#

Still in our TagCounterGame project, create a ndef.test.js file in the __tests__ directory.

Create a testData variable, and the value will be the data we just printed out.