React-Native navigate after a notification press

Question

Me and a co-worker have been working on a React-Native app for quite some time now. We've been struggling with this problem for a few days now and we don't seem to find a suitable solution.

We are using a few dependencies to make this work.

• notifee (https://notifee.app/)
• React-native Firebase (https://rnfirebase.io/)
• React-navigation (https://reactnavigation.org/)

We've tried using the useNavigation() in the notifee.onBackgroundEvent() but we keep getting an Invalid hook call. When we try to pass the navigation as a property trough the function it returns undefined.

We want to navigate the user to a page after the user has pressed the notification when the app is closed/killed

index.js

import {AppRegistry} from 'react-native';
import React, {useEffect, useState} from 'react';
import messaging from '@react-native-firebase/messaging';
import App from './App';
import {name as appName} from './app.json';
import getNotification from './src/services/RESTnotification';
import notifee, {EventType} from "@notifee/react-native";
import {useNavigation} from "@react-navigation/native";

messaging().setBackgroundMessageHandler(async remoteMessage => {
    await getNotification();
});

notifee.onBackgroundEvent(async ({type, detail}) => {
    const {notification, pressAction} = detail;

    if (type === EventType.PRESS) {
        console.log('User pressed an action with the id: ', pressAction.id);
        // navigate here
    }
    await notifee.cancelNotification(notification.id);
    console.log('background-event');
});

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

RESTnotification.js

import messaging from '@react-native-firebase/messaging';
import notifee, {AndroidImportance, EventType} from "@notifee/react-native";
import AsyncStorage from "@react-native-community/async-storage";
import React from "react";

async function requestUserPermission() {
    const authStatus = await messaging().requestPermission();
    const enabled =
        authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
        authStatus === messaging.AuthorizationStatus.PROVISIONAL;
    if (enabled) {
        console.log('Firebase authorization:', authStatus);
    }
}

export const checkToken = async () => {
    const fcmToken = await messaging().getToken();
    if (fcmToken) {
        console.log(fcmToken);
    }
    await AsyncStorage.setItem("fcmToken", fcmToken);
}

export default async function getNotification() {
    const channelId = await notifee.createChannel({
        id: 'important',
        name: 'Important Notifications',
        importance: AndroidImportance.HIGH,
    });

    await notifee.displayNotification({
        title: '<p><b>Verandering bij proces: {naam}</span></p></b></p>',
        body:
            '{user} heeft het proces {procesnaam} afgekeurd',
        data: {
            processId: '12345678'
        },
        android: {
            channelId: 'important',
            importance: AndroidImportance.HIGH,
            smallIcon: "ic_notification",
            //largeIcon: require('../../assets/images/apple-touch-icon.png'),
            pressAction: {
                id: 'default',
                launchActivity: 'default'
            },
        },
    });
}

checkToken();
requestUserPermission();

Are we overlooking something?

Answer 1

At the startup you can't use the hook useNavigation as it's still not built.

For this kind of use case, you need to use a different approach, the deep linking: https://reactnavigation.org/docs/deep-linking.

The basic flow is that you need to add a path on your notification data (for example myapp://user/profile) and move your notification handler inside the Deep Linking configuration.

For a practical example you can check this tutorial: https://medium.com/cybermonkey/deep-linking-push-notifications-with-react-navigation-5fce260ccca2