question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Alert Button automatically positioning with 'cancel' style

See original GitHub issue

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:

Screen Shot 2019-09-12 at 11 40 39 AM

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

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
JacquesLeupincommented, Oct 22, 2019

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).

0reactions
stale[bot]commented, Mar 5, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Alerts - Presentation - Human Interface Guidelines - Design
Always use “Cancel” to title a button that cancels the alert's action. As with all button titles, use title-style capitalization and no ending...
Read more >
Alerts · Bootstrap v5.0
Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight...
Read more >
How to change the style of alert box? - Stack Overflow
A good way to handle that is to include event.preventDefault() in your event handler. – PCasagrande. Nov 19, 2014 at 16:29.
Read more >
ion-alert: Ionic API Alert Buttons with Custom Message Prompts
ion-alert dialog presents or collects information using inputs. Custom alert button messages appear above the app's content and must be manually dismissed.
Read more >
Alert - React Native
Three buttons mean 'neutral', 'negative', 'positive' (such as 'Later', 'Cancel', 'OK'). Alerts on Android can be dismissed by tapping outside of ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found