NativeScript/nativescript-angular

iOS 15 status bar issue

adammo14 opened this issue · 1 comments

adammo14 commented

Environment

✔ Component nativescript has 8.1.5 version and is up to date.
✔ Component tns-core-modules has 6.5.27 version and is up to date.
✔ Component tns-ios has 6.5.4 version and is up to date.
✔ Component tns-android has 6.5.3 version and is up to date.

Describe the bug

I'm having an issue with status bar background colour not showing on page load. This is only happening on iOS 15. I suspect this might be caused by the latest iOS update but I haven't come across any nativescript-angular solutions yet.

Does anyone know why this is happening and how to revert this to how it worked in previous iOS versions?

changed

It's worth to mention that if a page has enough content to scroll, as you scroll down, status bar background colour shows again.

scroll

Expected behavior

Normally status bar should have a certain level of transparency so that ActionBar could go below it, that's the reason it normally has a different shade.

android

What I tried already

Here's an example of ActionBar used throughout the project:

<ActionBar class="action-bar">
    <NavigationButton ios:visibility="collapsed" icon="res://menu" (tap)="onDrawerButtonTap()"></NavigationButton>
    <ActionItem icon="res://navigation/menu" android:visibility="collapsed" (tap)="onDrawerButtonTap()" ios.position="left"></ActionItem>
    <Label class="action-bar-title">
        <FormattedString>
            <Span text="Home"></Span>
        </FormattedString>
    </Label>
</ActionBar>

We managed to change colour of ActionBar with the code below as that was previously showing transparent too however this only works for navigation.

fixNavigationBar() {
      let osVersionMajor = device.osVersion.split(".")[0];
      if(isIOS && parseInt(osVersionMajor) >= 15) {
          let appearance = UINavigationBar.appearance();
          appearance.backgroundColor = new Color("#26aeb5").ios;
      }
 }