This video is available to students only

Deep Linking with NFC

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)

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:

 

Start a new discussion. All notification go to the author.