Status Bar and Bottom Tab Margins in iOS

[amazingwx]

First of all, I love this development platform! In just two days, I have been able to get from concept to beta…amazing! Happy to be a pro member and support this!

I tried searching for this particular topic and I haven’t found much on it. I’m still tweaking my margins and padding, but I cannot, for the life of me, figure out the bottom tab navigation or the top of the app. I am using TestFlight to load the app on my iPhone 12. When I go through the responsive web app testing with Chrome, everything looks great. After I load the test build on my phone, it looks bad (margins off, etc.). And, the biggest two things I have going right now are the status bar and the bottom tab navigation. If I get those fixed, I’m ready for possible deployment.

Here is the top status bar from my phone:

And, here is the bottom tab navigation bar:

What I’m trying to figure out is a) how do I make my status bar look “normal” and b) is there any way to get the bottom tab navigation padded up so it’s not covered by my phone’s home bar?

Are either of those possible?

[muneer]

Welcome to the community.

There are already open issues with this subject but the best who can answer could be @Deluxe as he is following with the Thunkable development team for the status bar issue currently.

Check this post

Status bar color blending issue

Am I the only one who is facing this issue? [image] No status bar showing up can Thunkable add a status bar color option so we can decide if we want black color status bar on that specific screen or white and by status bar color I don’t mean background color I just mean status bar ( carrier time battery health etc) color. thanks

[Deluxe]

Heya @amazingwx. Well, not “following” exactly but rather “chasing” for the past months. I totally resonate with what you say and I feel your frustration not being able to release your app because of a couple of seemingly “simple-to-solve” issues which on one hand may not be as simple as we think but on the other hand, should have been solved after 6 months since they have first been reported. In the meantime, we have seen a bran-new “drag-and-drop” GUI which I assume benefits far less people than the impacted by the status bar bug (and which I firmly believe is a bad decision).

So the situation looks like this for the past 6 months: If you want to release an iOS app:

1. You cannot remove its status bar. If you switch the “Show statusbar” option to false, there is a blank row at the top of your app’s screen
2. You cannot set the color of the status bar. Now, just to be 100% accurate, you couldn’t do that in the past either but as a workaround, setting the screen’s background color to the color you wanted your status bar be would result to exactly that. Regardless, there was a way and now there isn’t. And even if there wasn’t, there should have been. I mean, we are not talking about rocket-science.
3. The status bar color can now only be white meaning you can only select the “dark-content” option to show black fonts on the white status bar and that’s it. Does it make your app look bad? Yes. Is there any other option? No. Does the Thunkable staff know? Yes. Have they released a fix in the past 6 months? No. Have I become the “black sheep” of the forums because of my persistence continuous follow-ups? Definitely! And the thing is that it all boils down to something that (unfortunately) only you and I (and the rest of the Thunkable customers) understand:

@amazingwx

If I get those fixed, I’m ready for possible deployment.

You may wonder why aren’t many more people complaining about this? Well, here are a couple of reasons:

1. People are tired of waiting for an answer or a fix. There have been tons of cases where bug reports and feature requests have been unanswered, not fixed or not implemented. If you wonder how many, check the GitHub repo.
2. People are not vocal. They just accept things the way they come and say “Oh well, I don’t care about my app looking professional”.
3. People have not invested on the platform. I have been using it for the past year and a half with a Pro subscription, spending as many as 8 hours per day to develop an app which can make me some good money.

So, thanks @muneer, I wish I was the right person to give answers but those are ultimately the Thunkable devs.

[amazingwx]

@muneer not really the same issue. My status bar is showing up, but it’s covered by what appears to be an overlapping element that I have no way to adjust…

[amazingwx]

@Deluxe thanks for the input! I’ve been beating my head on the desk for a couple of days now because it seems it should be so simple. I just want the app to stop below the status bar, like it is on ALL of the publishing previews I do and then, once I publish to TestFlight, it’s 50% covered! I. Don’t. Get. It.

[amazingwx]

Just an update on what I have noticed through the development process. On my iPad mini and my testers’ iPhone 11s, there is no issue with the status bar; at least, not that they have seen. However, on my iPhone 12, it’s inconsistent. I will load the app and it will sometimes cover the status bar and sometimes not. What I have noticed is that it primarily happens when the screen changes. I can load the app and it will look fine, but as I flip from screen to screen, the status bar will cover up and be totally covered or, sometimes, will show up on top of the black background I am trying to use. However, it is pretty consistent on my iPhone 12 of having about 20-ish pixels of white bar at the top.

[amazingwx]

I wanted to reengage on this topic. The notch setting appears to have fixed the issue at the top of my iPhone 12. I had created a workaround for the bottom of the screen. Instead of using the bottom navigation, I created a table to set up my navigation icons. It worked great, but the problem was the speed of transitions between screens. It was slow and felt clunky. I just switched back to the navigation bar and love it, but it puts a white bar at the bottom of my screen (see pic). Is there any way to fix that? Am I missing a setting somewhere?