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 blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

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.

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →