nativescript-ngx-iphonex-safe-area

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

Installation

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

Usage

Import the module in your app module

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

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

Import the CSS or SCSS file depending on your project

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';

Finally use it in your templates like so

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

The result will be something like this...

Notice those blueish painted areas? Well, those are the safe area!

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

API

License

Apache License Version 2.0, January 2004