Option to make the iOS confirm dialog destructive

[cindy-m]

Did you verify this is a real problem by searching the NativeScript Forum and the other open issues in this repo?

Yes

Tell us about the problem

In native iOS, you have the possibility to use a destructive styling for the UIAlert (ok and cancel button next to each other and cancel button in red, like this:

). In Nativescript, the dialogs have no extra option or other possibility to use that style. The enum UIAlertActionStyle has a value Destructive, but that is not used anywhere. Is there some other possibility to get the destructive dialog for iOS without writing the plugin myself?

Which platform(s) does your issue occur on?

iOS

Please provide the following version numbers that your issue occurs with:

• CLI: 3.4.0

[tsonevn]

Hi @cindy-m,
In this case, you could use cancelButtonText and neutralButtonText options of the confirm. This will allow you to display both buttons next to each other. For example:
XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">

    <Page.actionBar>
        <ActionBar title="My App" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>

    <StackLayout class="p-20">
        <Label text="Tap the button" class="h1 text-center"/>
        <Button text="TAP" tap="onTap" class="btn btn-primary btn-active"/>
        <Label text="{{ message }}" class="h2 text-center" textWrap="true"/>
    </StackLayout>
</Page>

TypeScript

import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { HelloWorldModel } from './main-view-model';
import * as dialogs from "tns-core-modules/ui/dialogs";
import {ConfirmOptions} from "tns-core-modules/ui/dialogs"
export function navigatingTo(args: EventData) {

    let page = <Page>args.object;

    page.bindingContext = new HelloWorldModel();
}

export function onTap(){
    let options:ConfirmOptions={
        title: "Your title",
    message: "Your message",
    cancelButtonText: "Cancel text",
    neutralButtonText: "Neutral text"
    }
    dialogs.confirm(options).then((r)=>{
        console.log(r);
    })
}

Regarding the styling of the dialogs component, we have another issue. You could review it and add your comment if something is missing there.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.