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 });
}
}
};
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;
}
});
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();
}, []);
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',
},
},
});
};
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;
}, []);
Now you've successfully installed @notifee/react-native and also integrated it with @react-native-firebase
Happy Coding ❤
Top comments (3)
Top 👍🏼
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?
Please show me what is
navigateToProduct
function, how to use it.