How to Set Up and Use Deep Linking in React Native

Introduction

Deep linking is a powerful technique in mobile app development that allows users to navigate directly to specific content within an app using a URL. In React Native, deep linking enables seamless user experiences by integrating the app with external sources such as emails, social media, and web pages.

Why Use Deep Linking?

• Improved User Experience: Users can directly land on specific content without manually navigating through the app.
• Marketing Campaigns: Helps in tracking user engagement from external sources.
• Cross-App Navigation: Enables smooth transitions between different applications.

Types of Deep Linking

1. Traditional Deep Linking

• Uses a predefined URL scheme (myapp://)
• Requires the app to be installed
• Example: myapp://profile/123

2. Universal Links (iOS) & App Links (Android)

• Uses HTTP/HTTPS links (e.g., https://myapp.com/profile/123)
• Opens the app if installed, otherwise, it redirects to a webpage
• Requires domain verification

Setting Up Deep Linking in React Native

1. Configure Deep Linking in React Navigation

If you’re using React Navigation, you can set up deep linking as follows:

Install Required Dependencies:

npm install @react-navigation/native react-native-screens react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-vector-icons react-native-linking

Define the Linking Configuration:

import { NavigationContainer } from '@react-navigation/native';

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

export default function App() {
  return (
    <NavigationContainer linking={linking}>
      {/* App Stack */}
    </NavigationContainer>
  );
}

2. Handling Incoming Links

To handle deep links, use React Native’s Linking API:

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

const handleDeepLink = (event) => {
  console.log('Deep Link:', event.url);
};

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

3. Configure iOS and Android

iOS (Info.plist)

Add the URL scheme in Info.plist:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>myapp</string>
    </array>
  </dict>
</array>

For Universal Links, configure apple-app-site-association.

Android (AndroidManifest.xml)

Add intent filters in AndroidManifest.xml:

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

For App Links, verify the domain using assetlinks.json.

Testing Deep Links

Use the following commands to test deep linking:

adb shell am start -W -a android.intent.action.VIEW -d "myapp://profile/123" com.myapp

For iOS, use Safari or Xcode’s scheme tester.

Conclusion

Deep linking in React Native enhances user engagement by allowing direct navigation to specific app screens. By setting up deep linking correctly, you can improve user experience, streamline marketing efforts, and integrate seamlessly with external platforms.

Thank you for reading! Feel free to connect with me on LinkedIn or GitHub.