Linking in React Native

In this tutorial, we'll learn how to open links when a user clicks an element. Links can open in the default browser. We'll use the Linking API in React Native to handle all kinds of links.

Import Linking

First, we need to import the Linking module from the react-native package:

import { TouchableOpacity, Linking } from 'react-native';

Web Links

URL Schema: https:// or http://

Example: https://withfra.me

Using the Linking API, we’ll use the openURL() method to open the link. We’ll pass the link as a string to the method. If the link is prefixed with https:// or http:// URL schema, openURL() will open the default browser.

<TouchableOpacity onPress={() => Linking.openURL('https://withfra.me')}>
  <Text>WithFrame</Text>
</TouchableOpacity>

Mail Links

URL Schema: mailto:

Example: mailto:[email protected]

Similar to web links, you can also pass links with mailto: URL schema to open the default mail app.

<TouchableOpacity onPress={() => Linking.openURL('mailto:[email protected]')}>
  <Text>Email us at [email protected]</Text>
</TouchableOpacity>

SMS Links

URL Schema: sms:

Example: sms:1-800-123-4567 or sms:18001234567

The sms: prefix is used to launch the Messages app. The URL string should only include the phone number and must not include any message text or other information.

<TouchableOpacity onPress={() => Linking.openURL('sms:1-800-123-4567')}>
  <Text>Text us at 1-800-123-45-67</Text>
</TouchableOpacity>

Phone Links

URL Schema: tel:

Example: tel:1-800-123-4567 or tel:18001234567

Use tel: URL schema to open the phone number in the Phone app and dial someone.

<TouchableOpacity onPress={() => Linking.openURL('tel:+18001234567')}>
  <Text>Call us at 1-800-123-45-67</Text>
</TouchableOpacity>

Facetime Links (iOS only)

URL Schema: facetime: or facetime-audio:

Example: facetime:18001234567 or facetime:[email protected]

Use facetime: URL schema to initiate a FaceTime call to a specified user. You can either use a phone number or email address of a user to make a call.

For FaceTime audio calls use facetime-audio: URL schema.

<TouchableOpacity onPress={() => Linking.openURL('facetime:+18001234567')}>
  <Text>Video FaceTime</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => Linking.openURL('facetime-audio:+18001234567')}>
  <Text>Audio FaceTime</Text>
</TouchableOpacity>

Customize the Link

We can also customize the link by adding styles to the Text component.

<TouchableOpacity onPress={() => Linking.openURL('https://withfra.me/privacy')}>
  <Text style={{ fontSize: 14, lineHeight: 20, color: '#929292' }}>
    By clicking "Sign in" above, you agree to our{' '}
    <Text style={{fontWeight: '600'}}>Privacy Policy</Text>.
  </Text>
</TouchableOpacity>

Validating the Link

Before opening a link, it’s a good practice to validate whether the link can be opened. We can use the canOpenURL() method to check for that.

<TouchableOpacity
  onPress={() =>
    Linking.canOpenURL('https://withfra.me/privacy').then(supported => {
      if (supported) {
        Linking.openURL('https://withfra.me/privacy');
      } else {
        console.log(
          "Don't know how to open URI: " + 'https://withfra.me/privacy',
        );
      }
    })
  }>
  <Text style={{fontSize: 14, lineHeight: 20, color: '#929292'}}>
    By clicking "Sign in" above, you agree to our{' '}
    <Text style={{fontWeight: '600'}}>Privacy Policy</Text>.
  </Text>
</TouchableOpacity>

We hope you enjoyed this content and now better understand how to use Linking in React Native.