Firebase Push Notifications

handler.ts

import messaging, {
  FirebaseMessagingTypes,
} from '@react-native-firebase/messaging';

export const onMessageReceived = async (
  message: FirebaseMessagingTypes.RemoteMessage,
) => {
  // handle messages here
};

export const setupPushNotifications = () => {
  messaging().setBackgroundMessageHandler(onMessageReceived);
};

hooks.ts

import messaging from '@react-native-firebase/messaging';
import { requestPushNotificationPermission } from './permission';
import { onMessageReceived } from './handler';

const getFcmToken = async () => {
  try {
    const token = await messaging().getToken();
    return token;
  } catch (error) {
    return undefined;
  }
};

const useForegroundNotificationEffect = () => {
  useEffect(() => {
    messaging().onMessage(onMessageReceived);
  }, []);
};

const useFCMTokenEffect = () => {
  const updateFCMToken = useCallback(async () => {
    const notificationToken = await getFcmToken();
    const hasPermission = await requestPushNotificationPermission();
    const saved = { notificationToken: '' }; // Get from your server
    if (notificationToken === saved.notificationToken || !hasPermission) return;
    await updateTokenOnYourServer({ notificationToken });
  }, []);

  useEffect(() => {
    updateFCMToken();
  }, [updateFCMToken]);
};

const useForegroundNotificationEffect = () => {
  useEffect(() => {
    messaging().onMessage(onMessageReceived);
  }, []);
};

export const usePushNotificationEffect = () => {
  useFCMTokenEffect();
  useForegroundNotificationEffect();
};

permission.ts

import messaging from '@react-native-firebase/messaging';

export const requestPushNotificationPermission = async () => {
  try {
    const status = await messaging().requestPermission();

    return (
      status === messaging.AuthorizationStatus.AUTHORIZED ||
      status === messaging.AuthorizationStatus.PROVISIONAL
    );
  } catch {
    return false;
  }
};