Deep linking

In this guide, we will configure our app to handle deep links on various platforms. To handle incoming links, we need to handle 2 scenarios:

1. If the app wasn't previously open, we need to set the initial state based on the link
2. If the app was already open, we need to update the state to reflect the incoming link

React Native provides a Linking to get notified of incoming links. React Navigation can integrate with the Linking module to automatically handle deep links. See configuring links to see more details on how to configure links in React Navigation.

Below, we'll go through required configurations for each platform so that the deep link integration works.

Set up with Expo projects

First, you will want to specify a URL scheme for your app. This corresponds to the string before :// in a URL, so if your scheme is example then a link to your app would be example://. The scheme only applies to standalone apps and you need to re-build the standalone app for the change to take effect. In the Expo client app you can deep link using exp://ADDRESS:PORT where ADDRESS is often 127.0.0.1 and PORT is often 19000 - the URL is printed when you run expo start. If you want to test with your custom scheme you will need to run expo build:ios -t simulator or expo build:android and install the resulting binaries in your emulators. You can register for a scheme in your app.json by adding a string under the scheme key:

{
  "expo": {
    "scheme": "example"
  }
}

URI Prefix

Next, let's configure our navigation container to extract the path from the app's incoming URI.

// Install this package with `npx expo install expo-linking`
import * as Linking from 'expo-linking';

// Linking.createURL is available as of [email protected] and [email protected]. If
// you are using older versions, you can upgrade or use Linking.makeUrl instead,
// but note that your deep links in standalone apps will be in the format
// scheme:/// rather than scheme:// if you use makeUrl.
const prefix = Linking