Alert Button automatically positioning with 'cancel' style
See original GitHub issueHi 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
- Create an Alert with 2 buttons
- Style one of the 2 buttons in the array with the ‘cancel’ style
- 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.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:6 (1 by maintainers)

Top Related StackOverflow Question
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
Savebutton I was building to have bold lettering (per my comment above).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.