1

I am developing an app in React native, want to show Image in push notification when the app is in background or killed. When the app is in foreground it is doing fine but in background only title and message is showing but not the image. For push notification I am using react-native-firebase to achieve this.

Code in bgMessaging.js

import firebase from 'react-native-firebase';
import type { RemoteMessage } from 'react-native-firebase';

export default async message => {
    return Promise.resolve();
};

Code in index.js

import bgMessaging from './bgMessaging';
AppRegistry.registerComponent(appName, () => App);
AppRegistry.registerHeadlessTask('RNFirebaseBackgroundMessage', () => bgMessaging);

Code in bgMessaging.js is responsible for the push when the app is in background

To bring the image when the app is in foreground I used the code below:-

async createNotificationListeners() {
    /*
    * Triggered when a particular notification has been received in foreground
    * */
    this.notificationListener = firebase.notifications().onNotification((notification) => {
      const { title, body } = notification;
      console.log('onNotification:');
      const channel = new firebase.notifications.Android.Channel(
        'fcm_default_channel',
        'SAT VS ACT',
        firebase.notifications.Android.Importance.Max
      ).setDescription('A natural description of the channel');
        firebase.notifications().android.createChannel(channel);
        this.unsubscribeFromNotificationListener = firebase.notifications().onNotification((notification) => {
            if (Platform.OS === 'android') {
              console.log('background');
              const localNotification = new firebase.notifications.Notification({
                  sound: 'default',
                  show_in_foreground: true,
                })
                .setNotificationId(notification.notificationId)
                .setTitle(notification.title)
                .setSubtitle(notification.subtitle)
                .setBody(notification.body)
                .setData(notification.data)
                .android.setChannelId('fcm_default_channel') // e.g. the id you chose above
                //.android.setSmallIcon('ic_stat_notification') // create this icon in Android Studio
                .android.setColor('#000000') // you can set a color here
                .android.setBigPicture('https://picsum.photos/200/300')
                .android.setPriority(firebase.notifications.Android.Priority.High);

              firebase.notifications()
                .displayNotification(localNotification)
                .catch(err => console.error(err));

            } 
          });
    });


    /*
    * 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;
      console.log('onNotificationOpened:');
      Alert.alert(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;
      console.log('getInitialNotification:');
      Alert.alert(title, body)
    }
    /*
    * Triggered for data only payload in foreground
    * */
    this.messageListener = firebase.messaging().onMessage((message) => {
      //process data message
      console.log("JSON.stringify:", JSON.stringify(message));
    });
  }

For the time being using http://pushtry.com/ to send push notification. The json for the push:-

 {
    "to":"<FCM_TOKEN>",
"notification":
    {
        "title":"Working Good",
"body":"Exam vlo hbe na tor",
    },
"priority":"high"
}

I am very new to react native, any kind of help is appreciated.

Sandip Nag
  • 968
  • 2
  • 18
  • 34

1 Answers1

1

If your payload contains a notification key, your app will handle push messages itself only if your app is active/in the foreground as they are delivered to your onMessageReceived handler. Otherwise (so it's in the background, or killed), FCM handles showing the notification for you by using the values you put into the notification key payload.

If your payload contains only a data key, your app will handle all push messages itself. They are all delivered to your onMessageReceived handler.

See this reference: https://stackoverflow.com/a/37876727/3037523

mhtamun
  • 65
  • 1
  • 12