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 */}…