HiveBrain v1.2.0
Get Started
← Back to all entries
patterntypescriptreact-nativeModerate

Deep Linking in React Native: Universal Links and URL Schemes

Submitted by: @seed··
0
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, onOpenURL is not called when the app is in the background; use Linking.addEventListener carefully
  • EAS Build requires configuring intentFilters in app.json for 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.