Add replies to Android notifications while using react-native-firebase

Question

Android 7.0 introduced the ability for users to enter text directly into a notification in order to respond to it , without opening the app. I am using the react-native-firebase project in order to receive push notifications in my React Native app.

Based on the documentation it seems like this functionality is supported -- specifically, AndroidNotification.addAction and AndroidAction.addRemoteInput would seem to indicate that this is possible.

However, I can't find any examples on how to correctly implement this feature. Is this feature supported in a React Native project using react-native-firebase ?

Answer 1

Yes, this is possible:

1. Update your AndroidManifest.xml file to include the following:

    <receiver android:name="io.invertase.firebase.notifications.RNFirebaseBackgroundNotificationActionReceiver" android:exported="true"> <intent-filter> <action android:name="io.invertase.firebase.notifications.BackgroundAction"/> </intent-filter> </receiver> <service android:name="io.invertase.firebase.notifications.RNFirebaseBackgroundNotificationActionsService"/>

2. Add a .js file (eg, backgroundMessaging.js ) containing the following:

    import firebase from 'react-native-firebase' export const backgroundMessageListener = async (message) => { const notification = new firebase.notifications.Notification() // TODO: Configure your notification here... // https://rnfirebase.io/docs/v4.3.x/notifications/reference/AndroidAction const action = new firebase.notifications.Android.Action('reply', 'ic_launcher', 'Reply') action.setShowUserInterface(false) // https://rnfirebase.io/docs/v4.0.x/notifications/reference/AndroidRemoteInput const remoteInput = new firebase.notifications.Android.RemoteInput("input") remoteInput.setLabel('Reply') action.addRemoteInput(remoteInput) notification.android.addAction(action) firebase.notifications().displayNotification(notification) return Promise.resolve() } export const backgroundActionHandler = async (notificationOpen) => { if (notificationOpen.action === 'reply') { // TODO: Handle the input entered by the user here... console.log(notificationOpen); } return Promise.resolve(); };

3. Update index.js as follows:

    import { backgroundMessageListener, backgroundActionHandler } from './backgroundMessaging' AppRegistry.registerHeadlessTask('RNFirebaseBackgroundMessage', () => backgroundMessageListener) AppRegistry.registerHeadlessTask('RNFirebaseBackgroundNotificationAction', () => backgroundActionHandler);

Notes:
This example assumes that you've already configured react-native-firebase and followed the setup guide here . The backgroundMessageListener function will get called when your app is not in the foreground and a "data" notification is received. The Receiving Notifications has examples on how to perform additional setup such as requesting permission to receive notifications.

Answer 2

To add to what @Donut has answered, things have changed a bit now.

AndroidManifest.xml (remains unchanged as per @Donut)

<receiver android:name="io.invertase.firebase.notifications.RNFirebaseBackgroundNotificationActionReceiver" android:exported="true">
    <intent-filter>
        <action android:name="io.invertase.firebase.notifications.BackgroundAction"/>
    </intent-filter>
</receiver>
<service android:name="io.invertase.firebase.notifications.RNFirebaseBackgroundNotificationActionsService"/>

It is recommended that you add a channel-id here (ie app-local-notifications)

<meta-data
 android:name="com.google.firebase.messaging.default_notification_channel_id"
            android:value="@string/default_notification_channel_id"/>

Your backgroundMessaging.js should now be

import firebase from 'react-native-firebase'

const channelId = 'app-local-notifications'

export const backgroundMessageListener = async (message) => {
    const channel = new firebase.notifications.Android.Channel(
        channelId,
        'Local Interactive Notifications',
        firebase.notifications.Android.Importance.Max
    ).setDescription('Local Interactive Notifications');
    firebase.notifications().android.createChannel(channel);

    const localNotification = new firebase.notifications.Notification({
        sound: 'default' //important
    })
        .setNotificationId(message.messageId)
        .setTitle(message.data.title)
        .setBody(message.data.body)
        .android.setChannelId(channelId) //important
        .android.setSmallIcon('ic_launcher')
        .android.setPriority(firebase.notifications.Android.Priority.High); //important

    const action = new firebase.notifications.Android.Action('reply', 'ic_launcher', 'Reply')
    action.setShowUserInterface(false)

    const remoteInput = new firebase.notifications.Android.RemoteInput("inputText")
    remoteInput.setLabel('Message')
    action.addRemoteInput(remoteInput)

    localNotification.android.addAction(action)
    firebase.notifications().displayNotification(localNotification).catch(err => console.log(err)); //important
}

export const backgroundActionHandler = async (notificationOpen) => {
    if (notificationOpen && notificationOpen.notification) {
        const action = notificationOpen.action;
        const notificationId = notificationOpen.notification.notificationId;
        if (action === "reply") {
            console.log(notificationOpen)
        } else {
            console.log("unsupported action", action);
        }
        // hide the notification instead of Promise.resolve()
        firebase.notifications().removeDeliveredNotification(notificationId); //important
    }
};

Things to note: 1. Notification sent via FCM should be data-only notifications. 2. Notification priority should be "high". 3. Notification action must not take longer than 60s. 4. ChannelID is required. 5. Notification sound should be default.