const queryClient = new QueryClient();
const Root = (props) => {
const { hasNotifPermission, requestNotifPermission } = useNotificationsPermission();
useEffect(() => {
LogBox.ignoreAllLogs();
LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
}, []);
useEffect(() => {
const notifPerInit = async () => {
await requestNotificationPermission();
};
notifPerInit();
messaging().onNotificationOpenedApp((remoteMessage) => {
console.log(
'Notification caused app to open from background state:',
remoteMessage
);
handleIncomingNotif(remoteMessage.data);
});
messaging().setBackgroundMessageHandler(async (remoteMessage) => {
console.log('Message handled in the background!', remoteMessage);
handleIncomingNotif(remoteMessage.data);
});
messaging()
.getInitialNotification()
.then((remoteMessage) => {
if (remoteMessage) {
console.log(
'Notification caused app to open from quit state:',
remoteMessage
);
handleIncomingNotif(remoteMessage.data);
}
});
messaging().onMessage(async (remoteMessage) => {
if (remoteMessage) {
console.log('Notification received in foreground:', remoteMessage);
const channelId = await notifee.createChannel({
id:
remoteMessage.data.title === 'Payment Received'
? 'gpi_347d77s7ssdsd'
: 'gpi_347d77s7sfqq',
name:
remoteMessage.data.title === 'Payment Received'
? 'Go Pin It PR'
: 'Go Pin It App',
sound:
remoteMessage.data.title === 'Payment Received'
? remoteMessage.data.sound
: 'default',
});
await notifee.displayNotification({
title: remoteMessage.notification.title,
body: remoteMessage.notification.body,
data: remoteMessage.data,
android: {
channelId,
sound:
remoteMessage.data.title === 'Payment Received'
? remoteMessage.data.sound
: 'default',
smallIcon: 'ic_launcher',
largeIcon: 'ic_launcher',
pressAction: {
id: 'default',
},
},
});
notifee.onBackgroundEvent(async ({ type, detail }) => {
if (type === EventType.PRESS) {
handleIncomingNotif(detail.notification.data);
}
});
notifee.onForegroundEvent(async ({ type, detail }) => {
if (type === EventType.PRESS) {
handleIncomingNotif(detail.notification.data);
}
});
}
});
}, []);
const handleIncomingNotif = (item) => {
console.log('HANDLE NOTIF', item);
if (parseInt(item.notificationType, 10) === 1) {
Navigator.navigate('Messaging', {
routeData: { ...item, id: item.targetId },
});
} else if (parseInt(item.notificationType, 10) === 0) {
Navigator.navigate('OrderDetails', {
data: {
...item,
id: item.targetId,
providerId: item.providerId,
},
});
}
};
async function requestNotificationPermission() {
if (Platform.OS === 'ios') {
await requestNotifPermissionIOS();
} else if (Platform.OS === 'android') {
await requestNotifPermissionANDROID();
}
}
async function requestNotifPermissionIOS() {
await messaging().requestPermission();
}
async function requestNotifPermissionANDROID() {
const authStatus = await hasNotifPermission();
if (!authStatus) {
requestNotificationPermission();
}
}
};
export default Root;
I’m trying to build an app with React Native where I need to send the notification with some custom notification sound. The Notifee shows notifications and custom sound in the foreground, but it plays default sound in the background and kill mode. I want to custom in all modes. This is my root index.js
New contributor
Awais is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.