This content originally appeared on DEV Community and was authored by Anas Nabil
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 ❤
This content originally appeared on DEV Community and was authored by Anas Nabil
Anas Nabil | Sciencx (2022-07-20T22:02:19+00:00) Notifee Setup for React Native with Firebase. Retrieved from https://www.scien.cx/2022/07/20/notifee-setup-for-react-native-with-firebase/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.