White bottom bar underneath iPhone X home indicator

ios

#1

Hello,

since I’ve upgraded to NativeScript 4 I have a weird white bottom bar underneath the home indicator on my iPhone X.
I have optimized the whole app on NativeScript 3.4 to apply the correct paddings etc.
Therefore I want to remove that white bar but I can’t find any information / documentation on it.
Also it would be interesting to know how to change the background color even thought that’s not an alternative to completely removing it when necessary.

Thanks in advance,

Martin

Playground to reproduce the issue: https://play.nativescript.org/?template=play-ng&id=3VOERh


#2

So with some help of @tjvantoll and @jen.looper who told me to utilize a negative bottom margin on my pages I’ve came up with the following solution:

export function getSafeAreaInsets(): undefined | {
    top: number,
    left: number,
    bottom: number,
    right: number
} {
    if (isIOS && application.ios.window.safeAreaInsets) {
        return application.ios.window.safeAreaInsets;
    } else {
        return undefined;
    }
}
export abstract class PageBaseComponent implements OnInit {

    protected constructor(protected page: Page) {}

    ngOnInit(): void {
        const safeAreaInsets = getSafeAreaInsets();

        if (safeAreaInsets) {
            this.page.marginBottom = -1 * safeAreaInsets.bottom;
        }
    }

}

Now all my Angular »Page« Components extend PageBaseComponent. I don’t think it is a bad idea to have some base component anyways. There might be other use cases it might come in handy.

If anyone comes up with a better / more elegant approach that maybe does not involve modifying all existing »Page« Components please let me know.


Nativescript 4.0.1 Iphone X white section on footer
#3

Hi @hettiger, perhaps it’s easier to not look at a specific iOS version, but rather something like this:

  import * as application from "tns-core-modules/application";

  if (application.ios && application.ios.window.safeAreaInsets) {
    const bottomSafeArea: number = application.ios.window.safeAreaInsets.bottom;
    // etc

#4

Thank you @Eddy

I have updated my code sample.


Safe Area Issues with ScrollView / {NS} 4