by mrnkr | v1.0.0
{N} + Angular directive to implement safe area margins or paddings.
npm i --save nativescript-ngx-iphonex-safe-area


NPM version Downloads Twitter Follow

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


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


Import the module in your app module

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

imports: [
// ...
// ...
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...

Screenshot portrait Screenshot landscape

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


Property Type Default Description
mind string[] ['left', 'right', 'bottom'] Think of the name as the typical 'Mind the gap' from London Underground. It tells the directive whether it should mind the safe area only at the bottom, only the left or any combination you might need.
padding boolean false You can use this property to tell the directive to apply padding instead of margin to your views.


Apache License Version 2.0, January 2004