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

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;
  }
);