Integrating Deep Linking in React Native

Oct 07, 2025 |

10 minutes read

Deep Linking in React Native Apps

Deep linking allows users to jump directly into specific screens of your React Native app from URLs, emails, push notifications, or even other apps. It improves user experience by creating seamless navigation flows, and it’s essential for apps with authentication flows, payment confirmations, or marketing campaigns.

In this guide, we’ll cover:

What deep linking is
Types of deep links
How to configure deep linking in React Native (with React Navigation)
Handling universal links (iOS) and app links (Android)
Common pitfalls and debugging tips

What is Deep Linking?

Deep linking means mapping a URL (like myapp://profile/123) to a specific screen in your app. Instead of always opening the home screen, the app can open directly to the profile page for user ID 123.

There are three types:

Custom scheme URLs → e.g., myapp://profile/123
Universal Links (iOS) / App Links (Android) → e.g., https://myapp.com/profile/123
Deferred deep links → user installs the app first, then is redirected to the intended screen.

Setting up Deep Linking in React Navigation

We’ll use React Navigation v6+ with linking configuration.

Install dependencies

npm install @react-navigation/native @react-navigation/native-stack

npm install react-native-screens react-native-safe-area-context

`
// App.tsx
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';

const Stack = createNativeStackNavigator();

const linking = {
  prefixes: ['myapp://', 'https://myapp.com'],
  config: {
    screens: {
      Home: 'home',
      Profile: 'profile/:id',
    },
  },
};

export default function App() {
  return (
    Loading...}>
      
        
        
      
    
  );
}

`
// ProfileScreen.tsx
import { useRoute } from '@react-navigation/native';

export default function ProfileScreen() {
  const route = useRoute();
  return Profile ID: {route.params.id};
}
Now, opening myapp://profile/42 will take the user directly to the profile screen.

Configure iOS

Add a URL scheme:
- Open Xcode → Project → Info → URL Types
- Add myapp as a URL scheme.
Add universal link support:
- In Apple Developer Console, set up Associated Domains → applinks:myapp.com
- Add this capability in Xcode under Signing & Capabilities.

Configure Android

Add custom scheme in android/app/src/main/AndroidManifest.xml:


<intent-filter android:label="deeplink">
<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" android:host="profile" />
</intent-filter>

2. Add app link (for HTTPS URLs):

`
<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="myapp.com" />
</intent-filter>

Testing Deep Links

iOS Simulator:

xcrun simctl openurl booted myapp://profile/42

Android Emulator:

adb shell am start -W -a android.intent.action.VIEW -d “myapp://profile/42” com.myapp

Universal/App links: Open https://myapp.com/profile/42 in the browser.

Common Pitfalls

Not adding prefixes correctly → always match both scheme and HTTPS.
App cold start vs warm start → handle both by listening for Linking.addEventListener(‘url’, …).
Universal links fallback → test that invalid links open the website, not break.
Parameter mismatch → keep route config and backend URL structure in sync.

Advanced: Handling Incoming Links Globally

`
import { useEffect } from 'react';
import { Linking } from 'react-native';

useEffect(() => {
  const handleDeepLink = ({ url }: { url: string }) => {
    console.log('Incoming link:', url);
  };

  Linking.addEventListener('url', handleDeepLink);

  return () => {
    Linking.removeEventListener('url', handleDeepLink);
  };
}, []);

This ensures you catch links even outside navigation.

Boost your app engagement with Deep Linking!

The Way Forward

Deep linking makes your app more discoverable, user-friendly, and connected. By configuring custom schemes, universal links, and proper route mapping, you can create smooth navigation flows that work across platforms. Add in proper testing and edge case handling, and you’ll have a production-ready deep linking setup for React Native.

Free Consultation

Lopa Das

Oct 07 2025

With over 13 years of experience, Lopa Das is a seasoned professional at iFlair Web Technologies Pvt Ltd, specializing in web and mobile app development. Her technical expertise spans across Laravel, PHP, CodeIgniter, CakePHP, React, Vue.js, Nuxt.js, iOS, Android, Flutter, and React Native. Known for her exceptional skills in team handling, client communication, presales, and risk analysis, Lopa ensures seamless project execution from start to finish. Her proficiency in Laravel CRM, Next.js, and mobile app development makes her a valuable asset in delivering robust, scalable solutions.