Build WordPress Client App with React Native #27 : open specific screen with a deeplink

This series intends to show how I make app to serve content from my WordPress blog by using React Native App. As my blog is about React-Native, series and the articles are interconnected. We will learn how to set-up packages that make our lives comfortable and learn how to deal with WordPress APIs. We have discussed the most prominent features in the book as dark theme, offline mode, infinite scroll and many more. You may have more knowledge about it in this series. The inspiration behind doing this tutorial series came from the React Native App Templates from Instamobile.

For learning from the beginning, all the previous parts of the tutorial series are available below:

In the last chapter a notification should be recieved from firebase on both Android and iOS and for the last feature we have to open a new post with a push notification message

Listen For a Notification Event

Create new sync function name createNotificationListeners and create three listeners, 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 see that 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 is 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 set up on iOS and then 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.

For Android

We need to open our Manifest file and add the app name that we want to be referenced, 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

Now define a route with react-navigation in CreateStackNavigatorand a path to Single Post 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 defines the 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 of 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, iOS and Firebase. Also, we handle device token and we conclude everything with using cloud function to send messages and the last thing we learn is how to handle Deeplink in React native.

Also published on Medium.