React native Question posted in
The official React Native documentation can be found here.

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);
    },
});
  • handleNotification: handles notification action button clicks ( basically triggers some api requests ).
  • setupNotificationCategories: sets up action buttons for iOS

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:

  • Tried everything i found on the internet 😀
Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    Alternatively, for advance control, consider using @notifee/react-native

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search