Skip to main content

How to Handle Notification Received and Clicked Events with Notification Payload in Plugin/Theme

​

Description​

​ This guide explains how to handle notification events and their payloads when using react-native-firebase for notification handling. ​

How to Implement in a Plugin or Theme​

​

  1. Inside your plugin/theme index.js file, add the following code ​
import React, { useEffect } from "react";
import messaging from "@react-native-firebase/messaging";
import { addFilter } from '@appmaker-xyz/core';
​
// the following function should be written outside the activate function. This function is used to handle the notification received event in app killed state.
messaging().setBackgroundMessageHandler(async (remoteMessage) => {
  // notification received event in app killed state.
});
​
function activate({ settings }) {
  // your code
  addFilter(
    "appmaker-notfication-data-with-payload",
    "custom-notification-data",
    async (notification) => {
      // you can handle the clicked notification here, if you want to do something on click of notification.
      // you can also handle the notification clicked event here.
      return notification;
    }
  );
}
​
const CustomComponent = () => {
  useEffect(() => {
    messaging().onMessage(async (remoteMessage) => {
      // notification received event in app foreground or background state.
      // you can call any function here to handle the notification received event.
    });
  }, []);
​
  return null;
};
​
addFilter(
  "app-custom-root-components",
  "my-custom-extension-name",
  (currentComponents) => {
    currentComponents?.push(CustomComponent);
    return currentComponents;
  }
);

This code snippet demonstrates how to handle notification events and their payloads in a React Native app using react-native-firebase.