Edit this page
Learn how to handle an incoming URL in your app by creating a deep link.
Edit this page
This guide provides steps to configure standard deep links in your project by adding a custom scheme.
To provide a link to your app, add a custom string to the scheme
property in the app config:
{
"expo": {
"scheme": "myapp"
}
}
After adding a custom scheme to your app, you need to create a new development build. Once the app is installed on a device, you can open links within your app using myapp://
.
If the custom scheme is not defined, the app will use android.package
and ios.bundleIdentifier
as the default schemes in both development and production builds. This is because Expo Prebuild automatically adds these properties as custom schemes for Android and iOS.
You can test a link that opens your app using npx uri-scheme
, which is a command-line utility for interacting and testing URI schemes.
For example, if your app has a /details
screen that you want to open when a user taps on a link (either through another app or a web browser), you can test this behavior by running the following command:
# If you have `android.package` or `ios.bundleIdentifier` defined in your app.json
-
npx uri-scheme open com.example.app://somepath/details --android
# If you have a `scheme` defined in your app.json
-
npx uri-scheme open myapp://somepath/details --ios
Running the above command:
/details
screenandroid
or ios
options specify that the link should be opened on Android or iOSmyapp://
in the address bar to prompt the device to open your app.By default, Expo Go uses the exp://
scheme. If you link to exp://
without specifying a URL address afterward, it will open the app to the home screen. In development, your app's complete URL looks like exp://127.0.0.1:8081
.
To open the /details
screen while testing on Expo Go, you can use npx uri-scheme
:
-
npx uri-scheme open exp://127.0.0.1:8081/--/somepath/into/app?hello=world --ios
In Expo Go, /--/
is added to the URL when a path is specified. This indicates to Expo Go that the substring after it corresponds to the deep link path and is not part of the path to the app itself.
By default, exp://
is replaced with http://
when opening a URL in Expo Go. You can also use exps://
to open https://
URLs. However, exps://
does not currently support loading sites with insecure TLS certificates.
If you are using Expo Router, you can ignore this section.
You can observe links that launch your app using the Linking.useURL()
hook from expo-linking
.
import * as Linking from 'expo-linking';
export default function Home() {
const url = Linking.useURL();
return <Text>URL: {url}</Text>;
}
The Linking.useURL()
hook works behind the scenes by following these imperative methods:
Linking.getInitialURL()
Linking.addEventListener('url', callback)
You can use the Linking.parse()
method to parse the path, hostname, and query parameters from a URL. This method extracts deep linking information and considers nonstandard implementations.
import * as Linking from 'expo-linking';
export default function Home() {
const url = Linking.useURL();
if (url) {
const { hostname, path, queryParams } = Linking.parse(url);
console.log(
`Linked to app with hostname: ${hostname}, path: ${path} and data: ${JSON.stringify(
queryParams
)}`
);
}
return (
%%placeholder-start%%Your React component here. %%placeholder-end%%
)
}
If a user does not have your app installed, deep links to your app will not work. Attribution services like Branch offer solutions for conditionally linking to your app or web page.
Universal links is another solution you can use to handle such cases, in which the route to your web page determines whether or not the app is installed. For more details, see Universal Links.