How to Implement Deep Linking in React Native for Push Notifications

TL;DR – What You’ll Learn in This Guide:

1. What is Deep Linking: Learn how deep linking enables users to open specific screens in a React Native app from notifications or URLs.
   
2. Push Notification Payload: Discover how to structure notification data with a navigationId to guide in-app navigation.
   
3. Deep Link Generator: Implement a function that builds deep links based on the notification’s navigation type.
   
4. React Navigation Setup: Configure React Navigation to handle deep links using linking and handle notifications on app launch or resume.
   
5. Testing & Integration: Steps to test deep links manually and via Firebase notifications, ensuring smooth navigation flow.

Introduction:

Deep linking is an essential feature in modern mobile applications. It enables users to open specific screens within an app directly from external sources such as push notifications, emails, or web links. This improves user experience by allowing seamless navigation to relevant content without requiring multiple clicks.

If you’re building a mobile solution and want to leverage features like deep linking, working with an experienced React Native app development company can help ensure seamless integration and performance.

In this comprehensive guide, we will walk through the process of implementing deep linking in a React Native application using native code. Our goal is to handle push notifications effectively so that users can be navigated to a specific screen when they tap on a notification.

What is Deep Linking?

Deep linking allows apps to handle URLs in a way that directs users to specific content within the app rather than just opening the app’s home screen. For example, instead of simply opening the app when a notification arrives, deep linking can take the user directly to a post, message, or another specific feature inside the app.

Types of Deep Links

1. Traditional Deep Links: Work only if the app is already installed.
   
2. Universal Links (iOS) & App Links (Android): Open specific app screens even if the app is not installed.
   
3. Deferred Deep Links: Open content even after the app is installed following the link.
   

In this guide, we will focus on traditional deep linking using React Navigation.

Step 1: Setting Up the Notification Payload

To implement deep linking via push notifications, we need to send a notification payload that includes a navigationId. This ID helps determine which screen the user should be taken to.

Here’s an example notification payload:

{
  "notification": {
    "title": "New Message",
    "body": "Test Message for notification API"
  },
  "data": {
    "type": "message", 
    "post_id": "10178",
    "title": "Testing Message",
    "body": "Test Message for deep link",
    "sound": "1",
    "navigationId": "user_discovery_post"
  }
}

Breakdown of Payload:

• notification.title & notification.body: The message shown in the push notification.
  
• data.navigationId: Determines the screen to navigate to.
  
• data.post_id: Helps navigate to a specific post when required.
  

Step 2: Define Navigation IDs

To ensure deep links are valid, define an array of allowed navigationId values in index.js:

const NAVIGATION_IDS = [
  "user_message", 
  "user_notification", 
  "user_discovery_post",
];

This prevents invalid or unrecognized navigationId values from breaking the app.

Step 3: Create a Function to Generate Deep Links

Now, we need a function that processes the notification data and generates the correct deep link URL:

function buildDeepLinkFromNotificationData(data) {
  const navigationId = data?.navigationId;
  if (!NAVIGATION_IDS.includes(navigationId)) {
    console.warn("Unverified navigationId", navigationId);
    return null;
  }
  if (navigationId === "user_message") {
    return "myapp://userMessages";
  }
  if (navigationId === "user_notification") {
    return "myapp://userNotifications";
  }
  if (navigationId === "user_discovery_post") {
    return `myapp://news/${data?.post_id}`;
  }
  return null;
}

This function ensures that:

• The navigation ID is verified.
  
• A correct deep link is generated based on the type of notification received.
  

Step 4: Configure Deep Linking in React Navigation

Now, we need to configure deep linking within React Navigation. Add the following code in index.js:

const linking = {
  prefixes: ["myapp://"],
  config: {
    initialRouteName: "Discover",
    screens: {
      Discover: "Discover",
      Post: "post/:id",
      UserMessages: "userMessages",
      UserNotifications: "userNotifications",
    },
  },
  async getInitialURL() {
    const url = await Linking.getInitialURL();
    if (typeof url === "string") {
      return url;
    }
    const message = await messaging().getInitialNotification();
    return buildDeepLinkFromNotificationData(message?.data);
  },
  subscribe(listener) {
    const onReceiveURL = ({ url }) => listener(url);
    const linkingSubscription = Linking.addEventListener("url", onReceiveURL);
    const unsubscribe = messaging().onNotificationOpenedApp((remoteMessage) => {
      const url = buildDeepLinkFromNotificationData(remoteMessage.data);
      if (typeof url === "string") {
        listener(url);
      }
    });
    return () => {
      linkingSubscription?.remove();
      unsubscribe();
    };
  },
};

This setup ensures:

• The app can handle deep links when launched from a notification.
  
• The app processes URLs and translates them into appropriate navigation actions.
  

Step 5: Integrate with Navigation Container

Next, pass the linking configuration into the NavigationContainer:

<NavigationContainer linking={linking} ref={navigationRef}>
  <Stack.Navigator
    initialRouteName="Splash"
    screenOptions={{ headerShown: false }}
  >
    <Stack.Screen name="Splash" component={Splash} />
    <Stack.Screen name="Login" component={Login} />
  </Stack.Navigator>
</NavigationContainer>

This ensures that the app can handle deep links seamlessly when the user taps on a notification.

Step 6: Testing Your Deep Link Implementation

To verify deep linking works correctly, follow these steps:

1. Manually Open a Deep Link

Run the following command to open a deep link manually:

adb shell am start -W -a android.intent.action.VIEW -d "myapp://news/10178"

For iOS, use:

xcrun simctl openurl booted "myapp://news/10178"

2. Send a Test Notification

Use Firebase Cloud Messaging (FCM) to send a push notification with the correct payload.

3. Check Navigation Behavior

Confirm that tapping the notification opens the expected screen.

Conclusion

Deep linking significantly enhances user experience by allowing direct navigation to specific app screens from push notifications, emails, or external links. In this guide, we covered how to set up notification payloads, generate deep links, configure React Navigation, and test the implementation to ensure a smooth user journey.

At Creole Studios, we specialize in building scalable and user-friendly mobile apps using React Native. Whether you’re looking to implement deep linking, integrate push notifications, or build a robust cross-platform solution, our team can help you deliver exceptional mobile experiences.

👉 Hire experienced React Native developers to bring deep linking and other advanced features to life in your next mobile project.

React Native

Milan Jadav

Sr. Software Engineer