Can't get realtime notifications/updates to work using React package

I have been integrating MagicBell into our product using the React package and following along with the readme at https://www.npmjs.com/package/@magicbell/magicbell-react. It has been easy to integrate so far and the API is well documented. :grinning:

The issue I am running into is that the notification bell/popup content is not updating until I click the bell and close the notification popup (so I only see the unread notification count when I open and then close the popup once). This also seems to cause no browser notifications to appear as well. Pretty much any UI update in MagicBell either needs me to close/reopen the popup or reload the page. Is there something else that I need to do besides:

<MagicBell apiKey={MAGICBELL_API_KEY} userEmail="john@example.com">
  {() => <NotificationInbox height={300} />}
</MagicBell>

to get the realtime updating working?

I am using version 7.1.1, with easy-peasy and redux as well if that helps.

1 Like

Hi fmeyer! We were very encouraged by your comments!

Realtime updates work out of the box, does it also happen with the FloatingNotificationInbox component?

import MagicBell, { FloatingNotificationInbox } from "@magicbell/magicbell-react";

<MagicBell apiKey={MAGICBELL_API_KEY} userEmail="john@example.com">
  {(props) => <FloatingNotificationInbox height={300} {...props} />}
</MagicBell>

Sorry I linked the wrong code snippet, I am setting the props in the FloatingNotificationInbox component but UI updates don’t seem to happen until I click something in the UI (sometimes it will update when I click other parts of the app outside of magicbell)

<MagicBell
  apiKey={process.env.REACT_APP_MAGICBELL_API_KEY || ""}
  userEmail={email}
  userKey={magicBellHmac}
  theme={magicBellTheme}
  images={{
    emptyInboxUrl: "/empty_inbox.png"
  }}
  bellCounter="unread"
>
  {props => <FloatingNotificationInbox height={600} {...props} />}
</MagicBell>

@fmeyer Thanks for the kind words and for sending over the bug report. I understand that you already setup a call with our team to figure this out. Have a great weekend!

I created a code sandbox illustrating the issue I am running into: MagicBell-React Example (forked) - CodeSandbox

It seems that once mobx is added as a dependency real-time updating no longer works (the first time clicking the bell icon, the popup will be empty)

I got MagicBell 7.4.1 working with mobx 6.0.2 and I had to downgrade our redoc version to 2.0.0-rc.46 to ensure that there were no package issues. Everything seems to be working correctly now!

Is there any plan to support newer mobx versions (since we will not be able to upgrade the redoc version beyond 2.0.0-rc.46 without an update to mobx)?

@fmeyer Thanks for the update. Yes, we are going to upgrade Mobx very soon.