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.
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:
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.
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.
- (BOOL)application:(UIApplication *)application
return [RCTLinkingManager application:application openURL:url options:options];
In XCode, we still need to register our custom URL scheme for this project. First, copy our bundle id, and navigate to
There is a section called
URL Types at the bottom. Click
add, and paste our bundle id into