iphone X not using the whole screen (not sure about other apple devices)

pie

Hi, I am finally trying to publish on apple devices, but I noticed that on the iphoneX I have available as test device the app is not filling the whole screen.
It seems like a common issue, but I have no clue on how to fix it: it looks like this
https://user-images.githubusercontent.com/750551/41187367-4b2ec3fc-6b75-11e8-9001-d2784b9df811.png

thank you

hgy29

You need to enable full screen by including “require” plugin and ticking ‘notch ready’ support

pie

Thank you, this would indeed use the whole screen but with this setting the notch gets in the way of my app top menu and the app covers the phone notification bar.
I can easily move down my top menu to make it usable, but if it's possible I'd like to keep the phone notification bar (with the clock and battery indicator) visible.
On android devices the "standard" view (without require> notch ready) begins just below the notification bar (which I'd say usually includes the notch) and goes down to the bottom of the screen (I had to calculate the size of the navigation bar to avoid content overlapping there).
On this iphone instead there is a black band between the notification bar and the app, and the same happens below (as it happens on the linked image in the first post: it's like watching a 16/9 movie on a 4/3 screen with black bands above and below).
Is there a native way to use the whole screen up to the bottom end of the notch/notification bar while keeping the notification bar visible? (As it happens with android standard view).

Thank you again

hgy29

You can use Application:getDeviceSafeArea to retrieve the size of the notch, or more precisely the margins in which you musn't draw any UI.
You can also use Application:set("statusBar",true) to re-enable the status bar on iOS and android.

pie

Thank you, I missed those!
However on android there is some "issue": I will soon try on the iphone again with these settings and update here.

Android:
There is no difference if I set getDeviceSafeArea(logical) with logical true or false: I always get these values

logical bounds -0 -0 1080 2400 getLogicalBounds()

safe aerea 0 78 1080 2400 getDeviceSafeArea()

While the notification bar area is calculated correctly (78px) the android navigation bar is not taken into account: I can tell empirically that its area is somewhere around application:getScreenDensity()/2 so I can live without it and calculate it with this workaround.

application:set("statusBar",1) - not true for the records- works, but unfortunately only to a certain extent: the notification bar is still hidden under the app, it appears when the navigation bar appears (swiping up from bottom, or swiping down from top) only as an overlay: it's not always there as I was hoping.

I don't know if that is how it was meant to be, but it makes sense against the dont-use-notch setting.

pie

Iphone X:
I built the project instead of using the player but I think it should work the same:

logical bounds -0 -0 1125 2436 getLogicalBounds()
safe aerea 0 0 1125 2436 getDeviceSafeArea(false)

on this device the safe area is equal to logical bounds, and the notification bar is not taken into account, therefore since my top menu is placed at the minimum y of the safe area it is cut in half by the notch.

However, opposed as it happens on android, application:set("statusBar",1) makes the info from the notification bar always visible (and since my top menu is there it overlaps too, but that is an easy fix).

I think I can work around this issue like this:
Android: publish without require>notch ready

Apple:
after finding how many pixels are 5,5 mm (https://512pixels.net/2021/01/on-iphone-notch-sizes/) on a retina display I could hardcode my top menu distance from there, then publish the app with require>notch

However if you think that there is a chance to have a consistent behaviour between the two systems and avoid having to keep two slightly different projects it would be much easier to maintain.

Thank you a lot!

hgy29

pie said:

Iphone X:
I built the project instead of using the player but I think it should work the same:

logical bounds -0 -0 1125 2436 getLogicalBounds()
safe aerea 0 0 1125 2436 getDeviceSafeArea(false)

on this device the safe area is equal to logical bounds, and the notification bar is not taken into account, therefore since my top menu is placed at the minimum y of the safe area it is cut in half by the notch.

There must be some wrong setting somewhere, since I developped and tested getDeviceSafeArea specifically for iPhone X, and I use this for my own apps successfully (well there are some issues with some android phones, but fine for iOS).
In my projects, in enable retina display and tick the 'notch' option in require plugin.

pie

hgy29 said:

There must be some wrong setting somewhere, since I developped and tested getDeviceSafeArea specifically for iPhone X, and I use this for my own apps successfully (well there are some issues with some android phones, but fine for iOS).
In my projects, in enable retina display and tick the 'notch' option in require plugin.

Found it! Support aspect ratios of 2:1 or higher must be unflagged.
What should its purpose be?
Thank you

pie

This actually works perfectly using ios player, but it is somehow ignored when building the app with the same settings screenshots and project attached, can you tell me what am I doing wrong?

Thank you

pie

I think I got it! The safe area size becomes available only after some time: I tried 500ms and it seems to be working as expected on compiled IOS apps too.. Now I am wondering:
is there a better way to know the "right moment" to ask for it, instead of using a delay of arbitrary numbers which might work on some devices and might not work on others?
Any suggestion?
Thank you!

hgy29

I am surprised about this delay, I do you safe area in my apps and never faced such issue. But I react to APPLICATION_RESIZE event, can you check if maybe safe area is right after such event ?

pie

That's it! Thank you!

For the records this works on iphonex and iphone 15 pro simulator in xcode:

application:set("statusBar",1) local px = {}   px[1] = Pixel.new(0xFF0000, 1, 120,120)     stage:addEventListener(Event.APPLICATION_RESIZE, function() local sminX, sminY, smaxX, smaxY = application:getDeviceSafeArea(false) px[1]:setPosition(sminX,sminY) print(sminX, sminY, smaxX, smaxY) stage:addChild(px[1])   end)