reactjsreact-nativefirebase-cloud-messagingreact-native-firebasereact-native-push-notification

how to add action buttons to FCM notifications on android (React Native)


I'm trying to add the action buttons to fcm remote notifications to my React Native app, and i did achieved that in ios, but couldn't get it to work on Android

the notifications are being sent, but the action buttons don’t appear.

Here’s my setup:

1. server-side (FCM API v1):

const { GoogleAuth } = require("google-auth-library");

async function getAccessToken() {
    // get access token code
}

async function sendNotification(topic, medicationName, scheduledTime) {
    const accessToken = await getAccessToken();

    const response = await fetch(
        "https://fcm.googleapis.com/v1/projects/my-sobrus-beta/messages:send",
        {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                Authorization: `Bearer ${accessToken}`,
            },
            body: JSON.stringify({
                message: {
                    topic: topic,
                    notification: {
                        title: // notif title,
                        body: // notif body,
                    },
                    android: {
                        notification: {
                            sound: "default",
                            click_action: // click action intent id,
                            channelId: // some channel id,
                        },
                        priority: "HIGH",
                    },
                    apns: {
                        payload: {
                            aps: {
                                sound: "default",
                                category: // category id,
                                contentAvailable: true,
                                mutableContent: true,
                            },
                        },
                    },
                    data: {
                        // some data
                    },
                },
            }),
        }
    );

    const responseData = await response.json();
    console.log(responseData);
}

const topic = // topic that phones subscribed to

sendNotification(topic)
    .then(() => console.log("Notification sent successfully"))
    .catch(console.error);

2. react native side:

what i call in my app entry point index.js :

import PushNotification from 'react-native-push-notification';
import PushNotificationIOS from '@react-native-community/push-notification-ios';
import {handleNotification} from './handlers';
import {setupNotificationCategories} from './categories';

PushNotification.createChannel(
    {
        channelId: // some channel id,
        channelName: // some channel name,
        channelDescription: // some channel description,
        soundName: 'default',
        importance: 4,
        vibrate: true,
    },
    created => console.log(`createChannel returned '${created}'`),
);

setupNotificationCategories();

PushNotification.configure({
    onNotification: function (notification) {
        handleNotification(notification);
        notification.finish(PushNotificationIOS.FetchResult.NoData);
    },
});

categories.ts

import PushNotificationIOS from '@react-native-community/push-notification-ios';
import {Platform} from 'react-native';

export function setupNotificationCategories() {
    if (Platform.OS === 'android') return;

    PushNotificationIOS.setNotificationCategories([
        {
            id: // id I sent in the server,
            actions: [
                // actions configs
            ],
        },
    ]);
}

wut i've tried:


Solution

  • Within the react-native-push-notification dependency there is a configuration where you can create static actions, configured from the app, for example:

    import PushNotification from ‘react-native-push-notification’;
    
    PushNotification.localNotification({
      title: ‘Notification with actions’,
      message: ‘This notification has action buttons’,
      actions: [‘Accept’, ‘Decline’], // Here you define the actions
      playSound: false,
      soundName: ‘default’,
    });
    

    And then you have to configure each action when inside the onNotification inside the PushNotification.configure({}), for example:

    PushNotification.configure({
      onNotification: function (notification) {
        if (notification.action === ‘Accept’) {
          // Handles the click on the ‘Accept’ button
          console.log(‘Accepted!’);
        } else if (notification.action === ‘Decline’) {
          // Handles the click on the ‘Decline’ button
          console.log(‘Declined!’);
        }
    
        notification.finish(PushNotificationIOS.FetchResult.NoData);
      },
    });
    

    It's worth noting that this information is in the documentation, so it specifies that the ‘actions’ key is only available for Android where it says (Android only) See the doc for notification actions to know more. Additionally, there is a section where we are told how to make use of these actions https://www.npmjs.com/package/react-native-push-notification#notification-actions