{N} + Angular directive to implement safe area margins or paddings especially on iPhone X.

tns plugin add nativescript-ngx-iphonex-safe-area

import { NgiPhoneXSafeAreaModule } from 'nativescript-ngx-iphonex-safe-area';

@NgModule({
    imports: [
        NgiPhoneXSafeAreaModule,
        // ...
    ],
    // ...
})
export class MyModule { }

If your project uses good old css import the classes the directive will apply to your views like so...

@import 'nativescript-ngx-iphonex-safe-area/css/iphonex.css';

In case your project uses scss instead, use this syntax to import the classes...

@import '~nativescript-ngx-iphonex-safe-area/scss/iphonex';

 <GridLayout iPhoneX [mind]="['left', 'right', 'bottom']" [padding]="true"></GridLayout>

Notice those blueish painted areas? Well, those are the unsafe area, all the rest is where your interface should be.

If you want a quickstart, check out the demo app.

I promise, this won't break your app in devices other than the iPhone X.

• Me

Apache License Version 2.0, January 2004