cancelButtonIndex not shown on iOS 26

[bjornevik]

The cancelButtonIndex doesn't seem to be compatible with iOS 26.

using the onPress from the getting started in the read me

const onPress = () => {
  const options = ['Delete', 'Save', 'Cancel'];
  const destructiveButtonIndex = 0;
  const cancelButtonIndex = 2;

  showActionSheetWithOptions({
    options,
    cancelButtonIndex,
    destructiveButtonIndex
  }, (selectedIndex: number) => {
    switch (selectedIndex) {
      case 1:
        // Save
        break;

      case destructiveButtonIndex:
        // Delete
        break;

      case cancelButtonIndex:
        // Canceled
    }});
}

results in

[comertcimen]

The problem is with the ActionSheetIOS (which this library uses for ios).
I just tried the same code and it does not show up. Not sure if there is already an issue created on react-native repo.

import { ActionSheetIOS } from "react-native"


const onPress = () => {
ActionSheetIOS.showActionSheetWithOptions(
      {
        options: ["Delete", "Save", "Cancel"],
        cancelButtonIndex: 2,
        destructiveButtonIndex: 0,
      },
      (buttonIndex) => {
        switch (buttonIndex) {
          case 0:
            console.log("Delete")
            break
          case 1:
            console.log("Save")
            break
          case 2:
            console.log("Cancel")
            break
          default:
            console.log("Unknown")
            break
        }
      },
    )
}

[EthanDM]

Commenting out line 147 in node_modules/react-native/React/CoreModules/RCTActionSheetManager.mm will make it show but without the cancel styling.

// style = UIAlertActionStyleCancel;

Seems something is causing it to not show when the style is applied, even though it matches the Apple docs: https://developer.apple.com/documentation/uikit/uialertaction/style-swift.enum/cancel?language=objc

Unsure what the solution is but our team is running with no cancel button index prop and leaving it a normal button for now.

It's possible Apple got rid of the cancel style entirely in the new action sheets (which oddly enough feel more like popovers/context menu's than an action sheet anyway).

[oskarnellfors]

Weirdly, it's like that index is not 0-indexed. I got my cancel-button back if I changed the index. In your first example that would be index 3. It makes 0 sense and I guess wont work in android and other iOS-versions?

[oskarnellfors]

cancelButtonIndex: (Platform.OS === "ios" && parseInt(Platform.Version, 10) >= 18) ? options.length : options.length - 1,

This is how I solved it

I still get options.length - 1 out in the button-callback clicked-index. Even though it's visible if I set it for one more.

[comertcimen]

Weird that destructiveButtonIndex uses zero-based indexing and cancelButtonIndex uses one-based indexing

[mlisikbf]

The issue is not so with the index, as with UIAlertActionStyleCancel as @EthanDM points out. This affects iOS26 (when built with Xcode26 and when UIDesignRequiresCompatibility is disabled) and iPad (which already used popover style for action sheets). RN issue here, with a PR fix attached.

Using one-based indexing works when the button is defined as last index because the index becomes invalid then, and the 'cancel' style is not applied. You can also conditionally use undefined to the same effect.

[mlisikbf]

And update following the above RN issue report: this is actually fixed in RN 0.83, specifically in react/react-native@82d2352 -- on iPhone, on iOS26, when cancelButtonIndex is specified, the button at that index is shown correctly + canceling the alert via tap on background invokes the callback with cancelButtonIndex. If cancelButtonIndex is not specified, the alert cannot be dismissed by tap on background.

While there are other issues (anchoring does not work on iPhone; on iPad, multiple action sheets on a single screen lead to broken behavior - invoking another action sheet might cancel both one etc), I think this one can be marked as resolved.

[hightech-dev830]

I recommand @mlisikbf 's opinion. 👍 ❤️