Bottom Tab Navigator has a space at the bottom on iOS

Hi there,

I just added an Admob Banner to my screen having a Bottom Tab Navigator, and it has a strange behaviour(/bug?): there is a space at the bottom of the Navigator on iOS.

Before having the banner added it was normal.

This only effects my iOS phone, on Android everything is as expected. (no space)

Do you guys have an experience in that?

Before banner: (no space at the bottom)

After banner: (space at the bottom)

Hi there,

Thanks for sharing these screenshots. We can take a look at this behavior on our end.

3 Likes

Thank you so much, waiting for the result.

@jane

I did some more testing and on my friend’s Iphone 8 everything looks great. So it might has something to do with the big screens. I am using Iphone XR and there is the white space at the bottom of the Bottom Tab Navigator.

1 Like

@skulamester I quickly went through the previous posts about the same issue and I could see a resemblance, nearly all of them are using iPhone XR.

1 Like

I tested it on Iphone XS too, same bug. (a space at the bottom of the navigation bar)

In addition to that, I get an error message on that phone:

1 Like

Hi @skulamester,

These are my findings, please let me know if this matches your experience:

On iOS, there is a noticeable white gap under the Bottom Tab Navigator, roughly 5mm or 1/4 inch tall.

On Android, there is a much smaller gap under the Bottom Tab Navigator, only a few pixels tall. This gap is only noticeable if the Bottom Tab Navigator has been set to a color that is not white.

In both cases, this gap is present on downloaded apps and on the Thunkable Live app. This gap is white, regardless of the background color of the Screen, or the background color of the bottom Tab Navigator.

Does this all match your observations?

Yes
*for iOS

Hi @jane,

There are some things I will modify on your description:

Important note:
Everything worked great until I added AdMob Banner to the screen.

I did some more testing and on my friend’s Iphone 8 everything looks great. So it might has something to do with iOS on big screens . I am using Iphone XR and XS and there are white spaces at the bottom of the Bottom Tab Navigator.

For me it is 1,2 cm tall:

On Android there is no gap:

My color is white, and it is very noticeable.

The other parts of your post do match my observations, thank you so much for your help and hoping to be fixed ASAP.

Hi there,

My observations above were made without adding an AdMob banner to the screen. I could see the gap even without the AdMob banner.

I am also testing on an iPhone XR.

Did you see a gap below the Bottom Tab Navigator, on an iPhone XR, before adding an AdMob component to your screen?

I’ll accept that the specific height of this gap will be different on different screens. The gap is a noticeable height on iOS, anyway. (I also didn’t measure with a ruler!)

I said that on Android, the gap is very small and is only noticeable if the Bottom Tab Navigator is not white. You have said that you see no gap on Android, then you said that the gap is very noticeable. Can you clarify which is the case?

Thanks!

3 Likes

Hey,

There was a gap without the AdMob banner on iOS as well, but after having the banner added, the gap got even bigger.

On the one hand there is no gap on Android for me, on the other hand on iOS there is the gap very noticeable.

3 Likes

Thanks for clarifying both of these points! I have an internal report written up now, and I’ll get someone assigned to it ASAP

2 Likes

Hello again, just confirming that Thunkable team member Ting is taking a look at this behavior :sunny:

3 Likes

Hi, we have safe area by default to help you place your views within the visible portion of the overall interface. If you’d like to remove it, please go to “project setting” and turn on the “Ignore Notch Area” as the attach image show.

(Safe area is 44pt from the top and 34pt from the bottom in portrait mode on new iPhone devices.)

Please give it a try, and let us know if it works for you. Thanks!


2 Likes

Wow, that one did it.

Thanks for the help @jane and @tingc.

Anyway, I have an another topic where I need help, could you help me out there as well? RewardUser block doesn't work

1 Like