Deep Linking in React Native

Deep linking lets a React Native app open directly to a specific screen from an external URL. It is useful for passwordless login links, push notifications, marketing campaigns, referral invites, order tracking, chat threads, and content shared from the web.
Quick Answerโ
For most modern React Native apps, use React Navigation's linking prop on
NavigationContainer, configure native URL handling on iOS and Android, and
test every route from a cold start and while the app is already open.
Use a custom scheme such as myapp://orders/123 for development and internal
links. Use HTTPS universal links and Android App Links for production-facing
links because they are domain verified and can fall back to your website when
the app is not installed.
Custom Schemes vs Universal Links vs App Linksโ
| Link type | Example | Best for |
|---|---|---|
| Custom scheme | myapp://profile/42 | Local testing, internal links, quick app-only flows. |
| iOS Universal Link | https://example.com/profile/42 | Production links on iOS with web fallback. |
| Android App Link | https://example.com/profile/42 | Production links on Android with domain verification. |
Custom schemes are easy to set up, but they are not domain verified. For customer-facing links, use HTTPS links and prove ownership of the domain through the platform-specific association files.
Mega Bundle Sale is ON! Get ALL of our React Native codebases at 90% OFF discount ๐ฅ
Get the Mega BundleConfigure React Navigationโ
React Navigation handles many edge cases for you: initial links, links received while the app is already running, nested route matching, and fallback UI while it resolves the first URL.
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
const linking = {
prefixes: ['myapp://', 'https://example.com'],
config: {
screens: {
Home: '',
Profile: 'users/:id',
Order: 'orders/:orderId',
Settings: 'settings',
},
},
};
export function AppNavigation() {
return (
<NavigationContainer linking={linking}>
{/* your stack, tabs, or drawer navigator */}
</NavigationContainer>
);
}
Keep the route map close to your navigation tree. If you rename a screen or nest it under a new navigator, update the linking config in the same change.
Configure iOSโ
For a custom URL scheme, add a URL Type in Xcode or in Info.plist:
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>myapp</string>
</array>
</dict>
</array>
For Universal Links:
- Enable the Associated Domains capability in Xcode.
- Add a domain entry such as
applinks:example.com. - Host an
apple-app-site-associationfile on your domain. - Validate every incoming URL before using route parameters.
Apple calls out universal links as a potential entry point into your app, so do not let a URL perform sensitive actions directly. Open a screen, load trusted server state, and ask for confirmation when the action is destructive.
Configure Androidโ
For a custom scheme, add an intent filter in the activity that hosts React Native:
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="myapp" />
</intent-filter>
For Android App Links, use HTTPS and add domain verification:
<intent-filter android:autoVerify="true">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="https" android:host="example.com" />
</intent-filter>
Then publish the matching Digital Asset Links file at:
https://example.com/.well-known/assetlinks.json
Test Deep Linksโ
Test both "app closed" and "app already running" states.
xcrun simctl openurl booted "myapp://users/123"
adb shell am start -W \
-a android.intent.action.VIEW \
-d "myapp://users/123" \
com.example
For production HTTPS links, test with real domains, not only local schemes. iOS and Android cache association results, so reinstall the app or reset simulator state when debugging failed domain verification.
Common Problemsโ
If the app opens but the wrong screen appears, your React Navigation linking config probably does not match the navigator structure.
If Android asks which app should open the link, App Links verification is not
complete or the domain is not covered by assetlinks.json.
If iOS opens Safari instead of the app, confirm the Associated Domains
entitlement, the apple-app-site-association file, and the path patterns.
If the deep link contains user-controlled parameters, validate them before using them in Firestore queries, payments, profile updates, or destructive actions.
Useful Referencesโ
- React Native Linking API
- React Navigation deep linking
- React Navigation configuring links
- Apple Universal Links
- Android App Links
Looking for a custom mobile application?
Our team of expert mobile developers can help you build a custom mobile app that meets your specific needs.
Get in TouchConclusionโ
Deep linking is no longer just a navigation detail. For production apps, it is part of onboarding, notifications, marketing attribution, support workflows, and account security. Start with a small route map, add domain-verified HTTPS links before launch, and keep deep link testing in your release checklist.