Amplify doesn't display custom icons for Push Notifications

[antonymon]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React Native

Amplify APIs

Push Notifications

Amplify Categories

notifications

Environment information

# Put output below this line
npm run android

Describe the bug

I have been trying to add a custom icon for Push Notifications in Amplify, but I'm facing some difficulties. I have attempted to add the icon in the drawable-* and minimap-* folders, and I even used the icons generated from the Android Asset Studio (http://romannurik.github.io/AndroidAssetStudio/icons-notification.html#source.type=clipart&source.clipart=ac_unit&source.space.trim=1&source.space.pad=0&name=ic_stat_onesignal_default) to confirm that the issue is not with my icons.

Example: How to Add Default Icons
I followed the guide: https://docs.amplify.aws/lib/push-notifications/getting-started/q/platform/react-native/

In the JSON configuration, I included the following line:

"IconReference": "ic_notification"

However, the custom icon is not being displayed. I also tried passing a URL in ImageIconUrl, but it didn't work either. I have followed various Firebase guides and attempted to include the icon in the AndroidManifest.xml, but the result is always the same: it shows a small Android icon, which I assume is the default one.

Steps to Reproduce:

• Add custom icon files to drawable-* and minimap-* folders.
• Update the IconReference property in the JSON configuration.
• Attempt to display a Push Notification with the custom icon.

Actual Behavior:
The Push Notification always shows a small default Android icon.

Additional Information:

• I have tried multiple solutions and followed various guides, but none of them have resolved the issue.
• I have confirmed that the custom icon files are correctly placed in the appropriate folders.
• I have also tried passing a URL for the icon, but it didn't work either.
• Please let me know if there's any additional information or steps I can provide to help resolve this issue.

Thank you!

Expected behavior

The Push Notification should display the custom icon specified in the configuration.

Reproduction steps

• Add custom icon files to drawable-* and minimap-* folders.
• Update the IconReference property in the JSON configuration.
• Attempt to display a Push Notification with the custom icon.

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line

aws-exports.js

const awsmobile = {
  aws_project_region: "region",
  aws_cognito_identity_pool_id: "region:xxxxxx",
  aws_cognito_region: "region",
  oauth: {},
  aws_cognito_username_attributes: [],
  aws_cognito_social_providers: [],
  aws_cognito_signup_attributes: [],
  aws_cognito_mfa_types: [],
  aws_cognito_password_protection_settings: {
    passwordPolicyCharacters: [],
  },
  aws_cognito_verification_mechanisms: [],
  aws_mobile_analytics_app_id: "xxxxx",
  aws_mobile_analytics_app_region: "region",
  Analytics: {
    AWSPinpoint: {
      appId: "xxxxx",
      region: "region",
    },
  },
  Notifications: {
    Push: {
      AWSPinpoint: {
        appId: "xxxxx",
        region: "region",
      },
    },
  },
}

export default awsmobile

Manual configuration

No response

Additional configuration

Add for support:

<uses-sdk
    tools:overrideLibrary="com.amplifyframework.pushnotifications.pinpoint.common, com.amplifyframework.annotations, com.amplifyframework.common.core" />

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

The first icon:

[jayjo34]

Hello @asmonterroso,

Why did you close the Issue? I do have the same problem, did you solved it? Thx in advance!

[antonymon]

Hi @jayjo34,

I didn't get help, but I found a solution at https://github.com/aws-amplify/aws-sdk-android/issues/941 check it if it helps you.

But there are still problems to customize the icon and sound, I have searched many places and it is very difficult to find support for Amplify

[jayjo34]

@asmonterroso thank you!
I will check if this xml file will fix it, I already tried alot of things. I really like pinpoint, but the aws-amplify docs are very confusing and incomplete.

[minotogna]

Hi @asmonterroso did you find a solution to customize the icon on android ?
I have the same problem
Thank you

[jayjo34]

@minotogna , @asmonterroso : I found a temporary workaround, here are the steps I did:

