CODEWITHSUNDEEP
javascriptreact-native
jamesfzhang
jamesfzhang

Reputation: 4473

React-Native AlertIOS style

With AlertIOS, you can specify these button styles from my observations:

  1. "default": blue color, normal text
  2. "cancel": blue color, bold text
  3. "destructive": red color, normal text

I'm assuming this naming convention corresponds with native UIAlertView style classes, is that right? For alerts in my app, I want to emphasize positive actions with bold & blue text, so it is strange to me that these actions are set with a "cancel" style attribute. Is it just me or is the "cancel" style kind of a misnomer?

AlertIOS.prompt("Enter a new name", null, [
  {
    text: "Update",
    style: "cancel",
    onPress: (name) => { this.updateName(name); }
  },
  {
    text: "Cancel",
    style: "destructive"
  }
]);

Upvotes: 1

Views: 853

Answers (1)

Artal
Artal

Reputation: 9143

This naming convention is not related to UIAlertView (which is deprecated), but rather to its replacement - UIAlertController that was introduced in iOS8.

Instead of specifying button titles when using UIAlertView, with UIAlertController you add actions. Each action has its "action style" (deafult/cancel/destructive), which translates in the alert to a button with a corresponding style, defined by font and color.

The Apple documentation regarding the cancel style states:

Apply a style that indicates the action cancels the operation and leaves things unchanged

I guess Apple thinks that this style emphasizes the fact that this operation will "leave things unchanged". Maybe to highlight to the user that this is his "way out" so they made it more prominent to the user.

Upvotes: 1

Related Questions