Deep Links in React Native v0.22 [Part 1 — Android]
Because every other tutorial only talks about LinkingIOS…
This is part one of two, for implementing deep links on React Native. We’ll cover Android’s intricacies today and go over iOS in the next part, which should be up in the next week or so.
Getting Started
When I started implemented deep links on our team’s first React Native application, I thought it was going to be much more trivial than it ended up being. If you try looking around for some tutorials, you might notice that almost all of the content focuses exclusively on using the deprecated LinkingIOS module. You’ll also see some examples of the deprecated IntentAndroid scattered on the web as well.
Since we want to keep our code base simple, we’ll use the new cross-platform Linking module introduced in React Native v0.20. Unfortunately, there aren’t very many good resources on it besides what’s on the React Native documentation page.
So I put this together, to document the the series of steps it took to get deep links working and the things I encountered along the way. Buckle your seat belts!
Understanding How Android Handles Deep Links
If you’ve done any Android development in the past, you’ll remember the deep links had a custom protocol and looked something along the lines of myapp://does-something-cool/?id=5. That’s deep link format the React Native UIExplorer example touts in their AndroidManifest.xml, but has no documentation on how to use it.
You would think that it’s as simple as pointing a link on a webpage to the custom protocol we defined above, but you’ll be disappointed if you try the following:
<a href="myapp://does-something-cool/?id=5">Go to my awesome app</a>It is very important to make sure that when you try to open a deep link URL, that the URL is properly formatted for the device and browser. If you don’t use the appropriate deep link URL for the browser/platform, you’ll be redirected to a “Page Not Found”.
Google Codelabs Example to the Rescue
Not sure how I quite stumbled here, but the Enable Deep Linking to your App tutorial did an amazing job explaining how to setup and test your deep links. If you’re lost on the whole Android deep links thing, like I was, I highly recommend you read through the tutorial. After going through the guide, I modeled my schema to look like their examples and was well on my way to testing it.
Building It Out
After some digging, research, and hair pulling, my AndroidManifest.xml along with the app code ended up looking like the following:
When we go to http://app.petar.tech/user, since we registered our intent with the http scheme, Android will ask if if we want to open that link in the app (through the “Complete action using” dialog). You can select your app and tap “Always” to always open further deep links in the app.
Once the AndroidManifest.xml was setup, integrating the Linking code into our App.js code was as straightforward as copying the example code from the React Native docs and adding a few extra lines to parse the URL query params.
Testing the Deep Links on the Emulator
Once you have the code from above integrated, testing it is a breeze.
First we’ll test it on the emulator using the adb shell. Start the app in the emulator, then from the command line run the following:
adb shell am start -W -a android.intent.action.VIEW -d ‘http://app.petar.tech/user/?userId=123' com.pbojinov.myappIf the stars align, we should see our app open and do something. In this case it will print the deep link URL in console. Unfortunately you can’t have Chrome Dev Tools console open when the app is closed, so run the following adb command in a new terminal tab so you can see the output of the app handling the deep link in componentDidMount.
adb logcat *:S ReactNative:V ReactNativeJS:VTesting the Deep Links on a Device
You can hack together a very simple HTML page with the link we used from the latter abd command and throw it up online. You can use put it wherever you prefer to host your static files. I threw mine on an S3 bucket that I’d configured previously. Then to save some time typing the URL on your device, you can make a bit.ly short link.
Clicking on the link above will open your app since it is configured to be listening to that URL.
Conclusion
Whew, we made it this far…high five ✋.
We implemented deep links on Android using the new cross-platform Linking module and tested it on our emulator and physical device. But we’re only halfway on our journey, iOS is waiting for us.
Going Forward…More Research!
I’m really looking forward to using Universal Links. Their selling point is making deep links as simple as adding a few <meta> tags to the <head> of your HTML page. Unfortunately support for React Native through the npm module, react-native-applinks, isn’t available for the cross platform Linking module at the moment. There’s an issue open for it that you can follow.
I’ve also heard a lot of good things about Branch Metrics. They also have their own React Native npm module on GitHub, branch-react-native-sdk.
This was my first pass at implementing deep links on Android using React Native, so take everything with a grain of salt. If you have prior experience with this, I’d love to hear from you. Please call out anything that catches your eye!
And as always, if you enjoyed reading this or learned something new, please favorite and share with your friends. You can also find chriping on Twitter at https://twitter.com/pbojinov.
