How to Display a Colored Icon in Notifications Using Notifee in React Native?

I’m developing a React Native application and using the Notifee library for handling notifications. I can successfully display a white icon in my notifications and set a background color, but I want to show a colored icon instead.

Here’s what I’ve done so far:

I’ve created a white icon for the notification (small icon) and placed it in the drawable directory as ic_notification_small.png.
I have also created a colored icon (app_icon_round.png) for the large icon and placed it in the drawable directory.
I’ve set the notification like this:

import notifee from '@notifee/react-native';

async function onDisplayNotification() {
  const channelId = await notifee.createChannel({
    id: 'default',
    name: 'Default Channel',
  });

  await notifee.displayNotification({
    title: 'Notification Title',
    body: 'Main body content of the notification',
    android: {
      channelId,
      smallIcon: 'ic_notification_small', // White icon for small icon
      largeIcon: 'app_icon_round', // Colored icon for large icon
    },
  });
}

Issue:
When I trigger the notification, the small icon shows correctly, but the large icon does not appear. It seems like it defaults to a black and white version instead of showing my colored icon.

Additional Information:
I’ve verified that the icons are correctly placed in the drawable folders.
I’ve also tried referencing the large icon in various formats, such as mipmap/app_icon_round, but it still does not display as expected.

Questions:
How can I ensure that a colored icon is displayed in the notification when using the Notifee library in my React Native application? Is there a specific format or configuration I need to follow to achieve this?
If a colored icon cannot be displayed, can I at least have a colored icon as the largeIcon?
Any help or guidance would be greatly appreciated!

You need to sign in to view this answers