Notifee Setup for React Native with Firebase
Tags: reactnative, javascript, typescript, tutorial
Published: 2022-07-20 22:02:00

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**

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

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

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

In **App.tsx** we Setup our **onForegroundEvent** function

```javascript
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();
  }, []);
```

Then lets create **onMessageHandler** function, That integrates with firebase

```javascript
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',
      },
    },
  });
};
```

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

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

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

    return unsubscribe;
  }, []);

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

Happy Coding ❤