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:
Define the Accent Color:
Open your Android project in Android Studio.
Navigate to the
values
directory (usuallyapp/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 } });