Go fullscreen on Android in NativeScript + Angular

Forcing your Android app to go full-screen is super simple when using NativeScript.

In your controller, just do this:

import { android as androidApp } from 'tns-core-modules/application';
import { device } from 'tns-core-modules/platform';
declare var android: any;

...

  private goFullscreen() {
    if (androidApp && device.sdkVersion >= '21') {
      const View = android.view.View;
      const window = androidApp.startActivity.getWindow();
      const decorView = window.getDecorView();
      decorView.setSystemUiVisibility(
        View.SYSTEM_UI_FLAG_HIDE_NAVIGATION |
          View.SYSTEM_UI_FLAG_FULLSCREEN |
          View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
      );
    }
  }

  private hideFullscreen() {
    if (androidApp && device.sdkVersion >= '21') {
      const View = android.view.View;
      const window = androidApp.startActivity.getWindow();
      const decorView = window.getDecorView();
      decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
    }
  }

I’m using something called Sticky immersive here. There are 3 full-screen options for Android, and they are all laid out clearly here.

If you want to go fullscreen on iOS, simply tell the app to go into landscape mode. For this I highly recommend the nativescript-orientation plugin.

import * as orientation from 'nativescript-orientation';
...
  ngAfterViewInit() {
    orientation.setOrientation('landscape', false);
    orientation.disableRotation();
  }

I do this in ngAfterViewInit()as a workaround to this outstanding bug.

If you just want to get rid of the android status bar from your app:

    ngAfterViewInit(): void {
        // Get rid of stats bar on android
        if (androidApp && device.sdkVersion >= '21') {
            console.log('Disabling status bar');
            const View = android.view.View;
            const window = androidApp.startActivity.getWindow();
            const decorView = window.getDecorView();
            decorView.setSystemUiVisibility(
                View.SYSTEM_UI_FLAG_HIDE_NAVIGATION |
                View.SYSTEM_UI_FLAG_FULLSCREEN |
                View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
            );
        }
    }