React-native-firebase: how to show push notification with action buttons when app is in background

Created on 8 Jan 2019  路  4Comments  路  Source: invertase/react-native-firebase

push notifications are working fine with actions buttons when app is in foreground
and not showing action button when app is background (only notification are showing without action button)

only message no action buttons are there can somebody help me

Most helpful comment

@taikim8484 yes I have resolved after i did some changes in the manifest.xml and registered action

Manifest.xml

<application>
------
   <service android:name="io.invertase.firebase.messaging.RNFirebaseMessagingService">
        <intent-filter>
          <action android:name="com.google.firebase.MESSAGING_EVENT" />
        </intent-filter>
      </service>
      <service android:name="io.invertase.firebase.messaging.RNFirebaseInstanceIdService">
        <intent-filter>
          <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
        </intent-filter>
      </service>
      <service android:name="io.invertase.firebase.messaging.RNFirebaseBackgroundMessagingService" />

</application>

App.js

import { AppRegistry } from 'react-native';
import App from './App';
import backgroundPush from './src/backgroundPush';

AppRegistry.registerComponent('App', () => App);
AppRegistry.registerHeadlessTask('RNFirebaseBackgroundMessage', () => backgroundPush);

backgroundPush.js

import firebase from 'react-native-firebase';

export default async (message) => {
  try {
    const text = message.data.message;
    const payload = JSON.parse(message.data.sendbird);
    const localNotification = new firebase.notifications.Notification({
      show_in_foreground: true
    })
      .android.setChannelId('com.myapp.default_channel_id')
      .android.setPriority(firebase.notifications.Android.Priority.High)
      .setNotificationId(message.messageId)
      .setTitle('New message')
      .setSubtitle(`Unread message: ${payload.unread_message_count}`)
      .setBody(text)
      .setData(payload);

    const action = new firebase.notifications.Android.Action('Reply', 'ic_launcher', 'My Test Action');
    // Add the action to the notification
    localNotification.android.addAction(action);

    return firebase.notifications().displayNotification(localNotification);
  } catch (e) {
    return Promise.resolve();
  }
}

All 4 comments

@ramusesan
Did you resolve this bug? Can you share me the solution?

@taikim8484 yes I have resolved after i did some changes in the manifest.xml and registered action

Manifest.xml

<application>
------
   <service android:name="io.invertase.firebase.messaging.RNFirebaseMessagingService">
        <intent-filter>
          <action android:name="com.google.firebase.MESSAGING_EVENT" />
        </intent-filter>
      </service>
      <service android:name="io.invertase.firebase.messaging.RNFirebaseInstanceIdService">
        <intent-filter>
          <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
        </intent-filter>
      </service>
      <service android:name="io.invertase.firebase.messaging.RNFirebaseBackgroundMessagingService" />

</application>

App.js

import { AppRegistry } from 'react-native';
import App from './App';
import backgroundPush from './src/backgroundPush';

AppRegistry.registerComponent('App', () => App);
AppRegistry.registerHeadlessTask('RNFirebaseBackgroundMessage', () => backgroundPush);

backgroundPush.js

import firebase from 'react-native-firebase';

export default async (message) => {
  try {
    const text = message.data.message;
    const payload = JSON.parse(message.data.sendbird);
    const localNotification = new firebase.notifications.Notification({
      show_in_foreground: true
    })
      .android.setChannelId('com.myapp.default_channel_id')
      .android.setPriority(firebase.notifications.Android.Priority.High)
      .setNotificationId(message.messageId)
      .setTitle('New message')
      .setSubtitle(`Unread message: ${payload.unread_message_count}`)
      .setBody(text)
      .setData(payload);

    const action = new firebase.notifications.Android.Action('Reply', 'ic_launcher', 'My Test Action');
    // Add the action to the notification
    localNotification.android.addAction(action);

    return firebase.notifications().displayNotification(localNotification);
  } catch (e) {
    return Promise.resolve();
  }
}

@ramusesan
Did you resolve this bug? Can you share me the solution?

Don't forget to remove "notification" from payload. Notification should be a "data message" if you don't want FCM to display the notification automatically.

"Data message | Client app is responsible for processing data messages. Data messages have only custom key-value pairs._"

https://firebase.google.com/docs/cloud-messaging/concept-options

i am still not able to do this. still my action buttons are not shown.

Was this page helpful?
0 / 5 - 0 ratings