App not opening in react-native on click of notification

Question

I am using React Native Notifee to display notifications and am encountering an issue where the app does not open when a notification is clicked.

This issue occurs under the following scenarios:

When the app is in the background. When the app is in the quit state. In both cases, the notifications are received successfully. However, clicking on the notification causes it to dismiss without launching the app.

This is my index.js code

 /**
 * @format
 */
import {AppRegistry} from 'react-native';
import 'react-native-get-random-values';
import 'react-native-url-polyfill/auto';

import {ReadableStream} from 'web-streams-polyfill';

import notifee, {AndroidImportance, AndroidStyle, EventType} from '@notifee/react-native';
import messaging from '@react-native-firebase/messaging';

import App from './App';
import {name as appName} from './app.json';

globalThis.ReadableStream = ReadableStream;
// Register background handler

const displayNotification = async remoteMessage => {
  
};

messaging().setBackgroundMessageHandler(async remoteMessage => {
  console.log('Message handled in the background! na', remoteMessage);
  displayNotification(remoteMessage);
});

notifee.onBackgroundEvent(async ({type, detail}) => {
  if (type === EventType.ACTION_PRESS) {
    console.log('Notification clicked in background new:', detail);
    global.notificationData = detail;
  }
});


messaging()
  .getInitialNotification()
  .then(remoteMessage => {
    if (remoteMessage) {
      console.log('Notification clicked in quit state:', remoteMessage);
      global.notificationData = remoteMessage.data;
    }
  });

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

Despite setting up handlers for background and quit states, I am facing the following issue:

When clicking on a notification in the background or quit state, the app does not open as expected. The notification disappears, but the app remains closed.

This is my format of data-only message 

    {
       "collapseKey": "xxx.xxxx.xxx",
       "data": {
       "actions": "",
       "body": "50% off on your next purchase. Don't miss out!",
        "image": "https://www.shutterstock.com/image- photo/coronavirus-quarantine-stop-concept-man-260nw-1705838560.jpg",
       "priority": "high",
        "title": "test new 1 Special Offer!"
             },
       "from": "383197575644",
       "messageId": "0:1735644817570165%0a88414a0a88414a",
       "originalPriority": 1,
       "priority": 1,
       "sentTime": 1735644817560,
       "ttl": 2419200
      }

Answer 1

1. Ensure notification click events are handled correctly

• For background state notifications, notifee.onBackgroundEvent handles clicks, but your code does not seem to launch the app or trigger navigation explicitly.
• For quit state notifications, messaging().getInitialNotification() retrieves the notification data, but navigation to the specific screen might not be configured properly.

2. Use onForegroundEvent for foreground clicks. If the app is in the foreground, you must handle the notification click using notifee.onForegroundEvent.
3. Navigate to the target screen using the notification data

• Store the notification data in a shared state (e.g., global, redux, or context).
• When the app launches or resumes, navigate to the desired screen using this data.

Something like this:

/**
 * @format
 */
import {AppRegistry} from 'react-native';
import 'react-native-get-random-values';
import 'react-native-url-polyfill/auto';

import {ReadableStream} from 'web-streams-polyfill';
import notifee, {EventType} from '@notifee/react-native';
import messaging from '@react-native-firebase/messaging';

import App from './App';
import {name as appName} from './app.json';

globalThis.ReadableStream = ReadableStream;
// Register background handler

//navigate to a specific screen using notification data
const handleNotificationNavigation = (data) => {
  if (data) {
    global.notificationData = data; // store data somewhere
    console.log('Navigating to screen with data:', data);
    // call a navigation function here
  }
};

// register background message handler
messaging().setBackgroundMessageHandler(async (remoteMessage) => {
  console.log('Message handled in the background: ', remoteMessage);
  displayNotification(remoteMessage);
});

// handle notfication click in background
notifee.onBackgroundEvent(async ({type, detail}) => {
  if (type === EventType.ACTION_PRESS) {
    console.log('Notification clicked in background: ', detail);
    handleNotificationNavigation(detail.notification?.data);
  }
});

// handle notification click in foreground
notifee.onForegroundEvent(({type, detail}) => {
  if (type === EventType.ACTION_PRESS) {
    console.log('Notification clicked in foreground: ', detail);
    handleNotificationNavigation(detail.notification?.data);
  }
});

//handle notification click in quit state
messaging()
  .getInitialNotification()
  .then((remoteMessage) => {
    if (remoteMessage) {
      console.log('Notification clicked in quit state: ', remoteMessage);
      handleNotificationNavigation(remoteMessage.data);
    }
  });

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