1. Create a Custom Class inside /node_modules/@aws-amplify/rtn-push-notification/android/src/main/kotlin/com/amazonaws/amplify/rtnpushnotification/, which will be used as a clone for the compiled aws package : com.amplifyframework.pushnotifications.pinpoint.PushNotificationsUtils, I've named it CustomPushNotificationsUtils.kt.
2. clone the original content from com.amplifyframework.pushnotifications.pinpoint.PushNotificationsUtilsClass into the newly created one, rename the cloned Class and resolve all errors which your IDE is showing you. (e.g. @OptIn(InternalAmplifyApi::class)) ( I've used Android Studio for this, just use the "go to definition" function and find the definition of import com.amplifyframework.pushnotifications.pinpoint.PushNotificationsUtils.)
3. Now, you need to change the usage of PushNotificationsUtilsto CustomPushNotificationsUtils in /node_modules/@aws-amplify/rtn-push-notification/android/src/main/kotlin/com/amazonaws/amplify/rtnpushnotification/PushNotificationAWSPinpointUtils.kt :

• change import com.amplifyframework.pushnotifications.pinpoint.PushNotificationsUtils to import com.amplifyframework.pushnotifications.pinpoint.CustomPushNotificationsUtils
• Line 40 : private val utils = PushNotificationsUtils(context) to private val utils = CustomPushNotificationsUtils(context)

4. Now, you can customize the notification as you want , for example (CustomPushNotificationsUtils.kt) :

builder.apply {
              setContentTitle(payload.title)
              setContentText(payload.body)
              setSmallIcon(R.drawable.ic_notification) //set custom vector graphic with Android Studio
              setColor(Color.parseColor("#000000")) // set custom color
              setContentIntent(pendingIntent)
              setPriority(NotificationCompat.PRIORITY_DEFAULT)
              setLargeIcon(largeImageIcon)
              setAutoCancel(true)
           }

5. optional : create a patch with patch-package

NOTE:

• Be aware that this is a workaround which could change with the next update of @aws-amplify

[minotogna]

@minotogna , @asmonterroso : I found a temporary workaround, here are the steps I did:

1. Create a Custom Class inside /node_modules/@aws-amplify/rtn-push-notification/android/src/main/kotlin/com/amazonaws/amplify/rtnpushnotification/, which will be used as a clone for the compiled aws package : com.amplifyframework.pushnotifications.pinpoint.PushNotificationsUtils, I've named it CustomPushNotificationsUtils.kt.
2. clone the original content from com.amplifyframework.pushnotifications.pinpoint.PushNotificationsUtilsClass into the newly created one, rename the cloned Class and resolve all errors which your IDE is showing you. (e.g. @OptIn(InternalAmplifyApi::class)) ( I've used Android Studio for this, just use the "go to definition" function and find the definition of import com.amplifyframework.pushnotifications.pinpoint.PushNotificationsUtils.)
3. Now, you need to change the usage of PushNotificationsUtilsto CustomPushNotificationsUtils in /node_modules/@aws-amplify/rtn-push-notification/android/src/main/kotlin/com/amazonaws/amplify/rtnpushnotification/PushNotificationAWSPinpointUtils.kt :

• change import com.amplifyframework.pushnotifications.pinpoint.PushNotificationsUtils to import com.amplifyframework.pushnotifications.pinpoint.CustomPushNotificationsUtils
• Line 40 : private val utils = PushNotificationsUtils(context) to private val utils = CustomPushNotificationsUtils(context)

4. Now, you can customize the notification as you want , for example (CustomPushNotificationsUtils.kt) :

builder.apply {
              setContentTitle(payload.title)
              setContentText(payload.body)
              setSmallIcon(R.drawable.ic_notification) //set custom vector graphic with Android Studio
              setColor(Color.parseColor("#000000")) // set custom color
              setContentIntent(pendingIntent)
              setPriority(NotificationCompat.PRIORITY_DEFAULT)
              setLargeIcon(largeImageIcon)
              setAutoCancel(true)
           }

5. optional : create a patch with patch-package

NOTE:

• Be aware that this is a workaround which could change with the next update of @aws-amplify

Thanks a lot @jayjo34 ! You made my day 😄 I will give it a try next week .

but does it mean there’s a bug from amplify side ? In case we should then reopen this issue to let find a permanent solution to this ?
What are your thoughts?

thank you🌞

[jayjo34]

@minotogna I think it is not a bug, rather a unrecognized feature. Actually, this involves two repos. To create a pull request somebody needs to integrate a possibility to change the notification parameters within React-Native. I currently don't have time to wrap around this PR. But a reopening should be at least useful.

[jayjo34]

@minotogna #12004

[minotogna]

@minotogna #12004

Thank you @jayjo34 ! I’ll follow this issue .

[khanhpoeta]

I have a solution without change code in node_module
use ic_launcher_foreground.xml like a custom notification icon
use ic_launcher.xml in mipmap-anydpi to define icon launcher
in ic_launcher.xml we can define the app icon that don't use ic_launcher_foreground.xml in drawable

eg: this is my ic_launcher.xml

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@mipmap/ic_launcher_foreground" />
    <monochrome android:drawable="@mipmap/ic_launcher_monochrome" />
</adaptive-icon>

[HemangiVekaria]

I have a solution without change code in node_module use ic_launcher_foreground.xml like a custom notification icon use ic_launcher.xml in mipmap-anydpi to define icon launcher in ic_launcher.xml we can define the app icon that don't use ic_launcher_foreground.xml in drawable

eg: this is my ic_launcher.xml

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@mipmap/ic_launcher_foreground" />
    <monochrome android:drawable="@mipmap/ic_launcher_monochrome" />
</adaptive-icon>

Hello @khanhpoeta Can you please explain. In my react-native app i am using "@aws-amplify/rtn-push-notification": "^1.2.31", this and in my android code i already have all launcher icons in mipmap folder. When i get notification it shows android icon only. I want to show my icons in notification.

from library

in this code the icon is android. What to do to show our app icon in notification?