Images are missing in PushNotification send by AWS Amplify to React-Native App

Question

I've had an annoying problem with my app for days. It is a React Native App for Android and iOS. The app receives push notifications, which are sent via the Pinpoint API using a lambda function. Almost everything works as desired, except the design of the push notifications. I followed the Amplify instructions to set up the app: https://aws-amplify.github.io/docs/js/push-notifications. If I send a message directly from Pinpoint to my app, I have the possibility to attach Media Urls (pictures), which should be displayed as I understood it in the Push Notification. But they won't... Could anyone PLEASE help me with my problem?

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.notificationapp">

    <uses-permission android:name="android.permission.INTERNET"/>

    <application
            android:name=".MainApplication"
            android:label="@string/app_name"
            android:icon="@mipmap/notificationapp_icon"
            android:roundIcon="@mipmap/notificationapp_icon_round"
            android:allowBackup="false"
            android:theme="@style/AppTheme">

        <service android:name="com.amazonaws.amplify.pushnotification.RNPushNotificationMessagingService">
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT"/>
            </intent-filter>
        </service>
        <!-- [END firebase_service] -->
        <!-- [START firebase_iid_service] -->
        <service android:name="com.amazonaws.amplify.pushnotification.RNPushNotificationDeviceIDService">
            <intent-filter>
                <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
            </intent-filter>
        </service>
        <receiver android:name="com.amazonaws.amplify.pushnotification.modules.RNPushNotificationBroadcastReceiver"
                  android:exported="false">
            <intent-filter>
                <action android:name="com.amazonaws.amplify.pushnotification.NOTIFICATION_OPENED"/>
            </intent-filter>
        </receiver>

        <activity
                android:name=".MainActivity"
                android:label="@string/app_name"
                android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
                android:windowSoftInputMode="adjustResize">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
    </application>

</manifest>

If you need more information just ask. Thank you in advance!

EDIT:

If i send push notifications via lambda (SendUsersMessages) and append the following GCMMessage Object, ImageUrl and SmallImageIconUrl are ignored and not showing in the notification.

GCMMessage: {
    IconReference: 'ic_stat_warning',
    Action: 'OPEN_APP',
    Title: row.userAssetId+", ID: "+row.title,
    SilentPush: false,
    Body: row.body,
    ImageUrl: 'https://cdn4.iconfinder.com/data/icons/8-bit/160/bit-12-512.png',
    SmallImageIconUrl: 'https://cdn4.iconfinder.com/data/icons/8-bit/160/bit-12-512.png'
}

I am also having same issue. Image is not displayed in notification although i am receiving image url on logs. — Amar Maharjan
– Amar Maharjan, Commented Sep 25, 2020 at 12:11

Dylan w · Accepted Answer · 2024-11-02 23:01:24Z

0

For Android, it appears the icon name is hard coded in the library as the name ic_launcher_foreground

If you add to your AndroidManfiest.xml

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

Also generate the icons using Android Asset Studio (or similar), which will generarte them under the drawable directories. Make sure they are named (or rename them to) ic_launcher_foreground.png

answered Nov 2, 2024 at 23:01

Dylan w

3,0041 gold badge23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Images are missing in PushNotification send by AWS Amplify to React-Native App

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related