grey square as icon notification android

[manuTro]

Hi!

my notification works fine on android and ios but in some android devices (motorola) instead of my app icon appear a grey square..
How I can fix it?

Thx

[fbazzana]

Same problem here. How can we fix it?

[wuppious]

This is probably related to #177

To fix this, you'll have to move the notification icon from the drawable folders to the mipmap folders. Hope this will help you.

[hannigand]

You need to:

• Create an asset that only uses white pixels, on a transparent background. It's important to not use any colour other than white.
• Your asset must be called ic_notification.png
• Your assets must be placed inside mipmap-* directories and not drawable-* (as @wuppious mentioned).

Your asset dimensions (in pixels):
mipmap-mdpi - 24x24
mipmap-hdpi - 36x36
mipmap-xhdpi - 48x48
mipmap-xxhdpi - 72x72
mipmap-xxxhdpi - 96x96

[Diego-F-Aguirre]

Looks like @wuppious was correct in having them in both folders as that seems to have solved my issue for notification icon images in android builds before 5.0 (Lollipop). Unfortunately though now android phones with version 5.0 (Lollipop) and higher now display a grey notification icon which is where @hannigand your suggestion works. Although I still needed them in the mipmap folder to get them so show up properly which is odd.

Has anyone found a solution for swapping icons based on the android version? I'm also noticing that even though I have the transparent ic_notification.png in both folders my app still ignores those files and uses the ic_launcher.png files instead.

Any further suggestions?

[wuppious]

My suggestion was to move the icons from drawable to mipmap, not include them in both directories. I have my icons working on all versions, so maybe having them in both folders breaks it for you?

[Diego-F-Aguirre]

Ah I misread my apologies. So I did as you suggest @wuppious but even though my ic_notification file is white on transparent the app uses the ic_launcher file instead of the ic_notification icon.

Making the ic_launcher file white on transparent png works but obviously that breaks my actual app icon, plus that's not the functionality I want as I want the ic_launcher image to have color.

[wuppious]

Looking at my own projects, I can safely say it shouldn't be an issue, since I have the icon in both folders. Would you mind sharing the code that creates the notification?

[Diego-F-Aguirre]

@wuppious, ok so just tested on two physical phones. They both default to using the ic_launcher as their notification icon but phones with version 7.0 actually displays the ic_launcher icon with color while phones with android version 8.0 display a grey icon.

    onNotification = (notification) => {
        if (!(notification && notification.data && (Toast && Toast.display && Toast.handle))) {
            return;
        }

        if (notification.data && notification.data.conversation_id) {
            const conversationId = notification.data.conversation_id;
            // See app/_shared/containers/toastContainer for an explanation of why we pass in an onPress object.
            this.getOnPress({ conversationId: conversationId })
                .then((onPress) => {
                    if (notification.foreground) {
                        Toast.display({
                            type: 'message',
                            props: {
                                avatarUrl: notification.data.avatar_url,
                                displayName: notification.data.display_name,
                                messageBody: notification.data.message,
                                messageType: _.startCase(notification.data.message_type)
                            },
                            ...onPress,
                            duration: 5000,
                            delay: 1000
                        });
                    } else if (onPress) {
                        Toast.handle(onPress);
                    }
                });
        } else if (notification.data && notification.data.screen) {
            const screen = notification.data.screen;
            const objectKey = notification.data.objectKey;
            const objectId = notification.data.objectId && parseInt(notification.data.objectId);
            const params = objectId && objectKey ? { [objectKey]: objectId } : null;
            const onPress = { onPress: { routeName: screen, params: params } };

            Toast.handle(onPress);
        } else {
            this.props.refresh();
        }
    }

[Diego-F-Aguirre]

And this is the code I'm using to initialize my notifications.

    initNotifications = () => {
        return new Promise(() => {
            PushNotification.configure({
                onRegister: (token) => {
                    this.postDeviceToken(token);
                    PushNotification.popInitialNotification((notification) => {
                        if (notification) { this.onNotification(notification); }
                    });
                },
                onNotification: (pushData) => {
                    this.onNotification(pushData);
                },
                senderID: config.fcmSenderId,
                popInitialNotification: true,
                requestPermissions: true
            });

            api.storage.set('@NotificationsEnabled', 'true');
            this.props.dispatch(setNotificationsAreEnabled(true));
            if (this.props.onRegisterCallback) {
                this.props.onRegisterCallback();
            } else {
                return;
            }
        });
    };

[wuppious]

Do you use this library for local notifications? When creating/scheduling a notification, you can specify the icon being used (smallIcon) to match the icon image. I can't really see why your icon isn't working, but for whatever reason it is defaulting to the ic_launcher. Maybe setting it explicitly to use ic_notification would help. Other than that I'm out of ideas.

[Diego-F-Aguirre]

Unfortunately no, I'm using it for remote notifications only at the moment. I'll keep on digging though, thanks for the help!

[akbokha]

@Diego-F-Aguirre Have you found a solution? I am experiencing the same issue when receiving remote notifications (local notifications display the right icon)

[illestrater]

I'm experiencing the same issue as @akbokha

Local notifications show my proper icon, remote notifications are not. I've tried almost every combination of icon placement in drawable and mipmap, and also setting the smallIcon field on the remote notification, all to no avail.

@Gp2mv3, any tips here?

[dgurns]

@hannigand 's suggestion solved it for me. (Moving the icons to the mipmap folders and calling them ic_notification.png)

This should probably be in the documentation somewhere if it isn't already.

[vitalyliber]

@hannigand thank you. I replaced icons and after reinstall an app it works!

[illestrater]

I've fixed it on my app by ensuring

<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@mipmap/ic_notification" />

using the image name 'ic_notification.png'

