Translucent status bars and the iPhone X notch



The NativeScript Groceries sample has some custom code to make the status bar transparent. See and That code has been in place and working for a long time, but, it doesn’t work as intended on the new iPhone X simulator.

Has anyone his this? I’m having trouble finding good iOS documentation on the notch so I’m not even sure what my options are here.

Any help would be appreciated.



Hey TJ,
Ive worked on this a lot. The notch creates a lot of UI issues and I’m working on a blog post about it, but what you are seeing in your screenshot is a result of Page margin-top being set to -20, which is the size of the normal iOS status bar. The only way I’ve found to know if a device is an iPhone X is this:

if (platformModule.isIOS && platformModule.screen.mainScreen.heightPixels == 2436 && platformModule.screen.mainScreen.widthPixels == 1125) { = 'iphonex';
    applicationSettings.setBoolean('iPhoneX', true);
} else {
   applicationSettings.setBoolean('iPhoneX', false);

and then you use that application setting in all your views to do various UI things, and you can use the iPhone X class to set your page margin appropriately:

Page {
    margin-top: -20;
Page.iphonex {
    margin-top: -44;

In every view that has a new instance of page you’ll have to do

if (applicationSettings.getBoolean('iPhoneX')) = 'iphonex';`

If you’re using standard iOS action bar though, it will handle the margins appropriately for you.


Awesome, thanks @davecoffin! That’s exactly what I was looking for.

For people reading this, this is the approach I’m using for now: If I come up with something more elegant I’ll post it here.