Status bar style in NativeScript - ios

Question

I'm trying to reproduce the effect seen on first page here: https://github.com/sebawita/starships, where there is a status bar with light content and no action bar.
I have been trying the instructions specified here: https://github.com/NativeScript/nativescript-angular/issues/1779#issuecomment-522586849
I'm working with NativeScript Vue rather than angular, but I don't suppose it matters. Here is my component code:
<template>
<Page
class="page"
ref="page"
statusBarStyle="light"
#loaded="onPageLoaded()">
<GridLayout rows="*, 60, 60, 20, 60, *">
<Label row="0" textWrap="true" class="header" text="Starship Service" />
<TextField
id="emailField"
hint="Email"
keyboardType="email"
returnKeyType="next"
autocorrect="false"
row="1"
class="textfield"
ios.clearButtonMode="1"
ref="field1" />
<TextField
row="2"
secure="true"
hint="Password"
returnKeyType="send"
class="textfield" />
<Button row="4" text="Log in" />
</GridLayout>
</Page>
</template>
<script>
import { topmost } from "tns-core-modules/ui/frame";
import { isIOS } from "tns-core-modules/platform";
export default {
methods: {
onPageLoaded: function(args) {
console.log('page loaded');
if (isIOS) {
Object.defineProperty(UIViewController.prototype, 'preferredStatusBarStyle', {
get: function () {
return this._preferredStatusBarStyle || UIStatusBarStyle.Default;
},
enumerable: true,
configurable: true
});
let controller = topmost().ios.controller;
controller._preferredStatusBarStyle = UIStatusBarStyle.Default;
controller.setNeedsStatusBarAppearanceUpdate();
}
console.log("page loaded done");
},
},
computed: {
message() {
return "Welcome to the first version of the starship app :-)";
}
}
};
</script>
<style scoped lang="scss">
.page {
background-image: url("https://raw.githubusercontent.com/sebawita/starships/master/icons/space-bg.jpg?raw=true");
color: #fff;
}
</style>
I have this in my Info.plist file:
<key>UIStatusBarStyle</key>
<string>UIStatusBarStyleLightContent</string>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

Answer 1

You may natively set the status bar style on your page loaded events
HTML
<Page class="page" #loaded="onPageLoaded">
JS
onPageLoaded: function(args) {
let controller = args.object.frame.ios.controller;
controller.navigationBar.barStyle = 0; // `0` for Black or `1` for Light
}

Answer 2

You can also hide the action bar for each component.
import { Page } from 'tns-core-modules/ui/page/page';
constructor(
private page: Page) {
page.actionBarHidden = true;
}

Answer 3

Like was answered in another comment, you need to make sure your Info.plist file has this entry:
<key>UIViewControllerBasedStatusBarAppearance</key>
<true/>
The crucial bit of code needed was added in either NativeScript 6.4 or 6.5 here:
https://github.com/NativeScript/NativeScript/pull/8241/files
This the iOS preferredStatusBarStyle() function on the NativeScript Page object. NativeScript-Vue exposes this as a prop that you can pass in 'light' or 'dark' values to. See the updated Vue documentation.