nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

MapTour App Goes Behind Status Bar on iPhone 13

JoshBillings

Hey all,

I am creating an app using the MapTour template. I noticed when I view this app on an iPhone 13, the top of the app goes behind the status bar rather than being placed below the status bar. This happens on every page of the app and makes any button that is at the top of the app (i.e. menu) inaccessible.

This doesn't occur on any iPhone below a 13 and I can't recreate the issue on an Android. This issue also happens when using the newest MapTour Template (5.2).

The Status Bar setting is toggled on in the Device Settings within AppStudio.

Is there somewhere in the code that I can make a change that will push the app below the status bar?

Thanks!

Find more posts tagged with

Accepted answers

All comments

JamesGough

Interesting, so issue was with AppStudio Player and not the actual app. I hadn't considered that. Thanks for the reply!

JoshBillings

@JamesGough Yes, we did! After speaking with @TrevorFrame, we found the issue was with AppStudio Player and not the app itself. AppStudio Player didn’t have the code for the new iPhone 13 and beyond. I believe they are making sure this code is in the new update.

As long as you have the code that reflects iPhone 13’s in your app, you should be good.

You can test this by either downloading the AppStudio Player template, adding the iPhone 13 code, and then running it in Player. You could also get the raw files and install it on your phone and test that way.

JamesGough

Did you ever find a fix for this? I am having a similar issue for my app on iPhone 13 Pro Max, although it works fine on iPhone12.

TrevorFrame

It will hide it for Android, but not on iOS. Have you tried manipulating the heightOffset values to be bigger, such as 40 and 20 instead of 20 and 0?

readonly property real heightOffset: isIphoneX ? app.units(40) : 20

The below lines of code is what we are using for enhancements to a starter app.

readonly property real portraitHeightOffset: checkIfNotchAvailable() ? 40 * scaleFactor : 20 * scaleFactor
...
function checkIfNotchAvailable() {
        let unixName;

        if ( AppFramework.systemInformation.hasOwnProperty("unixMachine") )
            unixName = AppFramework.systemInformation.unixMachine;

        if ( typeof unixName === "undefined" )
            return false

        if ( unixName.match(/iPhone(10|\d\d)/) ) {
            switch(unixName) {
            case "iPhone10,1":
            case "iPhone10,4":
            case "iPhone10,2":
            case "iPhone10,5":
                return false;

            default: //iPhone10,3 and iPhone10, 6 refer to iPhone X
                return true;
            }
        }

        //iPhone XS, XS Max, XR
        if ( unixName.match(/iPhone(11|\d\d)/) ) {
            return true;
        }

        if ( unixName.match(/iPhone(12|\d\d)/) || unixName.match(/iPhone(13|\d\d)/)) {
            switch(unixName) {
                //iPhone SE 2nd Gen
            case "iPhone12,8":
                return false;

                //iPhone 12, iPhone 12 Pro, iPhone 12 Pro Max, iPhone 13
            default:
                return true;
            }
        }

        return false;
    }

Best,

Trevor

JoshBillings

Thanks Trevor.

Is there an option to not display the status bar at all? Would that be a good workaround if I can't figure this out?

I see in Settings > Devices there is the Status Bar option, but that doesn't seem to do anything either. Is this setting supposed to take the Status Bar away entirely?

TrevorFrame

Hi @JoshBillings , sorry for a late response. I was out all last week. It looks correct. I would recommend consoling out some messages to see what unixMachine is showing up when using this iPhone 13. Something like:

console.log(`Sys info: ${sysInfo.unixMachine}`)

And you can use the console app to read the output. https://doc.arcgis.com/en/appstudio/extend-apps/appconsole.htm

If everything is consoled out correctly and you see that app.isIphoneX is set to true, there could be another issue. If so, dm me, and we can schedule to troubleshoot further.

JoshBillings

Thanks @TrevorFrame.

I've tried updating the setSystemProps function as seen below but am still getting the same results for iPhone 13's.

Do you see a mistake in this code?

function setSystemProps  () {
        var sysInfo = typeof AppFramework.systemInformation !== "undefined" && AppFramework.systemInformation ? AppFramework.systemInformation : ""
        if (!sysInfo) return
        if (Qt.platform.os === "ios" && sysInfo.hasOwnProperty("unixMachine")) {
                var unixName = sysInfo.unixMachine;

                switch(unixName){
                    //iPhone X
                case "iPhone10,3":
                case "iPhone10,6":
                    //iPhone XS, XR
                case "iPhone11,2":
                case "iPhone11,4":
                case "iPhone11,6":
                case "iPhone11,8":
                    //iPhone 11
                case "iPhone12,1":
                case "iPhone12,3":
                case "iPhone12,5":
                    //iPhone 12
                case "iPhone13,1":
                case "iPhone13,2":
                case "iPhone13,3":
                case "iPhone13,4":
                    // iPhone 13
                case "iPhone14,2":
                case "iPhone14,3":
                case "iPhone14,4":
                case "iPhone14,5":
                case "iPhone14,6":
                    app.isIphoneX = true;
                }
        } else if (Qt.platform.os === "windows") {
            var kernelVersionPattern = /^6\.1/
            var osVersionPattern = /^7/
            app.isWindows7 = kernelVersionPattern.test(AppFramework.kernelVersion) && osVersionPattern.test(AppFramework.osVersion)
        }  
    }

The properties for isIphoneX are set in MapTourApp.qml as seen below:

property bool isIphoneX: false                     
readonly property real heightOffset: isIphoneX ? app.units(20) : 0
readonly property real widthOffset: isIphoneX && !app.isPortrait ? app.units(40) : 0

TrevorFrame

Hi @JoshBillings,

The code looks for specific platforms that contain a top notch and will offset the UI based on the property isIphoneX in the app component in MapTourApp.qml. The Map Tour template is now deprecated and is no longer being updated. You can however update this check in the setSystemProps() function inside the MapTourApp.qml to add the different iPhone types that contain a notch such as iPhone 12 or 13.

To give an idea how it is now done in more recent templates, here is the function that checks iPhone types in the Nearby template.

function isNotchAvailable() {
        var unixName;

        if (AppFramework.systemInformation.hasOwnProperty("unixMachine"))
            unixName = AppFramework.systemInformation.unixMachine;

        if (typeof unixName === "undefined")
            return false

        if (unixName.match(/iPhone(10|\d\d)/)) {
            switch(unixName) {
            case "iPhone10,1":
            case "iPhone10,4":
            case "iPhone10,2":
            case "iPhone10,5":
                return false;

            default: //iPhone10,3 and iPhone10, 6 refer to iPhone X
                return true;
            }
        }

        //iPhone XS, XS Max, XR
        if (unixName.match(/iPhone(11|\d\d)/)) {
            return true;
        }

        if (unixName.match(/iPhone(12|\d\d)/)) {
            switch(unixName) {
                //iPhone SE 2nd Gen
            case "iPhone12,8":
                return false;

                //iPhone 12, iPhone 12 Pro, iPhone 12 Pro Max
            default:
                return true;
            }
        }

        return false;
    }

Best,

Trevor

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.