Linking into other apps

Learn how to handle and open a URL from your app based on the URL scheme of another app.

Handling linking into other apps from your app is achieved by using the target app's URL. There are two methods you can use to open such URLs from your app:

• Using the expo-linking API
• Using Expo Router's Link component

Using expo-linking API

The expo-linking API provides a universal abstraction over native linking APIs (such as window.history on the web) and offers utilities for your app to interact with other installed apps.

The example below opens a the common URL scheme in the default browser of the operating system using Linking.openURL:

import { Button, View, StyleSheet } from 'react-native';
import * as Linking from 'expo-linking';

export default function Home() {
  return (
    <View style={styles.container}>
      <Button title="Open a URL" onPress={() => Linking.openURL('https://expo.dev/')} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Using Expo Router's Link component

If your project uses Expo Router, use the Link component to open a URL. It wraps a <Text> component on native platforms and an <a> element on the web. It also uses the expo-linking API to handle URL schemes.

The example below opens a common URL scheme (HTTPS) in the default browser of the operating system:

import { Button, View, StyleSheet } from 'react-native';
import { Link } from 'expo-router';

export default function Home() {
  return (
    <View style={styles.container}>
      <Link href="https://expo.dev">Open a URL</Link>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Common URL schemes

There are built-in URL schemes that provide access to core functionality on all platforms. Here is a list of commonly-used schemes:

import { withAndroidManifest, ConfigPlugin } from 'expo/config-plugins';

const withAndroidQueries: ConfigPlugin = config => {
  return withAndroidManifest(config, config => {
    config.modResults.manifest.queries = [
      {
        intent: [
          {
            action: [{ $: { 'android:name': 'android.intent.action.SENDTO' } }],
            data: [{ $: { 'android:scheme': 'mailto' } }],
          },
          {
            action: [{ $: { 'android:name': 'android.intent.action.DIAL' } }],
          },
        ],
      },
    ];

    return config;
  });
};

module.exports = withAndroidQueries;

{
  "expo": {
    "plugins": [
      "./my-plugin.ts"
      %%placeholder-start%%... %%placeholder-end%%
    ]
  }
}

Custom URL schemes

If you know the custom scheme for the app you want to open, you can link to it using any of the methods: Using expo-linking API or Using Link from Expo Router.

Some services provide documentation on how to use their app's custom URL schemes. For example, Uber's deep linking documentation describes how to link directly to a specific pickup location and destination:

uber://?client_id=<CLIENT_ID>&action=setPickup&pickup[latitude]=37.775818&pickup[longitude]=-122.418028&pickup[nickname]=UberHQ&pickup[formatted_address]=1455%20Market%20St%2C%20San%20Francisco%2C%20CA%2094103&dropoff[latitude]=37.802374&dropoff[longitude]=-122.405818&dropoff[nickname]=Coit%20Tower&dropoff[formatted_address]=1%20Telegraph%20Hill%20Blvd%2C%20San%20Francisco%2C%20CA%2094133&product_id=a1111c8c-c720-46c3-8534-2fcdd730040d&link_text=View%20team%20roster&partner_deeplink=partner%3A%2F%2Fteam%2F9383

In the example above, if the user does not have the Uber app installed on their device, your app can direct them to the Google Play Store or Apple App Store to install it. We recommend using the react-native-app-link library to handle these scenarios.

{
  "expo": {
    "ios": {
      "infoPlist": {
        "LSApplicationQueriesSchemes": ["uber"]
      }
    }
  }
}

Create URLs

You can use Linking.createURL to create a URL that can be used to open or redirect back to your app. This method resolves to the following:

• Production and development builds: myapp://, where myapp is the custom scheme defined in the app config
• Development in Expo Go: exp://127.0.0.1:8081

Using Linking.createURL helps you avoid hardcoding URLs. You can modify the returned URL by passing optional parameters to this method.

To pass data to your app, you can append it as a path or query string to the URL. Linking.createURL will construct a working URL automatically. For example:

const redirectUrl = Linking.createURL('path/into/app', {
  queryParams: { hello: 'world' },
});

This will resolve into the following, depending on the environment:

• Production and development builds: myapp://path/into/app?hello=world
• Development in Expo Go: exp://127.0.0.1:8081/--/path/into/app?hello=world

In-app browsers

The expo-linking API allows you to open a URL using the operating system's default web browser app. You can use the expo-web-browser library to open URLs in an in-app browser. For example, an in-app browser is useful for secure authentication.

import { Button, View, StyleSheet } from 'react-native';
import * as Linking from 'expo-linking';
import * as WebBrowser from 'expo-web-browser';

export default function Home() {
  return (
    <View style={styles.container}>
      <Button
        title="Open URL with the system browser"
        onPress={() => Linking.openURL('https://expo.dev')}
        style={styles.button}
      />
      <Button
        title="Open URL with an in-app browser"
        onPress={() => WebBrowser.openBrowserAsync('https://expo.dev')}
        style={styles.button}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    marginVertical: 10,
  },
});

Additional link functionality on web

To provide additional link functionality on the web, such as right-click to copy or hover to preview, you can use a Link component from the expo-router library.

import { Link } from 'expo-router';

export default function Home() {
  return <Link href="https://expo.dev">Go to Expo</Link>;
}

Alternatively, you can use the @expo/html-elements library to use a universal <A> element:

import { A } from '@expo/html-elements';

export default function Home() {
  return <A href="https://expo.dev">Go to Expo</A>;
}

The <A> component renders an <a> on the web and an interactive <Text>that uses the expo-linking API on native platforms.