DEV Community

Cover image for Notifee Setup for React Native with Firebase
Anas Nabil
Anas Nabil

Posted on • Edited on

Notifee Setup for React Native with Firebase

This article runs you through the Setup of Notifee in React Native.

I'm assuming that you have installed and configured

✔️ @react-native-firebase
✔️ Created a Notifications.ts file which handles Firebase
✔️ Requested and Granted User Permission
✔️ Subscriped to a Channel
✔️ Created Notification Listeners in Firebase
✔️ Notifications with data can be Sent from Back-end

Now let's setup notifee

1- yarn add @notifee/react-native
2- cd ios/ && pod install --repo-update

Now let's create a handleClickedNotitfaction function in NotificationHandler.ts

export const handleClickedNotitfaction = (notification: FirebaseMessagingTypes.RemoteMessage): void => {
  if (notifcation && notification.data && notification.data.type) {
    switch (notification.data.type) {
      case 'Product':
        navigateToProduct({
          navigation: NavigationService,
          id: notification.data.product_id,
          title: notification.data.product_name,
        });
        break;
      case 'Category':
        navigateToCategory({
          navigation: NavigationService,
          id: notification.data.category_id,
          title: notification.data.category_name,
        });
        break;
      case 'Brand':
        navigateToBrand({ navigation: NavigationService, id: notification.data.brand_id, title: notification.data.brand_name });
        break;
      default:
        navigateToHome({ navigation: NavigationService });
    }
  }
};
Enter fullscreen mode Exit fullscreen mode

And in index.ts file, we Setup our onBackgroundEvent function

import { handleClickedNotitfaction } from './src/utils';
import notifee, { EventType } from '@notifee/react-native';

notifee.onBackgroundEvent(async ({ type, detail }) => {
  switch (type) {
    case EventType.DISMISSED:
      notifee.cancelNotification(detail.notification.id);
      break;
    case EventType.PRESS:
      handleClickedNotitfaction(detail.notification);
      break;
    default:
      break;
  }
});
Enter fullscreen mode Exit fullscreen mode

In App.tsx we Setup our onForegroundEvent function

import { handleClickedNotitfaction } from './utils';
import notifee, { EventType } from '@notifee/react-native';

  useEffect(() => {
    const unsubscribe = () => {
      return notifee.onForegroundEvent(({ type, detail }) => {
        switch (type) {
          case EventType.DISMISSED:
            notifee.cancelNotification(detail.notification.id);
            break;
          case EventType.PRESS:
            handleClickedNotitfaction(detail.notification);
            break;
          default:
            break;
        }
      });
    };

    unsubscribe();
  }, []);
Enter fullscreen mode Exit fullscreen mode

Then lets create onMessageHandler function, That integrates with firebase

import notifee from '@notifee/react-native';

const onNotifeeMessageReceived = async (message) => {
  const channelId = await notifee.createChannel({
    id: 'default',
    name: 'Default Channel',
  });

  notifee.displayNotification({
    id: message.messageId,
    title: message.notification.title,
    body: message.notification.body,
    data: message.data,
    android: {
      channelId: channelId,
      pressAction: {
        id: 'default',
      },
    },
  });
};
Enter fullscreen mode Exit fullscreen mode

Now we need to add this funtion to @react-native-firebase/messaging

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

  useEffect(() => {
    const unsubscribe = messaging().onMessage(onNotifeeMessageReceived);

    return unsubscribe;
  }, []);

Enter fullscreen mode Exit fullscreen mode

Now you've successfully installed @notifee/react-native and also integrated it with @react-native-firebase

Happy Coding ❤

Top comments (3)

Collapse
 
ahmedmasoud profile image
Ahmed Masoud

Top 👍🏼

Collapse
 
akmaltezar profile image
Akmal Tezar

I want to replace the notification sound with my sound file, when the application is opened the sound that plays is the sound i added.
but when it's in the background, the sound that plays is the default sound of the device i'm using.
Can you help me, please?

Collapse
 
tranminhnhat1005 profile image
Trần Minh Nhật

Please show me what is navigateToProduct function, how to use it.