Screen overlapping status bar on iPhone 12

During beta testing, everything looked fine, but now that I’ve released to production, the screen is overlapping the status bar on iPhone 12/iOS 14.2 (image attached.) Any ideas? I didn’t make any changes to styles between beta and release, so I don’t know where to start.

Hey @Joel_D,
Is this happening in the Appgyver preview app? I could reproduce this, and this will be fixed, but it’s weird if it was showing as expected in the preview app but looks like this in the build.

One thing that you can do to fix this is to add padding to the page, by clicking somewhere on the grey area around the canvas, and then changing the padding property under the style tab. And if you do have padding on the page already and the build looks like this, please let me know. :slight_smile:

And could clarify what you mean by beta and release? Do you mean beta as in the preview app and production as in built standalone app?

And if you do add the padding, remember to bind it as a formula, and make it only add the padding on iOS; IF(systemVars.os === 'ios', <desired amount of padding>, <desired amount of padding if not ios phone>)

I didn’t see any issue with this in the preview app or on my test device, which is an iPad Mini. On the iPad Mini, the upper status bar doesn’t appear at all, so it isn’t helpful as a guide.

Is there no way to just force the screen to appear below the status bar? Or to figure out exactly how many pixels I need to push the screen down? I worry that it may not be consistent across all iPhones, depending on the shape of the notch at the top of the screen.

Hi! There’s no fix to this so far, but it’s something we plan to address in the future, so unfortunately adding some margin based on the OS is the best workaround so far.

Hi. Is this issue addressed in the latest Composer Pro release? If not, how would I set a margin for the entire app for iOS?

As a workaround, I have enabled the Navigation Header Bar on my app, which should mitigate this issue for now on iOS.

I check if systemVar.os == “ios” and if true set App Variable TopMargin = 36 or whatever. Then i bind that to the top margin property of my page containers

Awesome! Thanks @JOHN_WORSHAM. I’ll give that a go.

For some new iPhones like XS Max or 12 u need to set padding at least 40px for a comfortable normal screen view. 40px padding also looks fine on almost other iPhones. So, in general u should set padding 40px for iPhone.

1 Like

Hi @Kristian_Gerkman,

Any idea why this formula does not work on the top container padding?: IF(systemVars.os == "ios", 50, 0). I’ve tried it with 3 equal signs, with single and double quotes, but the formula has no effect on my iPhone 6 (iOS 12.4.9). See below:

Thanks!

Hi! We noticed a bug with systemVars and some other formulas in 2.4.19 which we are investigating. Your formula looks correct!

Thanks @Mevi. My initial tests on the iPhone are with the Preview app, which is the most recent version. But I used the 1.9.22 client runtime to package the binary. Is there a chance this formula still works with that runtime?

Also, I cannot test my build on my iPhone 6 (iOS 12.4.9), because AppGyver is hard coding iOS 13 into the binary as the Minimum iOS Version. Is there a reason that iOS 12 has been abandoned, and is there a way for me to alter this setting somehow?

Thanks.

The formula works in 1.9.22, so there shouldn’t be a problem. You can get the old preview for 1.9.22 by finding AppGyver Legend app in your app store.

As for the iOS minimum version, I’ll have to look into that and get back to you :thinking:

1 Like

Hi! But a lot of Android phones have also this notch on top of their screens. How to handle these situations?

Hmm, no way to handle them at the moment except with a lot of manual configuring to get the formula to match to phones. We are planning to provide better options for this in the future, but I’m unable to give a good estimation right now how many weeks it would take.