Badge plugin for capacitor

Im using Ionic React and Capacitor. I have push notifications working which is good, and the badge count reflects any new notifications received by the device. However, I want to clear the App badge when user enters the App. I couldn’t find a Capacitor plugin for this, so tried to use the react native Badge plugin, but when installing:
ionic cordova plugin add cordova-plugin-badge
I get error message:
Cordova is not supported for react projects

Not sure how to fix my problem. I thought capacitor would have this plugin covered as must be a popular request. But im probably missing a trick.

Is there another way to reset the badge. Any ideas would be greatly appreciated.


1 Like

A plugin is not needed for this simple feature. Ionic 4 provides this already. Good luck!

I think the op wants the badge on the app icon, not within the app

At least that is the function of the mentioned plugin

Im referring to the badge on the App icon. It’s independent of the link you provided, just happens to use the same name. Cheers

If you’re using Push API in Capacitor you can just call removeAllDeliveredNotifications

Or use and the setBadgeCount or clearBadgeCount methods.

Thanks very much, this is what I needed.

If anyone else needs this solution … as @mikeroberts suggested, I simply called
in the appropriate place within my Ionic React App.

1 Like

hi, are you able to make it working? im getting ‘empty’ FancyNotification after import:

import { Plugins } from '@capacitor/core';
const { FancyNotifications } = Plugins;

@pe1 I stumbled across the same issue but it’s easy to solve.

In order to let capacitor in android know about the plugin, you’ll have to add some code to your apps

In the end, your activity should look something like this:

package com.app_id.replaceme;

import android.os.Bundle;

import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;

import com.github.triniwiz.capacitor.notifications.FancyNotifications; // << Part 1

import java.util.ArrayList;

public class MainActivity extends BridgeActivity {
  public void onCreate(Bundle savedInstanceState) {

    // Initializes the Bridge
    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
      add(FancyNotifications.class); // << Part 2

1 Like

hi flipace, i have added these lines to and now it works fine, its my first capacitor plugin working :slight_smile:

Can I ask what documentation you used for push notifications? Was it this?

I ask because it refers to Angular but looks like it could be adapted. Before I head down that road, I’d love to know it’ll work.

If not, can you point me in the right direction? I’m also looking at pure React implementations, but am worried what will happen when I build.


Hi @Arains, yeah thats the documentation I used. Only tried for iOS so far but works fine. The only thing I would recommend additionally if you want to target a specific user device is the following plugin

The reason being, this provides you with the FCM token instead of the APN token returned by Capacitor, which can then be used to send push notifications to a specific device
Hope it helps.

Probably a stupid question - since IOS 13.3 not getting badge notifications (though push are working fine). Is this a straightforward plugin or is it an issue with IOS 13.3?

Hi @Jim1988 I have IOS 14.1 and facing this issue. Did you get it resolved somehow?

There’s now a capacitor proposal to add a badge plugin, and a community plugin here. Only works for capacitor 3+.