Ionic 5 - Lock Screen Orientation for Ionic/Capacitor Application that will be on Android/iOS

Question

I'm trying to figure out how to lock my Screen Orientation for the entire application, so when it's deployed to Android/iOS, it is only used in its portrait mode.

I see quite a few questions asked and answered using Cordova and the config.xml. But I am using Capacitor so it's not the same as I don't have an config.xml file. Instead I have a ionic.config.json file.

This is what I have so far in my app.module.ts and app.component.ts:


    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { RouteReuseStrategy } from '@angular/router';
    
    import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
    
    import { AppComponent } from './app.component';
    import { AppRoutingModule } from './app-routing.module';
    import {ScreenOrientation} from "@ionic-native/screen-orientation/ngx";
    
    
    @NgModule({
      declarations: [AppComponent],
      entryComponents: [],
      imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
      providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, ScreenOrientation],
      bootstrap: [AppComponent],
    })
    export class AppModule {
      constructor() {
    
      }
    
    }

And

export class AppComponent {
  constructor(private screenOrientation: ScreenOrientation) {
    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
  }

}

But I don't believe this will actually lock my screenOrientation for the whole app. I've tried looking at Ionic documentation but it's so incredibly bare.

check this https://capacitorjs.com/docs/cordova/migrating-from-cordova-to-capacitor#cordova-plugin-preferences (in cordova its so think here property of the object of link u should add Orientation: "portrait") but not sure if this will work but u could test as its fast thing to check, or use https://ionicframework.com/docs/native/screen-orientation , plus set the lock method inside app.component.ts to affect all app and not inside a page unless u need this feature for single or specific pages.... — Mostafa Harb, Sep 18 '21 at 19:57

score 0 · Answer 1 · answered Sep 23 '21 at 14:46

You need to pass the orientation parameter to screenOrientation.lock method

Something like this:

export class AppComponent {
  constructor(private screenOrientation: ScreenOrientation) {
    this.screenOrientation.lock('portrait');
  }
}

Refered from : https://github.com/apache/cordova-plugin-screen-orientation

Ionic 5 - Lock Screen Orientation for Ionic/Capacitor Application that will be on Android/iOS

1 Answers1