iOS - Layout overlay statusbar in page-router-outlet

[jbarnabe]

Environment

tns doctor
√ Getting environment information

No issues were detected.
√ Your ANDROID_HOME environment variable is set and points to correct directory.
√ Your adb from the Android SDK is correctly installed.
√ The Android SDK is installed.
√ A compatible Android SDK for compilation is found.
√ Javac is installed and is configured properly.
√ The Java Development Kit (JDK) is installed and is configured properly.
√ Local builds for iOS can be executed only on a macOS system. To build for iOS on a different operating system, you can use the NativeScript cloud infrastructure.
√ Getting NativeScript components versions information...
√ Component nativescript has 5.1.1 version and is up to date.
√ Component tns-core-modules has 5.1.2 version and is up to date.
√ Component tns-android has 5.1.0 version and is up to date.
√ Component tns-ios has 5.1.1 version and is up to date.

Describe the bug

The navigation within my application is inspired by login-tabs template (https://github.com/ADjenkov/login-tabs-ng) with many page-router-outlet (PRO) like this :

• PRO
  • Login
  • Tabs
  • PRO: Tab 1 Master --> Tab 1 Detail
  • PRO: Tab 2 Master --> Tab 2 Detail

In Tabs page I have a custom NavigationBar at Bottom, so my page is structured like this :

<GridLayout columns="*" rows="*, 45">
    <StackLayout row="0">
        <page-router-outlet name="firstTab">
        </page-router-outlet>
    </StackLayout>
    <StackLayout row="0">
        <page-router-outlet name="secondTab">
        </page-router-outlet>
    </StackLayout>
    <GridLayout row="1" columns="*,*,*,*,*" rows="*" class="nav-bar-container">
    <Label text="My NavBar"></Label>
    </GridLayout>
</GridLayout>

In PRO "firstTab" or "secondTab" for my tests I have very simple page like this :

<ActionBar class="action-bar" title="Home">
</ActionBar>

<StackLayout>
    <Label text="Welcome Home !"></Label>
</StackLayout>

The problem is that on iOS the background-color of StackLayout is visible under the statusbar. So if no background-color is set I have a white background under statusbar even if my ActionBar have a green background-color (see screenshot below). Form me the problem comes from the fact that the available height in PRO does not take the 45 less of the navigation bar in parent page, so the StackLayout goes up and overlay the ActionBar and statusbar.

[jbarnabe]

I finally find a workaround for this : set the parent GridLayout for take all screen (<GridLayout columns="*" rows="*">) inside this parent after StackLayouts of PRO define the GridLayout for take all screen with 2 rows and set isPassThroughParentEnabled="true" for capturing tap event on childs.

The rendering both iOS and Android is correct in this case.

<GridLayout columns="*" rows="*">
    <StackLayout row="0">
        <page-router-outlet name="firstTab">
        </page-router-outlet>
    </StackLayout>
    <StackLayout row="0">
        <page-router-outlet name="secondTab">
        </page-router-outlet>
    </StackLayout>
    <GridLayout columns="*" rows="*, 45" isPassThroughParentEnabled="true">
        <GridLayout row="1" columns="*,*,*,*,*" rows="*" class="nav-bar-container">
            <Label text="My NavBar" (tap)="onTap($event)"></Label>
        </GridLayout>
    </GridLayout>
</GridLayout>

[tsonevn]

Hi @jbarnabe, Excuse me for the delayed reply. Can you send us a sample project, that shows the issue and can be used for debugging? Meanwhile, I would also suggest setting up the iosOverflowSafeAreaEnabled property to false on the root component. For example:

<GridLayout iosOverflowSafeAreaEnabled="false" columns="*" rows="*, 45">
    <StackLayout row="0">
        <page-router-outlet name="firstTab">
        </page-router-outlet>
    </StackLayout>
    <StackLayout row="0">
        <page-router-outlet name="secondTab">
        </page-router-outlet>
    </StackLayout>
    <GridLayout row="1" columns="*,*,*,*,*" rows="*" class="nav-bar-container">
    <Label text="My NavBar"></Label>
    </GridLayout>
</GridLayout>

[jbarnabe]

hi @tsonevn, after cleaning up my project to produce an sample here is the result. No problem on Android, on iOS the background-color of Pageis visible under the statusbar. Let me know if it's clear. sample-layout-overlay.zip

[tsonevn]

Hi @jbarnabe, Thank you for the provided sample project. I tested it on both platforms(Android and iOS), however, the app crash on startup. Can you check if you will be able to build and start the project on your side?

[jbarnabe]

@tsonevn I'm on a Windows environnement and I use Webpack. I just tested again right now with the sample package and both tns run android --bundle (on emulator or real device) and tns preview --bundle works for me. I can test a cloud build for iOS this evening if you want.