I creating one demo project in React native android for customize notification functionality that I did with all the notifee functions but now I want to create one more functionality that I was suffering like if my application was on background or quit/kil mode and there is any notification are come from FCM or Postman API by the function of setBackgroundMessageHandler and displayNotifications then I can see notification count badge at the above at logo of my application that I can’t see right now I can just see that there is one blue kind of tick are come when notification are come so for the badge count what should I have to do?
index.js file:
/**
* @format
*/
import { AppRegistry, PermissionsAndroid } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import messaging from '@react-native-firebase/messaging';
import notifee, { AndroidStyle } from '@notifee/react-native';
import NotifeeBadgeCount from 'react-native-notifee-badge-count';
messaging().setBackgroundMessageHandler(async remoteMessage => {
console.log('setBackgroundMessageHandler: ', remoteMessage);
NotifeeBadgeCount.setBadgeCountAsync(1);
updateBadgeCount();
await displayBackGroundNotifications(remoteMessage);
});
// messaging().getInitialNotification(async remoteMessage => {
// console.log('messaging().getInitialNotification kill mode state REMOTEMESSAGE: ', remoteMessage);
// displayBackGroundNotifications(remoteMessage);
// });
async function updateBadgeCount() {
const count = await NotifeeBadgeCount.getBadgeCountAsync();
if (count === 0) {
NotifeeBadgeCount.setBadgeCountAsync(0);
} else {
NotifeeBadgeCount.setBadgeCountAsync(count + 1);
}
}
notifee.onBackgroundEvent(async ({ type, detail }) => {
// console.log('--------------------------------onBackgroundEvent', type, detail)
// const { notification, pressAction } = detail;
// if (type === EventType?.PRESS) {
// console.log('User pressed an action with the id: ', pressAction.id);
// navigation.navigate('Settings');
// }
});
const displayBackGroundNotifications = async (remoteMessage) => {
const channelId = await notifee.createChannel({
id: 'default',
name: 'Default Channel',
});
await notifee.displayNotification({
title: remoteMessage?.data.title || 'notifee default Title',
body: remoteMessage?.data.body || 'notifee default Body',
android: {
channelId,
// smallIcon: 'name-of-a-small-icon', // optional, defaults to 'ic_launcher'.
// pressAction is needed if you want the notification to open the app when pressed
pressAction: {
id: 'default',
},
color: '#4caf50',
actions: [
{
title: 'Reply',
icon: 'https://my-cdn.com/icons/reply.png',
pressAction: {
id: 'reply',
},
input: true, // enable free text input
},
{
title: 'Archive',
pressAction: {
id: 'Archive',
},
},
],
style: {
type: AndroidStyle.BIGPICTURE,
picture: 'https://w0.peakpx.com/wallpaper/636/801/HD-wallpaper-b-name-alphabet-logo-thumbnail.jpg',
}
},
});
}
AppRegistry.registerComponent(appName, () => App);
And it’s App.js file:
import React, { useEffect } from 'react';
import { StyleSheet, View, PermissionsAndroid, Platform, Text, Alert, TouchableOpacity } from 'react-native';
import { notificationListeners, requestUserPermission } from './src/utils/notificationsServices';
import { Route } from './src/Navigation/Route';
import messaging from '@react-native-firebase/messaging';
import notifee, { AndroidStyle } from '@notifee/react-native';
const App = () => {
useEffect(() => {
getDeviceToken();
const unsubscribeForeground = messaging().onMessage(async remoteMessage => {
console.log('onMessage from APP.JS REMOTEMESSAGE:', remoteMessage);
await displayForeGroundNotifications(remoteMessage);
});
return () => {
unsubscribeForeground();
};
}, []);
const getDeviceToken = async () => {
let token = await messaging().getToken();
console.log('getToken : ', token);
}
const displayForeGroundNotifications = async (remoteMessage) => {
const channelId = await notifee.createChannel({
id: 'default',
name: 'Default Channel',
});
await notifee.displayNotification({
title: remoteMessage?.data.title || 'notifee default Title',
body: remoteMessage?.data.body || 'notifee default Body',
android: {
channelId,
// smallIcon: 'name-of-a-small-icon', // optional, defaults to 'ic_launcher'.
// pressAction is needed if you want the notification to open the app when pressed
pressAction: {
id: 'default',
},
color: '#4caf50',
actions: [
{
title: 'Reply',
icon: 'https://my-cdn.com/icons/reply.png',
pressAction: {
id: 'reply',
},
input: true, // enable free text input
},
{
title: 'Archive',
pressAction: {
id: 'Archive',
},
},
],
style: {
type: AndroidStyle.BIGPICTURE,
picture: 'https://w0.peakpx.com/wallpaper/441/746/HD-wallpaper-f-name-alphabet-logo.jpg',
}
},
});
}
return (
<View>
<TouchableOpacity
style={{ width: '50%', height: 50, backgroundColor: 'black', justifyContent: 'center', alignItems: 'center' }}
onPress={() => displayForeGroundNotifications()}>
<Text style={{ color: 'white' }}> App </Text>
</TouchableOpacity>
</View>
);
};
export default App;
above I mentioned code files so as per that Give some solutions!..
2
Answers
If you are seeing the badge tick instead of badge count than this is related to the launcher settings. I was also facing this issue and when I tested my notifications on samsung device, there were badge counts instead of ticks.
I also faced this problem and challenged myself to find a solution
If there is anyone who has implemented Android badge as a react-native project, please tell me how to do it