Change the color of the dialog buttons in iOS?

Question

Is there a way to change the text color of the dialog buttons in iOS?

I mean for the OK/Cancel buttons at the bottom for the alerts/confirm dialogs etc.

If native code, that's ok also.

Answer 1

You will be needing to use native code if you want to achieve this on IOS, here's how you can do it:

if (isIOS) {
            var alertController = UIAlertController.alertControllerWithTitleMessagePreferredStyle("title", "message", UIAlertControllerStyle.ActionSheet);
            
            // Here are some premade styling. The destructive by default is red on IOS. You can select default for them all or use existing.
            var editAction = UIAlertAction.actionWithTitleStyleHandler("Edit", UIAlertActionStyle.Default, (arg: UIAlertAction) => {
                //code implementation here
            });
            var deleteAction = UIAlertAction.actionWithTitleStyleHandler("Delete", UIAlertActionStyle.Destructive, (arg: UIAlertAction) => {
                //code implementation here
            });
            var cancelAction = UIAlertAction.actionWithTitleStyleHandler("Cancel", UIAlertActionStyle.Cancel, (arg: UIAlertAction) => {
                //code implementation here
            });
        
            alertController.addAction(editAction);
            alertController.addAction(deleteAction);
            alertController.addAction(cancelAction);

            // This is how you can force change the color of the title text on the actions (buttons).
            alertController.view.tintColor = new Color("#FF0000").ios; // Color is a class in Nativescript, if we you want the Native IOS value, this is how you do it.

            var currentPage = topmost().currentPage;
            var viewController: UIViewController = currentPage.ios;
            viewController.presentModalViewControllerAnimated(alertController, true);
        }

Make sure you imported what's needed:

import { isIOS, Color } from 'tns-core-modules/ui/page/page';
import { topmost } from 'tns-core-modules/ui/frame';

There are other styling customizations you can do by changing the default alertController.view settings. So just try out what's best for your use case.