How to add action button in notifications of an ios app using react native

In this tutorial, we will learn how to add an action button on local notifications triggered by application using React Native.

To achieve this, we need to create a bridge component that will enable communication between react-native and IOS. Below code is in Objective-C.

We call the IOS function from react native and this objective C method will create buttons and append to notifications that come on device.

Below are the steps:

1) Create a custom ActionNotification.m file and add below code snippet into that:

#import "ActionNotification.h"
@interface ActionNotification()
@end

@implementation ActionNotification
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(createUserNotificationSettings:(RCTResponseSenderBlock)callback)
{
  UIMutableUserNotificationAction *action1 = [[UIMutableUserNotificationAction alloc] init];
  [action1 setActivationMode: UIUserNotificationActivationModeForeground];
  [action1 setTitle:@"Title1"];
  [action1 setIdentifier:@"first_button"];
  [action1 setDestructive:YES];
  [action1 setAuthenticationRequired:NO];
  
  UIMutableUserNotificationAction *action2 = [[UIMutableUserNotificationAction alloc] init];
  [action2 setActivationMode: UIUserNotificationActivationModeForeground];
  [action2 setTitle:@"Title2"];
  [action2 setIdentifier:@"second_button"];
  [action2 setDestructive:NO];
  [action2 setAuthenticationRequired:NO];
  
  UIMutableUserNotificationCategory *actionCategory = [[UIMutableUserNotificationCategory alloc] init];
  [actionCategory setIdentifier:@"actionCategory"];
  [actionCategory setActions:@[action1, action2]
                  forContext:UIUserNotificationActionContextDefault];
  
  NSSet *categories = [NSSet setWithObject:actionCategory];
  UIUserNotificationType types = (UIUserNotificationTypeAlert|
                                  UIUserNotificationTypeSound|
                                  UIUserNotificationTypeBadge);
  
   [[UIApplication sharedApplication] registerUserNotificationSettings:[UIUserNotificationSettings settingsForTypes:types categories:categories]];
  callback(@[[NSNull null], @"done"]);
}
@end

In above implementation, we have created one method createUserNotificationSettings, which will add action buttons to notification. Now, this function need to be called just before scheduling the notification. Also, we need to make sure that identifier has been properly set. In above case, it must be "actionCategory".

2) Add Action Button Click Event function in AppDelegate.m file.

- (void)application:(UIApplication *)application handleActionWithIdentifier:(nullable NSString *)identifier forLocalNotification:(nonnull UILocalNotification *)notification withResponseInfo:(nonnull NSDictionary *)responseInfo completionHandler:(nonnull void (^)())completionHandler
{
  if ([identifier isEqualToString: @"first_button"]) {
    NSLog(@"First notification button was pressed");
  } else {
    NSLog(@"Second notification button was pressed");
  }
}
- (void)application:(UIApplication *)application handleActionWithIdentifier:(NSString *)identifier forRemoteNotification:(NSDictionary *)userInfo withResponseInfo:(NSDictionary *)responseInfo completionHandler:(void (^)())completionHandler
{
  if ([identifier isEqualToString: @"first_button"]) {
    NSLog(@"First notification button was pressed");
  } else {
    NSLog(@"Second notification button was pressed");
  }
}

The above functions will handle action button events.

3) Now, create JS file that will call IOS function just before scheduling Notifications.

import { PushNotificationIOS, NativeModules } from 'react-native';

 NativeModules.ActionNotification.createUserNotificationSettings((error, status) => {
    return status;
 });

 PushNotificationIOS.scheduleLocalNotification({
    fireDate: new Date(),
    alertBody: "hello",
    category: "actionCategory" // category must match to what we have defined in create notification method in Objective-C
});

Thats it!
It should display the action button when any notification comes for that particular app.