patterntypescriptreact-nativeModerate
Deep Linking in React Native: Universal Links and URL Schemes
Viewed 0 times
deep linkinguniversal linksapp linksurl schemecold startnavigation linking
Problem
Setting up deep links that work reliably on both iOS and Android, including cold-start scenarios where the app is not yet running.
Solution
Configure both a custom URL scheme (
myapp://) for development/fallback and Universal Links (iOS) / App Links (Android) for production. Use React Navigation's linking prop to map URLs to screens. Handle the initial URL with Linking.getInitialURL() for cold-start deep links.Why
Custom URL schemes can be claimed by any app (security risk). Universal Links / App Links are verified via
.well-known/apple-app-site-association and assetlinks.json hosted on your domain, preventing hijacking.Gotchas
- Universal Links fall back to Safari if the app is not installed — ensure your website handles those URLs gracefully
- On Android,
onOpenURLis not called when the app is in the background; useLinking.addEventListenercarefully - EAS Build requires configuring
intentFiltersinapp.jsonfor Android App Links - iOS requires the Associated Domains entitlement:
applinks:yourdomain.com
Code Snippets
React Navigation linking configuration
const linking: LinkingOptions<RootStackParamList> = {
prefixes: ['myapp://', 'https://myapp.com'],
config: {
screens: {
Home: '',
Profile: 'user/:id',
Settings: 'settings',
},
},
};
// In NavigationContainer
<NavigationContainer linking={linking}>
{/* ... */}
</NavigationContainer>Revisions (0)
No revisions yet.