Improvement Request - More margins in bottom-tab nav

Questions about Thunkable
,
1

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 -

image
image1080Ă—334 61 KB

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? -

image
image1080Ă—174 73.3 KB

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:

3 Likes
2

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
3

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

2 Likes
4

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

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

image

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
5

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

6

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

Thanks! :slight_smile:

7

Bummer!

Another temporary workaround.

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

8

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 -

20200818_201146
20200818_2011461080Ă—303 79.8 KB

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

Thanks Anyways for your tip! :smiley_cat:

1 Like
9

Hi, @domhnallohanlon

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

Thanks! :+1:

1 Like
10

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