Amplify doesn't display custom icons for Push Notifications

asmonterroso commented 12 months ago

Before opening, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[X] I have read the guide for submitting bug reports.
[X] 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 commented 10 months ago

Hello @asmonterroso,

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

asmonterroso commented 10 months ago

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 commented 10 months ago

@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 commented 9 months ago

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

jayjo34 commented 9 months ago

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

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.
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.)
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)

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)
        }

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 commented 9 months ago

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

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.

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.)

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)

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)
           }
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 commented 9 months ago

@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 commented 9 months ago

@minotogna https://github.com/aws-amplify/amplify-js/issues/12004

minotogna commented 9 months ago

@minotogna #12004

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

khanhpoeta commented 3 months ago

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>

aws-amplify / amplify-js