skip to Main Content

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


  1. 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.

    Login or Signup to reply.
  2. I also faced this problem and challenged myself to find a solution

    1. I’ve found an Android badge library dedicated to react-native, but it’s coming out as a library that’s currently unavailable
    2. I tried to solve it with the Android module, but I tried to apply it, but I don’t know if it’s my problem, but I haven’t solved it yet.

    If there is anyone who has implemented Android badge as a react-native project, please tell me how to do it

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search