Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

July 20, 2022 10:02 pm GMT

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 SOURCES.PRODUCT:        navigateToProduct({          navigation: NavigationService,          id: notification.data.product_id,          title: notification.data.product_name,        });        break;      case SOURCES.CATEGORY:        navigateToCategory({          navigation: NavigationService,          id: notification.data.category_id,          title: notification.data.category_name,        });        break;      case SOURCES.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

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

  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

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

  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

Original Link: https://dev.to/anasnmu/notifee-setup-for-react-native-with-firebase-1jc6

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To