How to read and get value from Info.plist file using react native in IOS app

Info.plist file is a very important file which handles all the configuration for an app. We can use this file to have some custom information specific to app which can be read when app is getting loaded.

To read the file we need to make a bridge component that allow us to get values from the plist file. Because app cannot directly read the file until the app is developed in native language.

Info.plist is having data in JSON format, which can be read as key, value pair.

First, we need to create a custom class (Objective-C) that will read info.plist file and send the response back to app.

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

@implementation AppConfig
RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(getPListValue:(NSString *)param callback:(RCTResponseSenderBlock)callback)
{
  NSString* paramValue = [[[NSBundle mainBundle] infoDictionary] valueForKey:param];
  if(paramValue == nil)
    paramValue = @"";
  callback(@[[NSNull null], paramValue]);
}
@end

Using NativeModules we can call this function and get the value of any keys in react native. Import NativeModules from react-native and directly call the method as below:

import { NativeModules } from 'react-native';
NativeModules.AppConfig.getPListValue("keyName", (error, keyValue) => {
  console.log(keyValue);
});

On running above code, it will log the key value for the specific key you have given in code as keyName.

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.