A month of React Native: part #9

Handling links and sharing things

This post is part of a series, where I document my experiences learning React Native while building my first-ever mobile app. This is also my way of giving back to the React Native community, with tips and insights I note along the journey.

Links are the backbone of the web. But even though React Native uses the familiar JSX syntax that we’re used to from React, a few things are different. First, we swapped the <div> element with <View> and now we find out that there is no <a> element. In this post, we’ll find out how to add links to our app in React Native. As a bonus, we’ll also touch on how we can add a “share” action. It’s pretty easy and this will be a short post.

Photo by NordWood Themes on Unsplash

Handling web links in the app

The simplest case is to handle web links (i.e. http:// or https://) links in our app. For example, we would like to include a link to a restaurant’s website within the details view for that restaurant. There are two ways of doing that in React Native.

One option is to use the Linking module from React Native. Here’s is the most basic example:

When the user taps on the “Go to website” text, the operating system will open the default browser on the device and attempt to display the URL, as we can see in the screenshot below.

Using Linking.openUrl, the system opens a separate browser

While this is a working solution, we can give the user a better experience. Instead of leaving the app, we can have the browser appear as a modal within the app. To do this, we’ll need to use Expo’s WebBrowser module, as shown below:

If you notice, the only change is in the handleOpenUrl function. When we tap the link, the result looks something like this on iOS:

A much nicer modal web browser within our app

Handling non-web links

We’ve figured out how to handle web URLs, but what about other kinds of URLs? For example, we would like to add a link to a restaurant’s phone number, which should trigger the “call phone” functionality of the operating system. Luckily, the Linking module from earlier can handle some of the basic URL schemes, such as tel (open phone app), mailto (open mail app) and sms (open texting app). Here’s how our “phone restaurant” link would look like:

Note that the argument needs to be a valid tel URL. What you’ll notice if you try to run this on the simulator is that this isn’t supported (see below).

Sadly, the simulator can’t handle tel URLs

But if you open this on your device, everything work as expected:

Hurray! The tel URL works just fine on the device.

Sharing

Another feature that we want to have in our app is the ability to share content (e.g. a list or a specific restaurant) with our contacts. This is actually really easy to doin React Native and it works out of the box, as we see here:

You can look at the documentation for more details, but here are a couple things to point out here:

• The Share module need some platform-specific code, for which we need to use the Platform module (to identify what device we’re running on).
• On iOS, we get information on where the user shared the content (e.g. com.apple.UIKit.activity.CopyToPasteboard). We also get feedback if the user dismissed the “share” activity.

Finally, here is what the “share” activity looks on both iOS and Android:

Initial share screen

What user sees when selecting “Reminders” (i.e. the only interesting share target on the simulator).

Share action on Android (contacts blurred out).

Deep linking

One big topic we’ve left out here is what’s called “deep linking”. This is where we configure our app to handle certain links directly in our app. For example, when you tap on a Google Maps URL and you have the Google Maps app installed, the operating system knows to open the app to handle this. In our example, we could do the same: for example, a link to a list could open the app and navigate directly to that list. This is a longer topic, which I’ll cover separately in the next blog post. Stay tuned!

If you enjoyed this article, feel free to hit that clap button 👏 to help others find it.

About me

I’m Alex, a software engineer and startup geek. Currently, I’m a co-founder at a startup called AgentRisk, where I’m the VP of Product & Engineering. In a past life, I was part of the founding engineering team at an enterprise cloud storage startup in Silicon Valley, did a bunch of cool cutting-edge projects at Cisco Research, and worked on some really innovative data center network architectures while doing my Master’s at UCSD. I always enjoy learning new technologies and b̵u̵i̵l̵d̵i̵n̵g̵ shipping side-projects all the time.