Alert Button automatically positioning with 'cancel' style

[JacquesLeupin]

Hi React Native Team,

It would appear that applying a style of 'cancel' to a button in the Alert API will automatically position that button first in the alert. I expect the array index of buttons (objects) to determine position, and not the style. I could not find any information related to this issue in the docs. The screenshot below comes from my iOS IPhone XR simulator.

Could you look into this issue? Thank you in advance

React Native version:

  React Native Environment Info:
    System:
      OS: macOS 10.14.6
      CPU: x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
      Memory: 1.39 GB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
      Yarn: 1.17.3 - /usr/local/bin/yarn
      npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
    SDKs:
      iOS SDK:
        Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
    IDEs:
      Xcode: 10.3/10G8 - /usr/bin/xcodebuild
    npmPackages:
      @storybook/react-native: ^3.2.13 => 3.3.10 
      react: 16.4.0 => 16.4.0 
      react-native: ^0.60.0 => 0.60.0

Steps To Reproduce

1. Create an Alert with 2 buttons
2. Style one of the 2 buttons in the array with the 'cancel' style
3. The button will appear 1st on the screen, despite its array index being 1 (not 0).

Describe what you expected to happen:

I would like the button with the 'cancel' style to appear to the right of the 'discard' button (essentially, I'd like a 'Save' button with bold lettering).

Snack, code example, screenshot, or link to a repository:

The following code:

    Alert.alert(
      'Do you want to save your responses?',
      'You will lose your resonses if you continue without saving them.',
      [
        { text: 'Discard', onPress: () => this.props.history.goBack(), style: 'destructive' },
        {
          text: 'Save',
          onPress: () => this.leaveFlow(),
          style: 'cancel',
        },
      ],
      { cancelable: false },
    )

will unexpectedly place the 'Save' alert button on the left-hand side of the Alert:

I'm not entirely sure if this is a true issue or intended behavior, but thought to report just in case.

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.60 and verify if the issue still exists.

The "Resolution: Old Version" label will be removed automatically once you edit your original post with the results of running `react-native info` on a project using the latest release.

[roshangm1]

You are giving style="cancel" for the later button so that button going to left as per the guideline of apple. Remove the style and it should work fine.
I think this should be in the documentation however.
https://developer.apple.com/design/human-interface-guidelines/ios/views/alerts/

[JacquesLeupin]

Your comment doesn't really address the issue I raised. I understand Apple's guidelines, and am attempting to follow them in the example I cite above. I would like, however, for the Save button I was building to have bold lettering (per my comment above).

[jpamarohorta]

Any updates about this one? A good example of what we want here is the Face ID Apple popup. It has the cancel on the left with regular weight and the Ok at the right with bold weight.

Is it possible to make the Alert component behave the same way?

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.