Improvement Request - More margins in bottom-tab nav

Hi all! :wave:
Hope you are doing good and are safe :slightly_smiling_face:

I have started using Bottom Navigator, and I would be using it as my main navigator in my next app (soon to launch). Everything’s great, but one thing - the top, bottom & between margins -

There’s very less space left on top and bottom, which catches the eye. Also, the icon size is too big. Can we achieve something like this? -

See? It looks a lot cleaner, and has enough space in-between, on top and on bottom. Also, the icon size is good too. (Note : This was designed in Adobe XD)

So Team, if it’s possible to add some margins & space-ify things a bit, it would look awesome :smiley_cat:

Thanks a lot! :blush:
Stay Safe and Healthy! :+1:


Thanks for this Kartik - the main difference I can see is that the text and the icon colour match.

Would you have a rough ideas of how many pixels difference there is between your design and the current version of the drawer navigator? To my eye it looks like it might only be 3 or 4 px?

1 Like

As a fox, could you plan on using icons with a larger margin for now @kartik14


Hi @domhnallohanlon! :wave:
Thanks for your reply!

This is how they both look - (below one’s mine)


I studied my design, and compared it with Thunkable’s. Here are some of my points -

  • My Design has a height of 70px, and Thunkable’s ~60px.
  • My Design has a icon height of 30px, and Thunkable’s is ~40px
  • My Design has a top+bottom margin of 7.5px both.
  • The font size is also 1px-2px shorter in my case, but that doesnt matter that much

Actually I forgot to change my tint colour in Thunkable. Please ignore that :slight_smile:

I tried it earlier, but it came out a blurry image/very low quality one - anything more you could suggest?

Summed up, we would just need to shorten the logo size, add some bottom and top margins. That’s all :+1:

Thanks a lot!

1 Like

@kartik14 I was thinking Using something like canva to make the icon. Place the image slightly below vertical-center

Tried that one too, but it came out blurry :slightly_frowning_face:

Thanks! :slight_smile:


Another temporary workaround.

A row. Same color as the nav bar, positioned just above the nave bar. Same color. A few pixels tall only

Hi Jared!

That seemed a good idea for top margin. I tried adding a 10px strip, just above the bottom nav. bar - but I that didn’t work out as expected :slightly_frowning_face:

This is what happened -

Adding a negative bottom margin to the strip didn’t help too …

Thanks Anyways for your tip! :smiley_cat:

1 Like

Hi, @domhnallohanlon

Any updates on this? I have to launch my app this weekend :slight_smile:

Thanks! :+1:

1 Like

I have the same problem. Has someone found a way to solve this problem?