Novu•4w ago

unseenCount not showing

Hello, I don't manage to get unseenCount value to display on the notification bell in my in-app notification bell. I used the example React code (see below). A red dot displays when there are unseen notifications (see screenshot attached), but the number of unseen notifications does not display in this red dot. I thought displaying unseenCount would be the default behavior, but even with tweaking I don't manage to display it. When I style the React components, the unseenBadge style and the unseenBadgeBackgroundColor and unseenBadgeColor props don't seem to have any effect on the components appearance (as the unseenBadge does not seem to display, anyway).

<NovuProvider subscriberId={subscriberId} applicationIdentifier={novuAppId}>
   <PopoverNotificationCenter>
     {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
   </PopoverNotificationCenter>
</NovuProvider>

5 Replies

Ask Inkeep•4w ago

Hi @mathbouq, I'm an AI assistant for Novu. While a team member reviews this question, I'll see if I can find relevant sources for your question. ----------------------------- While I generate an answer, here are some sources that might be helpful: * React Get Started * API Reference * Customizing Notification Center * React ----------------------------- Answer It appears that the issue you are encountering is related to the NotificationBell component not displaying the unseenCount value. Let's address this step-by-step: 1. Ensure unseenCount is Passed Correctly: You should make sure that unseenCount is correctly passed to the NotificationBell component. 2. Check for Bugs or Issues: There have been reported issues where NotificationBell ignores the unseenCount when the context is available (1) . This might be relevant to your case. 3. Update Package: If you are not using the latest version of the @novu/notification-center package, updating it might resolve the issue. It was noted in a previous bug report that updating the package to a newer version resolved similar issues (2) . 4. Use Custom Styles Correctly: Ensure that the custom styles and props such as unseenBadgeBackgroundColor and unseenBadgeColor are applied correctly. You might also want to verify if the colorScheme prop is used properly to support dark or light mode (3) (4) . 5. Example Code: Here is an example code snippet that demonstrates the correct setup:

Ask Inkeep•4w ago

import {
  NovuProvider,
  PopoverNotificationCenter,
  NotificationBell
} from "@novu/notification-center";

function App() {
  return (
    <NovuProvider
      subscriberId={"YOUR_SUBSCRIBER_ID"}
      applicationIdentifier={"YOUR_APPLICATION_IDENTIFIER"}
    >
      <PopoverNotificationCenter colorScheme="dark">
        {({ unseenCount }) => (
          <NotificationBell
            unseenCount={unseenCount}
            unseenBadgeBackgroundColor="red"
            unseenBadgeColor="white"
          />
        )}
      </PopoverNotificationCenter>
    </NovuProvider>
  );
}

export default App;

import {
  NovuProvider,
  PopoverNotificationCenter,
  NotificationBell
} from "@novu/notification-center";

function App() {
  return (
    <NovuProvider
      subscriberId={"YOUR_SUBSCRIBER_ID"}
      applicationIdentifier={"YOUR_APPLICATION_IDENTIFIER"}
    >
      <PopoverNotificationCenter colorScheme="dark">
        {({ unseenCount }) => (
          <NotificationBell
            unseenCount={unseenCount}
            unseenBadgeBackgroundColor="red"
            unseenBadgeColor="white"
          />
        )}
      </PopoverNotificationCenter>
    </NovuProvider>
  );
}

export default App;

(5) , (6) 6. Verify Context and State: If the issue persists, check if there is an underlying context or state management issue in your application. The unseenCount might not be updated correctly due to state management problems. 7. Known Issues: Refer to any known issues and discussions in the community or GitHub issues for potential fixes and workarounds (1) , (2) , (7) , (8) . If these steps do not resolve your issue, please provide more details or consider checking for updates and fixes in the latest versions of the package. If necessary, you can also explore the hooks like useNotifications and useFetchNotifications for more control over the notifications and unseen counts (3) , (7) .

Sources [1] [NV-2150] Bug Report: NotificationBell ignores unseenCount [2] [NV-1511] Bug Report: cannot update "unseenCount" in react component [3] Customizing Notification Center [4] API Reference [5] React Get Started [6] React [7] In-app notification: Unseen count for selected feeds [8] [NV-2154] Bug Report: useFeedUnseenCount shows total feed count

Ask Inkeep•4w ago

Got it. Tagging @Support for additional help.

mathbouq•4w ago

I didn't find a solution after checking all information provided by the AI. Here is the code I currently have in my React app:


    <NovuProvider subscriberId={subscriberId} applicationIdentifier={novuAppId}>
      <PopoverNotificationCenter colorScheme="dark">
      {({ unseenCount }) => (
          <NotificationBell
            unseenCount={unseenCount}
            unseenBadgeBackgroundColor="green"
            unseenBadgeColor="white"
          />
        )}
      </PopoverNotificationCenter>
    </NovuProvider>

I attach to this post: - a screenshot of the notification bell rendered with this code (1 unseen notification) - a screenshot of the props of the NotificationBell component As you can see: - the "green" unseenBadgeBackgroundColor prop is passed to the component, but the badge is rendered with the default gradient color - the unseenCount prop is passed to NotificationBell but it does not display in the badge on the bell

Pawan Jain•3w ago

@mathbouq checking this

Gaming

Programming

unseenCount not showing