Build WordPress App with React Native #27 : open specific screen with a deeplink
Tags: reactnativewordpress, deeplink
Published: 2019-12-14 12:22:05

---
title: Build WordPress App with React Native #27 : open specific screen with a deeplink
published: true
date: 2019-12-14 08:29:16 UTC
tags: React native Wordpress,deep link
canonical_url: https://kriss.io/build-wordpress-client-app-with-react-native-27-open-specific-screen-with-a-deeplink/
cover_image: https://cdn-images-1.medium.com/max/1024/1*0qWyQ1BHUL6FoFfa-uPTYg.png
series: Build Wordpress Client App with React Native
---

This series intends to show how I build app to serve content from my WordPress blog by using react native. Since, my blog is talking about react-native, the series and the articles are interconnected. We will learn how to set-up many packages that make our lives comfortable and learn how to deal with WordPress APIs. Here, the most prominent features talked about in the book are the dark theme , offline mode, infinite scroll and many more. You can discover much more in this series.this inspiration to do this tutorial series came from the [React Native Mobile Templates](https://www.instamobile.io/) from instamobile

In case of wanting to learn from the beginning, all the previous parts for this tutorial series are available below:

1. [Build WordPress Client App with React Native #1: Overview](https://kriss.io/build-wordpress-client-app-with-react-native-1-overview/)
2. [Build WordPress Client App with React Native #2: Setting Up Your Environment](https://kriss.io/build-wordpress-client-app-with-react-native-2-setting-up-your-environment/)
3. [Build WordPress Client App with React Native #3: Handle Navigation with React navigation](https://kriss.io/build-wordpress-client-app-with-react-native-3-handle-navigation-with-react-navigation/)
4. [Build WordPress Client App with React Native #4: Add Font Icon](https://kriss.io/build-wordpress-client-app-with-react-native-4-add-font-icon/)
5. [Build WordPress Client App with React Native #5 : Home Screen with React native paper](https://kriss.io/build-wordpress-client-app-with-react-native-5-using-react-native-paper/)
6. [Build WordPress Client App with React Native #6 : Using Html renderer and Moment](https://kriss.io/build-wordpress-client-app-with-react-native-6-using-html-renderer-and-moment/)
7. [Build WordPress Client App with React Native #7: Add pull to refresh and Infinite scroll](https://kriss.io/build-wordpress-client-app-with-react-native-7-add-pull-to-refresh-and-infinite-scroll/)
8. [Build WordPress Client App with React Native #8: Implementing SinglePost Screen](https://kriss.io/build-wordpress-client-app-with-react-native-8-implementing-singlepost-screen/)
9. [Build WordPress Client App with React Native #9: implement simple share](https://kriss.io/build-wordpress-client-app-with-react-native-9-implement-simple-share/)
10. [Build WordPress Client App with React Native #10: Setup and save bookmark](https://kriss.io/build-wordpress-client-app-with-react-native-10-setup-and-save-bookmark/)
11. [Build WordPress Client App with React Native #11: Remove and Render Bookmark](https://kriss.io/build-wordpress-client-app-with-react-native-11-remove-and-render-bookmark/)
12. [Build WordPress Client App with React Native #12: Categories screen](https://kriss.io/build-wordpress-client-app-with-react-native-12-categories-screen/)
13. [Build WordPress Client App with React Native #13: Configuring firebase in contact screen](https://kriss.io/build-wordpress-client-app-with-react-native-13-configuring-firebase-in-contact-screen/)
14. [Build WordPress Client App with React Native #14 : Implementing Settings Screen](https://kriss.io/build-wordpress-client-app-with-react-native-14-implementing-settings-screen/)
15. [Build WordPress Client App with React Native #15 : Forwarding message to inbox with Cloud function](https://kriss.io/build-wordpress-client-app-with-react-native-15-forwarding-message-to-inbox-with-cloud-function/)
16. [Build WordPress Client App with React Native #16 : Dark theme](https://kriss.io/build-wordpress-client-app-with-react-native-16-dark-theme/)
17. [Build WordPress Client App with React Native #17 : Fix react-native-render-html to change theme](https://kriss.io/build-wordpress-client-app-with-react-native-17-fix-react-native-render-html-to-change-theme/)
18. [Build WordPress Client App with React Native #18 : changing Theme](https://kriss.io/build-wordpress-client-app-with-react-native-18-manually-changing-theme/)
19. [Build WordPress Client App with React Native #19 : Notify user when offline](https://kriss.io/build-wordpress-client-app-with-react-native-19-notify-user-when-offline/)
20. [Build WordPress Client App with React Native #20 : Saving data to cache](https://kriss.io/build-wordpress-client-app-with-react-native-20-saving-data-to-cache/)
21. [Build WordPress Client App with React Native #21 : Splash Screen on iOS](https://kriss.io/build-wordpress-client-app-with-react-native-21-splash-screen-on-ios/)
22. [Build WordPress Client App with React Native #22 : Splash Screen on Android](https://kriss.io/build-wordpress-client-app-with-react-native-22-splash-screen-on-android/)
23. [Build WordPress Client App with React Native #23 : Setup Firebase Push notification [iOS]](https://kriss.io/build-wordpress-client-app-with-react-native-23-setup-firebase-push-notification-ios/)
24. [Build WordPress Client App with React Native #24 : Setup Firebase Push Notification [Android]](https://kriss.io/build-wordpress-client-app-with-react-native-24-setup-firebase-push-notification-android/)
25. [Build WordPress Client App with React Native #25 : Manage device token](https://kriss.io/build-wordpress-client-app-with-react-native-25-manage-device-token/)

in this previous chapter we can receive notification from Firebase on both Android and iOS for this last feature we will open a new post with a touch notification message

## Listen for a notification event

create new async function name `createNotificationListeners`and create three listener

the first listener triggered when a particular notification has been received in foreground

```
this.notificationListener = firebase
      .notifications()
      .onNotification(notification => {
        const {title, body, data} = notification;
        console.log('1');
      });
```

second If your app is in the background, you can listen for when a notification is clicked/tapped/opened as follows:

```
this.notificationOpenedListener = firebase
      .notifications()
      .onNotificationOpened(notificationOpen => {
        const {title, body, data} = notificationOpen.notification;
        console.log(data.post_id);
      });
```

last If your app is closed, you can check if it was opened by a notification being clicked/tapped/opened as follows:

```
const notificationOpen = await firebase
      .notifications()
      .getInitialNotification();
    if (notificationOpen) {
      const {title, body, data} = notificationOpen.notification;
      console.log('3');
    }
```

then activate function on componentDidMount

```
componentDidMount() {
    SplashScreen.hide();
    this.checkPermission();
    this.createNotificationListeners();
  }
```

now we can listen to event from notification in multiple situations

## Open specific screen with Deeplink

### For iOS

we can set up a route for specific screen first we setup on iOS first open Appdelegate.m import package

```
#import <React/RCTLinkingManager.h>
```

then add before @end

```
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url
 options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
 return [RCTLinkingManager application:app openURL:url options:options];
}
```

next goto info tab scroll to URL Type section

![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/a9f3c901-bdda-46db-9b75-e3fd6e4b433d/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAT73L2G45AA4RMRKI%2F20191214%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20191214T082338Z&X-Amz-Expires=86400&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEOb%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJGMEQCIGmQcUpHC4nnPyvcOr52IE%2FM4o70Dxdz2qzfvv3Q2xQxAiAs%2BEot24%2BFRQ5d5Cx9aCsxhCFqpSgXd%2BlosOz3VzpDBSrSAgg%2FEAAaDDI3NDU2NzE0OTM3MCIMYxl4FXc2gAmi8jqMKq8Ckiv30SyqeoUTqzruBscZZB1ptcHiE6INpZBV7PYDbTmksPTmLU2pXTn7XnZcl5t6VtSuUXhTPbdcqfCKvAB9K8V0nHPgvYqIikmy%2B42NXjIXpysUpuUvtZtDMWJsz81TB5n0Vc37ASZENV1cwtvPiHi2qgTdFeEV1U2PpKHg4oYedBVErmDO6wMjzkC6EI1t%2FYMluo2%2BRgTD7j%2FrYXLJLvqeoDgKL6jeSjUUWb5ezcgelqhRMWoIFoyAJxNnDamSG1q8Ot2PxwnVMHxvH2jG79%2FgKUJ8KStOiGDQxhI%2FcWQIzitexhdt7i6yUpdLho7gz%2BLRpRes0OHAMDz9Gbk0%2B3ulBETw4Qfyd0q9HtSDFzJd5RIxoheEDHxPzo7jqLJ8ifUBtv3L4VPL%2F9h2%2BL8qMNnq0e8FOs4COxYUU6tlJa4XhLfqcylDG0Oji3fwNGo2vu9JK%2BrNgssl5rJNhkqU6bSLRfC%2B9cAjzyeW4kW8Rh3y97yd1nVpdglGIjn%2FU7U3OgZZbt5uXfN7EDCBarQfbB39r9OfyYWxkRp9PNcYoMg9cl4wUgVxmu9jfMdXxybNTGG2sLnjRA96QN8cS9HPgYSvjVGySWLvnHh8ty2o52WC0YQCnArVcupQlCKQEuMCt6PxnlJzIsylSX%2BSX7NjAa32qI79I4RpzA6h0hyRb6%2FsIiJ2B7L5BSBLzDDCpp7eLU0eQeR94lnta9Qk5weeEf3BlrWV8ktFFVmXrIstpGMZmhkz%2Fw7e2GyYUPhsfAkwUZph%2FXlKNw7ETe9A2jHIMgHGLn762LmdkORpTFJASkMAshRkmosBDh8IBrMwQnKkF%2Femiq9dHMMRNi6n7Gy9p%2FpnhToYQA%3D%3D&X-Amz-Signature=9d595be247932a2853cd0daa4b7867090744397493e4cde97054b511ab69bc11&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)

### For Android

we need to open our Manifest file and add the app name we will want to be referencing, in our case `krissnewapp`.

In `android/app/src/main`, open `AndroidManifest.xml` and add the following intent filter below the last intent filter already listed, within the \<activity\> tag:

```
<intent-filter android:label="filter_react_native">
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="krissnewapp" android:host="post" /> // A
</intent-filter>
```

## Setup Deeplink in React navigation

next, define a route with react-navigation in `CreateStackNavigator`define a path in SinglePost screen and receive post\_id as the parameter

```
const StackNavigator = createStackNavigator({
  DashboardTabNavigator: DashboardTabNavigator,
  SinglePost: {
    screen: SinglePost,
    path: 'post/:post_id',
  },
  CategorieList: CategorieList,
  Contact: Contact,
});
```

the last thing define route prefix

```
const prefix = 'krissappnew://';
  return (
    <PaperProvider theme={paper_theme}>
      <Navigation theme={nav_theme} uriPrefix={prefix} />
    </PaperProvider>
  );
```

now we can use deeplink in notification listener

first import linking component from react-native

```
import {Platform, Linking} from 'react-native';
```

add Linking to Notification package

```
this.notificationListener = firebase
      .notifications()
      .onNotification(notification => {
        const {title, body, data} = notification;
        Linking.openURL('krissappnew://post/' + data.post_id).catch(err =>
          console.error('An error occurred', err),
        );
        console.log('1');
      });

    this.notificationOpenedListener = firebase
      .notifications()
      .onNotificationOpened(notificationOpen => {
        const {title, body, data} = notificationOpen.notification;
        Linking.openURL('krissappnew://post/' + data.post_id).catch(err =>
          console.error('An error occurred', err),
        );
        console.log(data.post_id);
      });
    const notificationOpen = await firebase
      .notifications()
      .getInitialNotification();
    if (notificationOpen) {
      const {title, body, data} = notificationOpen.notification;
      Linking.openURL('krissappnew://post/' + data.post_id).catch(err =>
        console.error('An error occurred', err),
      );
      console.log('3');
    }
```

we receive post\_id from a message and concatenate to URL while using Linking component open

## Summary

here we learn a lot of technique from setup push notification on Android and iOS also Firebase then we handle device token and we conclude everything with using cloud function send message last thing we learn how to handle Deeplink in React native

The post [Build WordPress Client App with React Native #27 : open specific screen with a deeplink](https://kriss.io/build-wordpress-client-app-with-react-native-27-open-specific-screen-with-a-deeplink/) appeared first on [Kriss](https://kriss.io).