tns_statusbar_light.js

import platform = require('platform');
import color = require('color');
import app = require('application');
declare var android: any;

export function onPageLoaded () {
    const View = android.view.View;

    if (app.android && platform.device.sdkVersion >= '21') {
        let LayoutParams = <any>android.view.WindowManager.LayoutParams;
        var window = app.android.foregroundActivity.getWindow();
        
        window.getDecorView()
            .setSystemUiVisibility(
                View.SYSTEM_UI_FLAG_LAYOUT_STABLE |
                View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
                View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
            );

        window.addFlags(
            LayoutParams.FLAG_LAYOUT_NO_LIMITS |
            LayoutParams.FLAG_LAYOUT_IN_SCREEN |
            LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS
        );

        window.setStatusBarColor(new color.Color("#00000000").android);
        window.setNavigationBarColor(new color.Color("#00000000").android);
    }
}

Hey dude, this script is fantastic! Thanks for dropping it 👍. If I just wanted the make the statusbar transparent, but keep the navigation buttons so that they do not overlap the bottom of the layout, what would I need to do? Sorry, I come from a web dev background so not sure on some of this native hookup!