React-native-firebase: Notification icon is not showing in android 8.0 and and above

[ghost]

Hi,
I am using 'react-native-firebase' for FCM. Android version below 8.0 the push notification icon is working fine, but android version 8.0 and above the empty push notification icon is displaying.
Can u guys please help me to fix this issue.

 firebase.messaging().onMessage((message) => {
        // Process your message as required


        if (Platform.OS === Constants.ANDROID) {
            const localNotification = new firebase.notifications.Notification()
                .setNotificationId(message.messageId)
                .setTitle(JSON.parse(message.data.custom_notification).title)
                .setBody(JSON.parse(message.data.custom_notification).body)
                .android.setChannelId('fetchh-channel') // e.g. the id you chose above
                .android.setSmallIcon('R.mipmap.ic_launcher') // create this icon in Android Studio
                .android.setPriority(firebase.notifications.Android.Priority.High);

            firebase.notifications()
                .displayNotification(localNotification)
                .catch(err => console.error(err));

            if (JSON.parse(message.data.custom_notification).title === Constants.SECURITY_ALERT) {
                this.props.navigation.navigate('SignOut');
            }
        }
    });

[eladglobalbit]

do u can post your Android Manifest.xml?
I think the problem is there and u not set value for your chanel

[ghost]

Hi,
Here is my AndroidMainfest.xml
xmlns:tools="http://schemas.android.com/tools"
android:versionCode="15"
android:versionName="1.0.9">

<uses-permission android:name="android.permission.INTERNET" />

android:name="android.permission.READ_PHONE_STATE"
tools:node="remove" />

android:minSdkVersion="16"
android:targetSdkVersion="26" />

<application
  android:name=".MainApplication"
  android:allowBackup="true"
  android:icon="@mipmap/ic_launcher"
  android:label="@string/app_name"      
  android:theme="@style/AppTheme">
   <service android:name="io.invertase.firebase.messaging.RNFirebaseMessagingService">
        <intent-filter>
            <action android:name="com.google.firebase.MESSAGING_EVENT" />
        </intent-filter>
    </service>
    <service android:name="io.invertase.firebase.messaging.RNFirebaseInstanceIdService">
        <intent-filter>
            <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
        </intent-filter>
    </service>
    <service android:name="io.invertase.firebase.messaging.RNFirebaseBackgroundMessagingService" />
   <meta-data
  android:name="com.google.android.geo.API_KEY"
  <activity
    android:name=".MainActivity"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:label="@string/app_name"
        android:screenOrientation="portrait"
        android:windowSoftInputMode="adjustPan"
        android:launchMode="singleTop">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
  <meta-data
        android:name="com.google.firebase.messaging.default_notification_icon"
        android:resource="@mipmap/ic_launcher" />

    <meta-data
        android:name="com.google.firebandroid.permission.SYSTEM_ALERT_WINDOWase.messaging.default_notification_channel_id"
        android:value="fetchh-channel"/>

</application>

[eladglobalbit]

https://github.com/invertase/react-native-firebase/issues/1781 u can see my and compare :)

[iadcg]

@BabuAjith Hey bro. How is it going in your side now? Have you found the cause and fixed it?

[stale[bot]]

Hello 👋, this issue has been automatically marked as stale because it has not had activity for quite some time. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. Thank you for your contributions.

[fachrihawari]

@iadcg @BabuAjith hey guys, i got same problem. Are you have a solution ?

[charliejeppsson]

@fachrihawari also tried reusing @mipmap/ic_launcher for the notification icon unsuccessfully. The solution was to instead use https://romannurik.github.io/AndroidAssetStudio/icons-notification.html to generate separate notification icon files and then adding each to the android/app/src/main/res/mipmap-hdpi, mipmap-mdpi etc directories

[fachrihawari]

@charliejeppsson for android > v7.0 icon must be transparent. Before I use non transparent icon, and solved after change to transparent icon

[LaVielle]

A combination of these answers fixed the problem for me:
https://stackoverflow.com/a/45318726/9957187
https://stackoverflow.com/a/40232181/9957187

I have to create transparent icons (basically a white silhouette of the logo on the normal icon, with a transparent background). I called those icons ic_stat_ic_notification.png and placed them in the mipmap folders.

Then I added these lines to AndroidManifest.xml:
The first is to set the default notification icon
The second is to set the background color of the circle surrounding the icon

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

[stale[bot]]

Hello 👋, this issue has been automatically marked as stale because it has not had activity for quite some time. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this is still present in the latest release, please feel free to create a new issue with up-to-date information.

[perlics]

You probably need a transparent notification icon. What I think happens is you have a background and Android colors your icon depending on the theme. Just make it transparent and it will be ok.

[IamWinWon]

My problem was MIUI os...it is their bug...

[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 :/

[sumitrahate]

can any body help me , i am having the same issue notification icon showing in gray background, i have added transparent background icon but still not fix for me

[mikehardy]

@sumitrahate no one will be able to help I am afraid, it will be a project-specific issue. You can create a super-tiny throwaway react-native app and just using snippets from StackOverflow have it throw up a notification to replicate and poke around until you get the icon references correct etc.