Big picture notification

[anish000kumar]

Info

RN version: 0.50.3 react-native-fcm version: 14.2.0 Emulator: Android Google Nexus 5x 7.1.0 API 25

Issue

I am trying to send big picture notification for Android, going through the docs I realized I need to setup custom_notification attribute to achieve so, which internally creates a local notification.

So, the notification object sent from API now contains something like this:

{
        "to":"kajfsdf:efawefwe_fsdfdsf-asfawefwefwf_asdfsdfasd-asdfasdfsd9A_asdfsdf_asdf",
        "data": {
            "custom_notification": {
            "body": "test body",
            "title": "test title",
            "color":"#00ACD4",
            "priority":"high",
            "icon":"ic_notif",
            "group": "GROUP",
            "sound": "default",
            "id": "id",
            "show_in_foreground": true,
            "picture": "https://files.allaboutbirds.net/wp-content/uploads/2015/06/prow-featured.jpg"
            }
        }
}

notification key has been removed from the object, as per the docs. But now empty notification is received. Also, if it helps, I am using react-native-splash-screen for implementing custom splashscreen as well.

[evollu]

works for me?

{"to":"",  "content_available":true,
  "data": {
    "custom_notification": {
        "title": "title",
        "body": "body",
        "picture": "https://files.allaboutbirds.net/wp-content/uploads/2015/06/prow-featured.jpg"
    }
  },
  "priority": "high"
}

[MrHazimAli]

@evollu I tried using same payload like you did but still did not get the picture show. did I did something wrong in this case. here is screenshot and message

This is what I received..

`{ "to" : "", "content_available":true, "data": { "custom_notification": { "title": "title", "body": "body", "picture": "https://files.allaboutbirds.net/wp-content/uploads/2015/06/prow-featured.jpg" } }, "priority": "high"

}`

showLocalNotification(notif) { console.log('here local', notif) FCM.presentLocalNotification({ title: notif.title, body: notif.body, priority: "high", click_action: notif.click_action, show_in_foreground: true, local: true }); }

[MrHazimAli]

thanks @evollu , it's working.. Initially Im using fcm@6 .. but now 15.0.2 👍

[evollu]

@anish000kumar is your issue resolved?

[Vanitha2312]

I want to get a notification sent from firebase console with an image. i successfully get simple text notifications. anyone help me..

this is my code: async componentDidMount() { this.checkPermission(); this.createNotificationListeners(); }

//1 async checkPermission() { const enabled = await firebase.messaging().hasPermission(); if (enabled) { this.getToken(); } else { this.requestPermission(); } }

//3 async getToken() { let fcmToken = await AsyncStorage.getItem('fcmToken'); if (!fcmToken) { fcmToken = await firebase.messaging().getToken(); if (fcmToken) { // user has a device token await AsyncStorage.setItem('fcmToken', fcmToken); } } }

//2 async requestPermission() { try { await firebase.messaging().requestPermission(); // User has authorised this.getToken(); } catch (error) { // User has rejected permissions console.log('permission rejected'); } }

componentWillUnmount() { this.notificationListener(); this.notificationOpenedListener(); }

async createNotificationListeners() { /*

• Triggered when a particular notification has been received in foreground

• */ this.notificationListener = firebase.notifications().onNotification((notification) => { const { title, body } = notification; this.showAlert(title, body); });

  /*

• If your app is in background, you can listen for when a notification is clicked / tapped / opened as follows:

• */ this.notificationOpenedListener = firebase.notifications().onNotificationOpened((notificationOpen) => { const { title, body } = notificationOpen.notification; this.showAlert(title, body); });

  /*

• If your app is closed, you can check if it was opened by a notification being clicked / tapped / opened as follows:
• / const notificationOpen = await firebase.notifications().getInitialNotification(); if (notificationOpen) { const { title, body } = notificationOpen.notification; this.showAlert(title, body); } /
• Triggered for data only payload in foreground
• */ this.messageListener = firebase.messaging().onMessage((message) => { //process data message console.log(JSON.stringify(message)); }); }

showAlert(title, body) { Alert.alert( title, body, [ { text: 'OK', onPress: () => console.log('OK Pressed') }, ], { cancelable: false }, ); }

[mack97]

@evollu its not working when app is closed

[jalooc]

@mack97 Are you not getting just the big picture notification or any notification when the app is closed? Cause if you're not getting any, then it's the Android battery saving functionality preventing the notification delivery. You'll have to turn off battery optimization for that app in Android's settings.