Action sheet not displaying (Ionic Framework)

Question

In Ionic 6, I'm displaying an action sheet when a list item is clicked. It works fine in the browser, but when testing on my iPhone the action sheet never appears.

To test on my iPhone I'm using these commands:

ionic capacitor copy ios
ionic capacitor open ios

Here's my code:

class ClientItem extends React.Component<ClientItemProps> {
  constructor (props: ClientItemProps) {
    super(props);

    this.openActionSheet = this.openActionSheet.bind(this);
  }

  async openActionSheet () {

    console.log(1);

    const actionSheet = await actionSheetController.create({
      header: this.props.client.name,
      buttons: [{
        text: 'Item 1',
        icon: pencil,
        handler: () => {
          console.log('Item 1');
        }
      }, {
        text: 'Item 2',
        icon: cogOutline,
        handler: () => {
          console.log('Item 2');
        }
      }, {
        text: 'Item 3',
        role: 'destructive',
        icon: bulb,
        handler: () => {
          console.log('Item 3');
        }
      }, {
        text: 'Cancel',
        role: 'cancel',
        handler: () => {
          console.log('Cancel');
        }
      }]
    });

    console.log(2);
    await actionSheet.present();
    console.log(3);
  }

  render () {
    return (
      <IonItem className="client" onClick={this.openActionSheet}>
        <IonLabel>
          <h2 className="item-title">{this.props.client.name}</h2>
          <h3 className="item-subtitle">...</h3>
        </IonLabel>
      </IonItem>
    );
  }
}

When running on my iPhone, in the log I see '1' but not '2' or '3'. That makes me think that await actionSheetController.create(...) is never being fulfilled. I just have no idea why.

---

Edit: Here's the log from running the app on my iPhone SE:

022-04-04 18:12:19.298555-0500 App[31322:12872984] KeyboardPlugin: resize mode - native
⚡️  Loading app at capacitor://localhost...
2022-04-04 18:12:19.444407-0500 App[31322:12872984] WF: === Starting WebFilter logging for process App
2022-04-04 18:12:19.444584-0500 App[31322:12872984] WF: _WebFilterIsActive returning: YES
⚡️  WebView loaded
⚡️  To Native ->  App addListener 68127606
⚡️  [log] - 1
⚡️  [log] - 1
⚡️  [log] - 1

I tapped the list item 3 times trying to make the action sheet appear. It should log '1 2 3', '1 2 3', '1 2 3' (see code above). This is what makes me think that the action sheet promise is never being fulfilled.

Again, this works fine in the browser, but doesn't show the action sheet when running on iOS.

Here's the whole code file, if that helps.

Answer 1

There are 2 ways you can do it in React:

1. Using with useIonActionSheet Hook:

import {
  IonButton,
  IonContent,
  IonPage,
  useIonActionSheet,
} from '@ionic/react';

const ActionSheetExample: React.FC = () => {
  const [present, dismiss] = useIonActionSheet();

  return (
    <IonPage>
      <IonContent>
        <IonButton
          expand="block"
          onClick={() =>
            present({
              buttons: [{ text: 'Ok' }, { text: 'Cancel' }],
              header: 'Action Sheet'
            })
          }
        >
          Show ActionSheet
        </IonButton>
        <IonButton
          expand="block"
          onClick={() =>
            present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet')
          }
        >
          Show ActionSheet using params
        </IonButton>
        <IonButton
          expand="block"
          onClick={() => {
            present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet');
            setTimeout(dismiss, 3000);
          }}
        >
          Show ActionSheet, hide after 3 seconds
        </IonButton>
      </IonContent>
    </IonPage>
  );
};

2. Using with IonActionSheet Component:

import React, { useState } from 'react';
import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
import { trash, share, caretForwardCircle, heart, close } from 'ionicons/icons';

export const ActionSheetExample: React.FC = () => {
  const [showActionSheet, setShowActionSheet] = useState(false);

  return (
    <IonContent>
      <IonButton onClick={() => setShowActionSheet(true)} expand="block">
        Show Action Sheet
      </IonButton>
      <IonActionSheet
        isOpen={showActionSheet}
        onDidDismiss={() => setShowActionSheet(false)}
        cssClass='my-custom-class'
        buttons={[{
          text: 'Delete',
          role: 'destructive',
          icon: trash,
          id: 'delete-button',
          data: {
            type: 'delete'
          },
          handler: () => {
            console.log('Delete clicked');
          }
        }, {
          text: 'Share',
          icon: share,
          data: 10,
          handler: () => {
            console.log('Share clicked');
          }
        }, {
          text: 'Play (open modal)',
          icon: caretForwardCircle,
          data: 'Data value',
          handler: () => {
            console.log('Play clicked');
          }
        }, {
          text: 'Favorite',
          icon: heart,
          handler: () => {
            console.log('Favorite clicked');
          }
        }, {
          text: 'Cancel',
          icon: close,
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }]}
      >
      </IonActionSheet>
    </IonContent>
  );
}

Try to follow the React documentation. It looks to me that you are trying to implement it using the Angular method in a React project. That is why the await actionSheetController.create(...) is not working (I think).

See more on how to use it here: https://ionicframework.com/docs/api/action-sheet#usage