223
Views
5
Comments
Solved
Transparent iOS status bar 
Question

Hi everyone.


I have been developing a mobile app and noticed that when the screen resizes because of the virtual keyboard, the viewport remains visible within the status bar of the iPhone:


I have tried to fix it by messing with the manifest like so:

But so far, it had no effect on the app. Am i missing something? Is there some other way around it?

Thank you for your time.

2021-04-09 11-42-43
assif_tiger
 
MVP
Solution

Hi JT,

yes, it's a feature but you can set the StatusBarColor to get rid of it.

  1. In Service Studio, open the home module of your mobile app.

  2. In the module tree, select the module and, in the properties editor, open the Extensibility Configurations property editor window:

{
    "preferences": {
        "global": [{
            "name": "StatusBarOverlaysWebView",
            "value": "<value>"
        },
        {
            "name": "StatusBarBackgroundColor",
            "value": "<#RRGGBB>"
        },
        {
            "name": "StatusBarStyle",
            "value": "<value>"
        }]
    }
}

3. After customizing the status bar you must install an updated build of the mobile app on the devices for the changes to take effect.


https://success.outsystems.com/Documentation/10/Delivering_Mobile_Apps/Customize_Your_Mobile_App/Customize_the_Application_Status_Bar


Note: You can also try to follow step 3 for your existing implementation.

Hope it helps.

Assif




2018-09-27 18-20-33
Swatantra Kumar
Champion

Hi JT

Starting from iOS 7 the status bar is transparent. Check around UINavigationController

2021-04-09 11-42-43
assif_tiger
 
MVP
Solution

Hi JT,

yes, it's a feature but you can set the StatusBarColor to get rid of it.

  1. In Service Studio, open the home module of your mobile app.

  2. In the module tree, select the module and, in the properties editor, open the Extensibility Configurations property editor window:

{
    "preferences": {
        "global": [{
            "name": "StatusBarOverlaysWebView",
            "value": "<value>"
        },
        {
            "name": "StatusBarBackgroundColor",
            "value": "<#RRGGBB>"
        },
        {
            "name": "StatusBarStyle",
            "value": "<value>"
        }]
    }
}

3. After customizing the status bar you must install an updated build of the mobile app on the devices for the changes to take effect.


https://success.outsystems.com/Documentation/10/Delivering_Mobile_Apps/Customize_Your_Mobile_App/Customize_the_Application_Status_Bar


Note: You can also try to follow step 3 for your existing implementation.

Hope it helps.

Assif




2020-12-07 17-12-41
J Grou

Thank you very much for your reply assif_tiger,

Its exactly what I did in the manifest file, except i was expecting to see changes immedetialy, i had no idea it required a new app install.


Anyway, thank you very much for your answer, its working as expected now, so I marked it as a solution.

2021-04-09 11-42-43
assif_tiger
 
MVP

JT wrote:

Thank you very much for your reply assif_tiger,

Its exactly what I did in the manifest file, except i was expecting to see changes immedetialy, i had no idea it required a new app install.


Anyway, thank you very much for your answer, its working as expected now, so I marked it as a solution.

Hey Happy to know you resolve it,

Cheers,

Assif

2020-12-07 17-12-41
J Grou

Follow up question: I am now trying to use the same manifest to prevent android virtual keyboard from resizing the viewport, but no luck so far. Here is the code:


{
"preferences": {
"global": [{
"name": "orientation",
"value": "portrait"
}
],
"ios": [{
"name": "KeyboardDisplayRequiresUserAction",
"value": "false"
},{
"name": "StatusBarOverlaysWebView",
"value": "true"
},{
"name": "StatusBarBackgroundColor",
"value": "#fff"
},{
"name": "StatusBarStyle",
"value": "default"
}],

"android":[{
        "name": "windowSoftInputMode",
        "value": "adjustNothing"
}
]

   
}
}


Is there annything wrong with my code?

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.