DEV Community

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

Posted on • Edited on

10 5

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 ❤

Sentry mobile image

App store rankings love fast apps - mobile vitals can help you get there

Slow startup times, UI hangs, and frozen frames frustrate users—but they’re also fixable. Mobile Vitals help you measure and understand these performance issues so you can optimize your app’s speed and responsiveness. Learn how to use them to reduce friction and improve user experience.

Read full post →

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.

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay