Customize Dialog.alert with native APIs

Enhancing NativeScript Dialogs with Custom Colors

In this post, we'll walk through enhancing NativeScript Dialogs.alert by enabling custom color options. We'll reuse existing alert code from @nativescript/core, ensuring minimal additional setup.

Step 1: Setup Custom Dialog Directory

Begin by creating a directory named custom-dialog in your project's source folder. We'll use the recommended directory structure from NativeScript's Customizing View Elements documentation.

Inside the custom-dialog directory, create the following files:

• dialogs-common.ts
• index.ios.ts
• index.android.ts
• index.d.ts

Step 2: Android Configuration

Import and Modify Core Dialog Files

Copy content from the NativeScript Core repo into your project:

• index.android.ts
• dialogs-common.ts

Update the import paths in both files to reference @nativescript/core:

import {
  Button,
  Color,
  CSSUtils,
  Frame,
  Label,
  Page,
  TextField,
  Utils,
  View,
} from '@nativescript/core';

Extend DialogOptions for Custom Styles

Enhance DialogOptions to accommodate your custom styles in dialogs-common.ts:

export const DIALOG_STYLES = Symbol("dialogStyles");

export interface CustomDialogStyle {
  style?: {
    backgroundColor?: string;
    buttonsBackgroundColor?: string;
    buttonsTextColor?: string;
  };
}

export interface DialogOptions extends CancelableOptions, CustomDialogStyle {
  // existing properties
}

Create a Function to Generate Button Colors

Add a helper function to create color instances from string values:

export function createButtonsColors(styles: { [DIALOG_STYLES]: CustomDialogStyle['style'] }): {
  color?: Color;
  backgroundColor?: Color;
} {
  const colors: { color?: Color; backgroundColor?: Color } = {};

  if (styles[DIALOG_STYLES]?.buttonsBackgroundColor) {
    colors.backgroundColor = new Color(styles[DIALOG_STYLES].buttonsBackgroundColor);
  }

  if (styles[DIALOG_STYLES]?.buttonsTextColor) {
    colors.color = new Color(styles[DIALOG_STYLES].buttonsTextColor);
  }

  return colors;
}

Integrate Custom Colors into Dialog Creation

In your createDialog function, ensure custom colors are attached properly:

const colorsAttached = Object.assign(alert, {
  styles: options?.style,
});

Then, modify your showDialog function to use the new createButtonsColors:

const { color, backgroundColor } = createButtonsColors({
  [DIALOG_STYLES]: builder[DIALOG_STYLES],
});

Step 3: iOS Configuration

Create a helper function applyButtonColors in index.ios.ts to style iOS alert buttons using a method from this StackOverflow solution:

function applyButtonColors(
  alertController: UIAlertController,
  colors: { textColor?: Color; backgroundColor?: Color },
) {
  if (colors.backgroundColor) {
    const alertOkButton = alertController.view.subviews[0].subviews[0].subviews[0].subviews[1];
    alertOkButton.backgroundColor = colors.backgroundColor.ios;
  }

  if (colors.textColor) {
    alertController.view.tintColor = colors.textColor.ios;
  }
}

In your alert function, integrate the custom colors:

const { color, backgroundColor } = createButtonsColors({
  [DIALOG_STYLES]: options.style,
});
applyButtonColors(alertController, { textColor: color, backgroundColor });

Step 4: Using Custom Colors in Your App

Now, you can easily apply custom colors to your dialogs.

Implement Custom Dialog Colors

First, import your customized Dialogs instead of the core package:

import { Dialogs } from '../custom-dialog/dialogs';

Then, apply your custom styles directly when invoking dialogs:

openDialog() {
  Dialogs.alert({
    title: "Alert",
    message: "This is an alert dialog.",
    style: {
      buttonsBackgroundColor: "#FF7F00",
      buttonsTextColor: "#FFFFFF",
    },
    okButtonText: "OK",
  });
}

Conclusion

Customizing dialogs in NativeScript with custom colors is straightforward and powerful, allowing consistent theming across your application. Leveraging built-in platform APIs alongside NativeScript’s flexible architecture enhances both the appearance and user experience of your mobile apps.