Ankit Kumar
Ankit Kumar Programmer, Technologist, Technical Writer, YouTuber and Tutor

How to deep link from notification in react native app

How to deep link from notification in react native app

Deep linking is when a link sends users directly into a specific point in the app experience, rather than an external website or app homepage.

How to implement deep linking in React Native app with React Navigation v5


What are we building?

In the last article, we learned about how to implement deep-links in the react native app with react-navigation v5.

In this article, we will look at how to deep-link content in the app from the notification.

We will use the below deep links and see how the app behaves when this deep link is received in the notification and the user tap on the notification.

  • demo://app/home/:id - This deep link will open the home screen of the app and will pass id as param/props to the home screen
  • demo://app/profile/:id - This deep link will open the profile screen of the app and will pass id as param/props to the profile screen
  • demo://app/notifications - This deep link will open the notifications screen of the app
  • demo://app/settings - This deep link will open the settings screen of the app

After the implementation of the deep link with notification, the app will behave as shown here.


Let’s do some code now!

Setting up the project

I am assuming that you already have a project in which deep links need to be integrated.

If you don’t have any project, I have created a small app with four screens and explained it here.


Setting up the notification in the project

Project is already created in previous article

I have setup four kinds of local notification in the app

  • Schedule local notification without deep-link
1
2
3
4
5
6
7
  const scheduleLocalNotification = () => {
    PushNotificationIOS.scheduleLocalNotification({
      alertBody: "Scheduled Local Notification",
      fireDate: new Date(new Date().valueOf() + 2000).toISOString(),
    });
  };

  • Local notification that deep-link to profile screen
    1
    2
    3
    4
    5
    6
    7
    
    const sendProfilNotification = () => {
      PushNotificationIOS.presentLocalNotification({
        alertTitle: "Deep link to profile",
        alertBody: "demo://app/profile/234",
        applicationIconBadgeNumber: 1,
      });
    };
    
  • Local notification that deep-link to settings screen
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    const sendSettingsNotificationWithSound = () => {
      PushNotificationIOS.addNotificationRequest({
        id: "notificationWithSound",
        title: "Notification Deep link",
        subtitle: "Received Deep link",
        body: "demo://app/settings",
        sound: "customSound.wav",
        badge: 1,
      });
    };
    
  • Local Notification Request that deep-link to the notifications screen
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    
    const addNotificationRequest = () => {
      PushNotificationIOS.addNotificationRequest({
        id: "test",
        title: "deep link",
        subtitle: "Open notifications",
        body: "demo://app/notifications",
        category: "test",
        threadId: "thread-id",
        fireDate: new Date(new Date().valueOf() + 2000),
        repeats: true,
      });
    };
    

Lets now write functions to handle registering to and unregistering from notification

We will just console log device token on successful registration

1
2
3
  const onRegistered = (deviceToken) => {
    console.log("Registered For Remote Push", `Device Token: ${deviceToken}`);
  };

and console log error message on registration error, if any

1
2
3
4
  const onRegistrationError = (error) => {
    console.log(`Error (${error.code}): ${error.message}`);
  };

Adding/Removing event listeners on useEffect Hook

Add below code to your app for adding and removing event listeners

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  useEffect(() => {
    PushNotificationIOS.addEventListener("register", onRegistered);
    PushNotificationIOS.addEventListener(
      "registrationError",
      onRegistrationError
    );
    
    PushNotificationIOS.requestPermissions().then(
      (data) => {
        console.log("PushNotificationIOS.requestPermissions", data);
      },
      (data) => {
        console.log("PushNotificationIOS.requestPermissions failed", data);
      }
    );

    return () => {
      PushNotificationIOS.removeEventListener("register");
      PushNotificationIOS.removeEventListener("registrationError");
      PushNotificationIOS.removeEventListener("notification");
      PushNotificationIOS.removeEventListener("localNotification");
    };
  }, []);

Handling onClick of notifcation

Lets now create a function to handle onclick event of notification

1
2
3
4
  const onLocalNotification = (notification) => {
    const isClicked = notification.getData().userInteraction === 1;
    // Handle deeplink here from notification - done below
  };

We need to add onLocalNotification() to event listeners, so the updated event lister will look like below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
useEffect(() => {
    PushNotificationIOS.addEventListener("register", onRegistered);
    PushNotificationIOS.addEventListener(
      "registrationError",
      onRegistrationError
    );
    PushNotificationIOS.addEventListener(
      "localNotification",
      onLocalNotification
    ); // Handling click on notification

    PushNotificationIOS.requestPermissions().then(
      (data) => {
        console.log("PushNotificationIOS.requestPermissions", data);
      },
      (data) => {
        console.log("PushNotificationIOS.requestPermissions failed", data);
      }
    );

    return () => {
      PushNotificationIOS.removeEventListener("register");
      PushNotificationIOS.removeEventListener("registrationError");
      PushNotificationIOS.removeEventListener("notification");
      PushNotificationIOS.removeEventListener("localNotification");
    };
  }, []);

Lets do magic now

Import Linking from react-native on top of the file.

Modify onLocalNotification() method as below

1
2
3
4
const onLocalNotification = (notification) => {
    const isClicked = notification.getData().userInteraction === 1;
    Linking.openURL(notification.getMessage());
  };

We are done with the coding part

It was easy, wasn’t it?


Video of testing


Full source code can be found on Github Repo

This content is also available as video on YouTube


Further Reading


Also, to be notified about my new articles and stories:

Subscribe to my YouTube Channel

Follow me on Medium, Github, and Twitter.

You can find me on LinkedIn as well.

I am quite active on Dev Community as well and write small topics over there.

Cheers!!! Happy coding!!

Rating: