I'm working on a Ionic and Angular app and I've added capacitor. The application is for iOs, Android and Web.
I've just installed the Capacitor Action Sheet plugin and Capacitor's PWA.
It work fine on the web, but when I try to open the action sheet on iOS I get this:
ERROR {"code":"UNIMPLEMENTED"}
Has anyone seen this before?
I'm using version 6 of capacitor:
"@capacitor/ios": "^6.0.0",
"@capacitor/action-sheet": "^6.0.0",
I also have other Capacitor plugins that are working fine, like statusbar, keyboard... But ActionSheet shows that error.
Here is the implementation:
import { Component, inject } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { ActionSheet, ActionSheetButtonStyle } from '@capacitor/action-sheet';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { lastValueFrom, take } from 'rxjs';
@Component({
selector: 'sol-profile-picture',
templateUrl: './profile-picture.component.html',
styleUrls: ['./profile-picture.component.scss'],
standalone: true,
imports: [
IonicModule,
TranslateModule
]
})
export class ProfilePictureComponent {
translationsService = inject(TranslateService);
constructor () { }
async showActions() {
await lastValueFrom( this.translationsService
.get([
'COMMON.uploadPhoto',
'COMMON.ALERTS.takePhoto',
'COMMON.ALERTS.uploadPhoto',
'COMMON.cancel']
)
.pipe(take(1)) );
const result = await ActionSheet.showActions({
title: this.translationsService.instant('COMMON.uploadPhoto') as string,
options: [
{
title: this.translationsService.instant('COMMON.ALERTS.takePhoto'),
},
{
title: this.translationsService.instant('COMMON.ALERTS.uploadPhoto'),
},
{
title: this.translationsService.instant('COMMON.cancel'),
style: ActionSheetButtonStyle.Cancel,
},
],
});
console.log(result)
}
}
Thank you!
Just if anyone ever come across this issue, that was because of a bad manual capacitor update.
In order to solve it run:
npm i -D @capacitor/cli@latest
npx cap migrate
Build the app and everything will work perfect.