How to change Notification Icon in React Native android

Getting white block error while sending Notification

The one of the most common error your will face while attaching the android icon is the use of colored icon, you will get the white block and if you don't right icon size app will crash.
What can be done,
step 1 : use https://romannurik.github.io/AndroidAssetStudio/icons-notification#source.space.trim=1&source.space.pad=0&name=ic_stat_example this link to generate icon
download and extract

step 2: put the generated icon in the following location
android> app> src> main > res
you will see folders like drawable, drawable-hdpi, drawable-xhdpi and so on, these are different sizes, either , cut and replace or put respective icons one by one into the folder from the folder you just downloaded

step 3: setting values and color

go to manifest.xml
<meta-data android:name="com.yourandroidapp.smallicon" android:resource="@drawable/push_icon" />

or if you are using firebase
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/notification_icon" />

Demo-App/android/android/app/src/main/java/com/demoapp/MainApplication.java

### changing accent color
To add an accent color to your notification icon in a React Native application for Android, you need to make modifications in your Android project files, not directly in your React Native JavaScript code. Here are the steps to follow:

  1. Define the Accent Color:

    • Open your Android project in Android Studio.

    • Navigate to the values directory (usually app/src/main/res/values).

    • Open the colors.xml file. If it doesn’t exist, create it.

    • Define a new color by adding a <color> element. For example:

        xmlCopy code<color name="notification_accent">#FF5722</color>
      
        @Override
        public void onMessageReceived(RemoteMessage remoteMessage) {
            // Assuming CHANNEL_ID is already created
            NotificationCompat.Builder builder = new NotificationCompat.Builder(this, CHANNEL_ID)
                .setSmallIcon(R.drawable.ic_notification)
                .setContentTitle(remoteMessage.getNotification().getTitle())
                .setContentText(remoteMessage.getNotification().getBody())
                .setColor(ContextCompat.getColor(this, R.color.notification_accent_color))
                .setPriority(NotificationCompat.PRIORITY_DEFAULT);
      
            // Show the notification
            NotificationManager notificationManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);
            notificationManager.notify(notificationId, builder.build());
        }
      

optional: if you are using Notifee

    notifee.displayNotification({ ...message.notification,
     data: message.data,
     android: { channelId: 'default', smallIcon: 
    'notification_icon', color: '#9c27b0', // Hexadecimal color value } });