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 iOScategories.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:
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