4

I'm trying to create a push notification like whatsApp or Gmail where the user avatar's is present in the notification. Is there a way to do it in react-native, especially using expo?

this is my payload for fcm

{
"GCM": "{ \"notification\": { \"title\": \"Sender1\" }, \"text\": \"test message\" } }"
}

This is an example which I got from Google which I'd like to achieve.

enter image description here

kkesley
  • 3,258
  • 1
  • 28
  • 55

1 Answers1

1

Answer (Source): How to set the app icon as the notification icon in the notification drawer by user @manikanta

NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(context)
                .setSmallIcon(R.mipmap.ic_launcher)
                .setLargeIcon(BitmapFactory.decodeResource(context.getResources(),
                        R.mipmap.ic_launcher))
                .setContentTitle(title)
                .setContentText(message)
                .setAutoCancel(true)
                .setSound(defaultSoundUri)
                .setContentIntent(pendingIntent);

android.app.NotificationManager notificationManager =
                (android.app.NotificationManager) context.getSystemService(Context.NOTIFICATION_SERVICE);

notificationManager.notify(0 /* ID of notification */, notificationBuilder.build());

Set Large icon does the trick.Comment below if you have any further info

If you're using React Native (react-native-firebase):

const notif = new firebase.notifications.Notification({                                                                                                             
    show_in_foreground: true,                                                                                                                                                   
})
    .android.setSmallIcon('@mipmap/ic_notification') // app icon

// source image might be:
// URL
// android resource e.g. @mipmap/ic_launcher
let source_image = "";
notif.android.setLargeIcon(source_image) // user avatar

Source: https://rnfirebase.io/docs/v5.x.x/notifications/reference/AndroidNotification#setLargeIcon

Jasper Martin
  • 180
  • 3
  • 11
  • Ah! So the notification should be from local notification? is there a way to do that from remote notification? I'm using expo, so there may be some limitation on this. – kkesley Apr 04 '19 at 00:22
  • Oh sorry, that was just the name of the variable. This works for remote notif too. Just setup react-native-firebase (https://github.com/invertase/react-native-firebase) – Jasper Martin Apr 04 '19 at 11:54
  • Hey @JasperMartin do you know how can i achieve this in react native onesignal? – Oliver D Oct 29 '20 at 20:39
  • Hey @JasperMartin do you know how can i achieve this in react native onesignal? – Oliver D Oct 29 '20 at 20:43