Full screen with notch in Iphone XR for example

Ionic Framework Ionic React
1

Hey there,

I’m using Ionic React and I’ve just received some feedback from my QA team, which i didn’t even take into consideration - Phones like the Iphone XR with a notch at the top is cutting off the Logo that i have in the middle of the toolbar at the top.

Is there a global var needing set or something to avoid this and paint the app below the notch area? Like a different safe area or?

Any help appreciated, thanks.

2

EDIT:

Fixed with:

ion-toolbar {

  padding-top: constant(safe-area-inset-top) !important;
  padding-top: env(safe-area-inset-top) !important;
}