# Bottom Tab Navigator has a space at the bottom on iOS

**URL:** <https://community.thunkable.com/t/bottom-tab-navigator-has-a-space-at-the-bottom-on-ios/1409344>\
**Category:** Questions about Thunkable X\
**Tags:** bug\
**Created:** [July 22, 2021, 5:37pm UTC](https://community.thunkable.com/t/bottom-tab-navigator-has-a-space-at-the-bottom-on-ios/1409344 "2021-07-22T17:37:51Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![skulamester](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/skulamester/32/100480_2.png) [@skulamester](https://community.thunkable.com/u/skulamester)\
**Post date:** [July 22, 2021, 5:37pm UTC](https://community.thunkable.com/t/bottom-tab-navigator-has-a-space-at-the-bottom-on-ios/1409344/1 "2021-07-22T17:37:52Z")

</div>

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)**

 ![IMG_9583](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/3/038c5345584cb8c3245fc59fe280a0ed17b153f6.jpeg)

**After banner: (space at the bottom)**

 ![IMG_9584](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/f/1f4c61858a85df1a1bae3fc2c609ec410f6c74ff.jpeg)

---

<div class="post-metadata">

**Author:** ![jane](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jane/32/27575_2.png) [@jane](https://community.thunkable.com/u/jane)\
**Post date:** [July 23, 2021, 10:22am UTC](https://community.thunkable.com/t/bottom-tab-navigator-has-a-space-at-the-bottom-on-ios/1409344/2 "2021-07-23T10:22:52Z")

</div>

Hi there,

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

---

<div class="post-metadata">

**Author:** ![skulamester](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/skulamester/32/100480_2.png) [@skulamester](https://community.thunkable.com/u/skulamester)\
**Post date:** [July 23, 2021, 10:54am UTC](https://community.thunkable.com/t/bottom-tab-navigator-has-a-space-at-the-bottom-on-ios/1409344/3 "2021-07-23T10:54:39Z")

</div>

Thank you so much, waiting for the result.

---

<div class="post-metadata">

**Author:** ![skulamester](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/skulamester/32/100480_2.png) [@skulamester](https://community.thunkable.com/u/skulamester)\
**Post date:** [July 23, 2021, 12:38pm UTC](https://community.thunkable.com/t/bottom-tab-navigator-has-a-space-at-the-bottom-on-ios/1409344/4 "2021-07-23T12:38:31Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [July 23, 2021, 3:34pm UTC](https://community.thunkable.com/t/bottom-tab-navigator-has-a-space-at-the-bottom-on-ios/1409344/5 "2021-07-23T15:34:25Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![skulamester](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/skulamester/32/100480_2.png) [@skulamester](https://community.thunkable.com/u/skulamester)\
**Post date:** [July 23, 2021, 4:06pm UTC](https://community.thunkable.com/t/bottom-tab-navigator-has-a-space-at-the-bottom-on-ios/1409344/6 "2021-07-23T16:06:47Z")

</div>

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:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/8/98067c60b94c433ab6acb10bcdc9c38b6f292f7d.jpeg)

---

<div class="post-metadata">

**Author:** ![jane](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jane/32/27575_2.png) [@jane](https://community.thunkable.com/u/jane)\
**Post date:** [July 26, 2021, 11:45am UTC](https://community.thunkable.com/t/bottom-tab-navigator-has-a-space-at-the-bottom-on-ios/1409344/7 "2021-07-26T11:45:33Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [July 26, 2021, 11:46am UTC](https://community.thunkable.com/t/bottom-tab-navigator-has-a-space-at-the-bottom-on-ios/1409344/8 "2021-07-26T11:46:53Z")

</div>

Yes  
\*for iOS

---

<div class="post-metadata">

**Author:** ![skulamester](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/skulamester/32/100480_2.png) [@skulamester](https://community.thunkable.com/u/skulamester)\
**Post date:** [July 26, 2021, 12:33pm UTC](https://community.thunkable.com/t/bottom-tab-navigator-has-a-space-at-the-bottom-on-ios/1409344/9 "2021-07-26T12:33:02Z")

</div>

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.

> [@jane](#):
>
> On iOS

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.

> [@jane](#):
>
> 5mm or 1/4 inch tall

For me it is 1,2 cm tall:

 ![20210726_142814](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/d/9d0fd82470ac175b0dde590ca7b8d6fdadabfde7.jpeg)

> [@jane](#):
>
> On Android, there is a much smaller gap

On Android there is no gap:

 ![IMG_9600](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/4/f497dd9e24adee52d15694b3ac5466216e7d4407.jpeg)

> [@jane](#):
>
> This gap is only noticeable if the Bottom Tab Navigator has been set to a color that is not white.

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.

---

<div class="post-metadata">

**Author:** ![jane](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jane/32/27575_2.png) [@jane](https://community.thunkable.com/u/jane)\
**Post date:** [July 26, 2021, 3:36pm UTC](https://community.thunkable.com/t/bottom-tab-navigator-has-a-space-at-the-bottom-on-ios/1409344/10 "2021-07-26T15:36:29Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![skulamester](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/skulamester/32/100480_2.png) [@skulamester](https://community.thunkable.com/u/skulamester)\
**Post date:** [July 26, 2021, 4:03pm UTC](https://community.thunkable.com/t/bottom-tab-navigator-has-a-space-at-the-bottom-on-ios/1409344/11 "2021-07-26T16:03:12Z")

</div>

Hey,

> [@jane](#):
>
> Did you see a gap below the Bottom Tab Navigator, on an iPhone XR, before adding an AdMob component to your screen?

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

> [@jane](#):
>
> You have said that you see no gap on Android, then you said that the gap is very noticeable.

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

---

<div class="post-metadata">

**Author:** ![jane](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jane/32/27575_2.png) [@jane](https://community.thunkable.com/u/jane)\
**Post date:** [July 26, 2021, 4:29pm UTC](https://community.thunkable.com/t/bottom-tab-navigator-has-a-space-at-the-bottom-on-ios/1409344/12 "2021-07-26T16:29:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jane](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jane/32/27575_2.png) [@jane](https://community.thunkable.com/u/jane)\
**Post date:** [July 26, 2021, 7:38pm UTC](https://community.thunkable.com/t/bottom-tab-navigator-has-a-space-at-the-bottom-on-ios/1409344/13 "2021-07-26T19:38:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tingccc](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tingccc/32/6145_2.png) [@tingccc](https://community.thunkable.com/u/tingccc)\
**Post date:** [July 26, 2021, 9:48pm UTC](https://community.thunkable.com/t/bottom-tab-navigator-has-a-space-at-the-bottom-on-ios/1409344/14 "2021-07-26T21:48:44Z")

</div>

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!

 ![Where-to-turn-on-Ignore-Notch-Area|275x369.5](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/8/b88de7ad1a2d381e8e7f1e766659b3f5c7e1f1f9.png)  
 ![with-Ignore-Notch-Area-on](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/f/ff0ce81e5f8a50604b3bf407c9ba85071f0e1bde.jpeg) ![with-Ignore-Notch-Area-off](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/5/b57095e70567712a91173f56f89a49b37b5f7aa4.jpeg)

---

<div class="post-metadata">

**Author:** ![skulamester](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/skulamester/32/100480_2.png) [@skulamester](https://community.thunkable.com/u/skulamester)\
**Post date:** [July 27, 2021, 7:13am UTC](https://community.thunkable.com/t/bottom-tab-navigator-has-a-space-at-the-bottom-on-ios/1409344/15 "2021-07-27T07:13:11Z")

</div>

Wow, that one did it.

Thanks for the help @jane and @tingccc.

Anyway, I have an another topic where I need help, could you help me out there as well? [RewardUser block doesn't work](https://community.thunkable.com/t/rewarduser-block-doesnt-work/1412404)

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 1:17pm UTC](https://community.thunkable.com/t/bottom-tab-navigator-has-a-space-at-the-bottom-on-ios/1409344/16 "2024-11-08T13:17:48Z")

</div>


