Search code examples
androidreact-nativepush-notificationreact-native-push-notification

How to change react native push notifications status bar icon?

I am using firebase and react-native-push-notification to push notifications to my Android app and struggling to change the small notification icon with my own icon and none of the threads about this topic seems to help. I have the ic_test.png located in my @mipmap folder and none of these metadata declarations in my Android manifest work:

1. xml <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/ic_test" />

2. xml <meta-data android:name="com.dieam.reactnativepushnotification.notification_icon" android:resource="@mipmap/ic_test" />

I am however able to change the color of the icon by adding metadata:

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

Situation:

enter image description here

enter image description here

Any ideas what I might be doing wrong here?

EDIT:

Got it working for local notifications by not setting any icon metadata resource in the manifest. I just set the following metadata resource

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

to change the background color of the icon.

Also, set the following key-value pair

PushNotification.localNotification({...parameters, smallIcon: 'ic_test'});

When triggering a local notification.

EDIT:

I am using Firebase Cloud Messaging legacy HTTP protocol and setting the icon parameter to "ic_test" does not seem to do the trick also.

Solution

  • Actually, it is showed like a white blank square because you are in the development mode, by building in production mode you can see the like exactly like your app icon.

    How ever, if you wanna make your icon you sould follow material principles. then generate all sizes by using this link and put the icon name ic_notification.

    Then put all sizes ic_notification in the following address:

    android/app/main/res/mipmap

    And add the following line to the AndroidManifest.xml file:

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

    Clean build folder, clean caches files and use yarn start --reset-cache and then yarn android.

    Hint: if you are using emulator, aware of using Cold Boot instead of Quick Boot in your Emulator advance option.