Mo3tasm
Mo3tasm

Reputation: 41

React Native Deeplinking with Push Notifications Doesn't Work when App is closed

I'm trying to redirect the user to a specific screen when tapping on a push notification, it works fine when the app is visible (with both Onesignal & RN-firebase/messaging) or even standing by in the background (Onesignal only), but when the app is removed from background, tapping the received notification will only open the app's home screen.

index.js

import {AppRegistry, Linking} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import messaging from '@react-native-firebase/messaging';
import notifee, {EventType} from '@notifee/react-native';
import {OneSignal} from 'react-native-onesignal';

const createNotificationChannels = async () => {
  await notifee.createChannel({
    id: 'important',
    name: 'Important Notifications',
    importance: 4,
  });

  await notifee.createChannel({
    id: 'general',
    name: 'General Notifications',
    importance: 3,
  });
};
createNotificationChannels();

messaging().setBackgroundMessageHandler(async remoteMessage => {
  notifee.displayNotification({
    title: remoteMessage.notification.title,
    body: remoteMessage.notification.body,
    android: {
      smallIcon: 'noti',
      color: '#134B7F',
      channelId: remoteMessage.data.channel,
      pressAction: {id: 'default'},
      actions: [{title: 'TersanERP'}],
    },
    data: remoteMessage.data,
  });
});

notifee.onBackgroundEvent(({type, detail}) => {
  switch (type) {
    case EventType.ACTION_PRESS:
    case EventType.PRESS:
      if (detail.notification.data.Linking) {
        Linking.openURL(detail.notification.data.Linking);
      }
      break;
  }
});

messaging().onMessage(async remoteMessage => {
  notifee.displayNotification({
    title: remoteMessage.notification.title,
    body: remoteMessage.notification.body,
    android: {
      smallIcon: 'noti',
      color: '#134B7F',
      channelId: remoteMessage.data.channel,
    },
    data: remoteMessage.data,
  });
  notifee.onForegroundEvent(({type, detail}) => {
    switch (type) {
      case EventType.ACTION_PRESS:
      case EventType.PRESS:
        if (detail.notification.data.Linking) {
          Linking.openURL(detail.notification.data.Linking);
        }
        break;
    }
  });
});

OneSignal.initialize('abcdef123465789-abcd-abcd-a1234-abcdef12345678');
OneSignal.Notifications.addEventListener('click', event => {
  Linking.openURL(event.notification.additionalData?.Linking);
});

AppRegistry.registerComponent(appName, () => App);

Linking constant (React Navigation deeplinking)

const linking = {
  prefixes: ['appurl://'],
  config: {
    screens: {
      HomeStackNavigator: {
        path: 'home',
        initialRouteName: 'Home',
        screens: {
          Home: '',
          UserEmployeeStack: {
            path: 'user-employee',
            screens: {
              Personel: 'personel',
              Details: 'details',
              VacationList: 'vacation-list',
              VacationFilter: 'vacation-filter',
              VacationAdd: 'vacation-add',
              VacationDetails: 'vacation-details',
              AvansList: 'avans-list',
              AvansDetails: 'avans-details',
              AvansFilter: 'avans-filter',
              AvansAdd: 'avans-add',
            },
          },
          ProjectStackNavigator: 'project',
          ManagerEmployeeStack: {
            path: 'manager-employee',
            screens: {
              Admin: 'admin',
              PersonelList: 'personel-list',
              VacationList: {
                path: 'vacation-list',
                parse: {
                  show: show => show,
                },
              },
              VacationDetails: 'vacation-details',
              Details: 'details',
              VacationAdd: 'vacation-add',
              AdvanceAdd: 'advance-add',
              AdvanceList: 'advance-list',
              AdvanceDetails: 'advance-details',
              OvertimeScreen: 'overtime',
            },
          },
          WarehouseStack: 'warehouse',
        },
      },
      Profil: 'profile',
      Mesaj: 'message',
    },
  },
};

RN-firebase node.js server

const admin = require("firebase-admin");
const serviceAccount = require("./appcred-abcd12-firebase-adminsdk-abcd124-abcd123.json");

admin.initializeApp({
    credential: admin.credential.cert(serviceAccount),
});

let usernames = ["USERNAME"];

usernames.forEach((username) => {
    admin
        .firestore()
        .collection("Tokens")
        .doc(username)
        .get()
        .then((doc) => {
            if (doc.exists) {
                let deviceregistrationToken = doc.data().token;

                const message = {
                    token: deviceregistrationToken,
                    data: {
                        channel: "important",
                        Linking: "appurl://home/manager-employee/vacation-list?show=waiting",
                    },
                    notification: {
                        body: "This is a notification message!",
                        title: "Bildirim",
                    },
                    android: {
                        notification: {
                            channelId: "important",
                            color: "#134B7F",
                        },
                    },
                };

                admin
                    .messaging()
                    .send(message)
                    .then((response) => {
                        console.log("Successfully sent message:", username);
                    })
                    .catch((error) => {
                        console.log("Error sending message:", error);
                    });
            } else {
                console.log("No such document!");
            }
        })
        .catch((error) => {
            console.error("Error retrieving user data: ", error);
        });
});

Onesignal config is similar to RN-firebase/messaging.

I have tried both RN-firebase/messaging with Notifee and also tried Onesignal with pretty much similar results, I know I'm missing something but not able to figure it out, any help would be appreciated.

All packages used are on the latest stable version, React Native 0.74.2

        buildToolsVersion = "34.0.0"
        minSdkVersion = 23
        compileSdkVersion = 34
        targetSdkVersion = 34
        ndkVersion = "26.1.10909125"
        kotlinVersion = "1.9.22"

Upvotes: 0

Views: 192

Answers (0)

Related Questions