and also ensuring your GCM data has this property:

icon: 'ic_notification'

[rahulworld]

You have to follow some rules for notification icon link.
First, generate notification icons link of all sizes. and put the icon name ic_notification.
Then use put all sizes ic_notification in respective folder in resource mipmap folder and add line in AndroidManifest.xml file.
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@mipmap/ic_notification" />

[bobber205]

What are the rules you have to follow exactly for the notifications icon? The link you supplied is just general info for all icons re: Material Design.

[rahulworld]

Hi @bobber205,
Yes, Make sure notification icon is of the PNG file format with a transparent background.
Thanks

[adityamohta]

still not working :/

[attitude]

My case was a little bit contra intuitive. I assumed the default_notification_icon would also work for the local background notifications but it doesn't.

The default notification icon defined in AndroidManifest.xml is used when no icon is set for incoming notification messages. Incoming, as far as I understand only stand for the remote push notifications, not the local scheduled background notifications.

In our case we had to add Android specific call to the notification.setSmallIcon('ic_notification').

Example:

  const notification = new firebase.notifications.Notification()
    .android.setChannelId('...')
    .android.setSmallIcon('ic_notification')

If you named your icon differently than ic_notification, change the string according for your case.

Hope it helps someone else.

[LPitonakova]

So I've been using the wix react-native-notifications library to display my notifications. Turns out they chose to write custom code to completely override whatever you set in your metadata!

I discovered this by searching for Notification.Builder in the whole project. There is a piece of code that looks explicitly for a file in drawable/ called notification_icon.

So the solution is to create 1 icon which is transparent + white color and put it in as drawable/notification_icon.png

I can't believe somebody would write a confusing piece of code like this but that's the horrors of open source for you :/

[allinelara]

I flowed the orientation of @hannigand and I could fix the grey square.

But now I have a blue small icon in my notification. In the status bar the icon is white.

Does someone know how to set the color of the small icon in the notification?

I have in my Manisfest:

<meta-data android:name="com.dieam.reactnativepushnotification.notification_color" android:resource="@android:color/white"/>

My icon is a white logo with a background transparent and I have inside mipmap folder with ic_notification.png name.

[github4es]

for the record, the color has to be defined in:
android/app/src/main/res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="myBlue">#1B457E</color>
</resources>

Then the icon will be colored with the myBlue color. Hope it helps someone.

[Nsingh0007]

Try this one.
It worked for me.......
https://clevertap.com/blog/fixing-notification-icon-for-android-lollipop-and-above/

[magixus]

for react-native user, like @hannigand said , ic_launcher.png or ic_notification.png should be in this path :

android/app/src/main/res/mipmap-*

[matt-uib]

I also had this grey square for a vector notification icon - not .png, but .xml - but the type might not be important for what i found:

The reason in my case was, that i needed to change the NotificationImportance to play no sound when notifying and therefore i needed to use a new notification channel.
But now on the new channel the icon did not work any more....

After some trial and error i found out, that actually the name of the icon was the problem - i seems to be occupied forever for the old channel i used earlier.
So after renaming my notification icon and setting the renamed one to the new channel it finally worked again.
Maybe that helps somebody...

[xesf]

You need to:

• Create an asset that only uses white pixels, on a transparent background. It's important to not use any colour other than white.
• Your asset must be called ic_notification.png
• Your assets must be placed inside mipmap-* directories and not drawable-* (as @wuppious mentioned).

Your asset dimensions (in pixels):
mipmap-mdpi - 24x24
mipmap-hdpi - 36x36
mipmap-xhdpi - 48x48
mipmap-xxhdpi - 72x72
mipmap-xxxhdpi - 96x96

This was the only thing that made it to work.
By default, when you create the ic_notifications using the Android Studio Image Asset, it create the images as 'drawable' but instead you need to change them to 'mipmap' as mention above.

[jeffreybenabou]

You need to:

• Create an asset that only uses white pixels, on a transparent background. It's important to not use any colour other than white.
• Your asset must be called ic_notification.png
• Your assets must be placed inside mipmap-* directories and not drawable-* (as @wuppious mentioned).

Your asset dimensions (in pixels): mipmap-mdpi - 24x24 mipmap-hdpi - 36x36 mipmap-xhdpi - 48x48 mipmap-xxhdpi - 72x72 mipmap-xxxhdpi - 96x96

Thank you a lot, the notification name make it work for me (i call it notifications- did not work at start), blass you !!!

[FelixMo42]

Even if your not using firebase messaging you still need to add a resource file so that it gets included in the apk.

<application>
      ...
      <meta-data android:name="some-random-name" android:resource="@mipmap/ic_notification" />

[yurachumak]

So I've been using the wix react-native-notifications library to display my notifications. Turns out they chose to write custom code to completely override whatever you set in your metadata!

I discovered this by searching for Notification.Builder in the whole project. There is a piece of code that looks explicitly for a file in drawable/ called notification_icon.

So the solution is to create 1 icon which is transparent + white color and put it in as drawable/notification_icon.png

I can't believe somebody would write a confusing piece of code like this but that's the horrors of open source for you :/

Thank you a lot! It's solved my issue. Had a grey icon for received notifications when app was active. Firebase "com.google.firebase.messaging.default_notification_icon" fixed the grey icon only for notifications that I received when app was not active

[RiddhiBelani]

@hannigand 's suggestion solved it for me. (Moving the icons to the mipmap folders and calling them ic_notification.png)

This should probably be in the documentation somewhere if it isn't already.

Still getting same grey and white icon

[MishaPadalka]

I had the same issue, but the solution for me was to place

  <meta-data  android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@mipmap/notification_icon" />

under the

<application/>

tag in AndroidManifest.xml