CODEWITHSUNDEEP
ionic-frameworkionic4screen-orientation
Sujan Gainju
Sujan Gainju

Reputation: 4767

Half white screen when rotate to landscape ionic 4 IOS

I am building an IONIC 4 app in portrait mode. I have forced the app to stay in portrait mode in config.ts file and everything works fine in both android and IOS

On some pages, I am using camera-preview plugin to customize the camera screen. It needed to be in landscape mode so used Screen Orientation plugin to force it landscape on that page and start the camera.

ngOnInit() {
    this.platform.ready().then(()=>{
      if(this.platform.is('cordova')){
        this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
        this.cameraPreview.onBackButton().then(()=>{
          console.log('Back button pushed');
          this.close();
        })
        // this.presentAlertConfirm()
        //make short delay of 500ms to start the camera preview
        setTimeout(()=>{
          this.initCameraPreview()
        },500)
      }
    })
  }

Works fine in android.

But in IOS, half of the screen is covered in white as in the image below.

enter image description here

Please help me out to resolve this issue

Upvotes: 1

Views: 563

Answers (1)

Sujan Gainju
Sujan Gainju

Reputation: 4767

Solved the issue by modifying the size of the camera preview as 

async initCameraPreview(){
    await this.cameraPreview.startCamera(
      {
         x: 0,
         y: 0,
         width: this.isIOS ? window.screen.height : window.screen.width,
         height: this.isIOS ? window.screen.width : window.screen.height,
         toBack: true, 
         previewDrag: false, 
         tapPhoto: false,
         camera: "back"
     }
   ).then(
      (res) => {
        console.log(res)
      },
      (err) => {
        console.log(err)
      });
  }

Upvotes: 1

Related Questions